从零开始一个vue项目-基础配置篇

第一篇 基础配置篇一、安装node.js1.1 node官网下载node.js安装包，然后一直点击下一步安装 (自带npm)https://nodejs.org/en/1.2 安装淘宝镜像（国内有墙，直接用npm下载会很慢） $ npm install -g cnpm –registry=https://registry.npm.taobao.org二、安装vue-clicnpm install -g vue-cli 三、使用vue-cli初始化一个项目cd进入你要新建项目的文件目录，然后vue init webpack my-project my-project是你的项目名称(vue init webpack如果后面不跟名字就会在当前文件目录下初始化，你可以提前建一个空文件夹，然后直接vue init webpack)，安装的过程中会询问你是否安装一些东西，我只在vue-router和ESLint选了yes。最后一步（use npm install）敲回车然后等待。安装成功过后切换到你的项目目录，然后npm run dev运行项目，在浏览器访问http://localhost:8080 可以看到一个原始的vue模板页面，主页是一些链接，https://vuejs.org/ vue官方文档https://forum.vuejs.org/t/201… vue论坛https://chat.vuejs.org/ 大概是vue聊天社区，翻墙才可以https://twitter.com/vuejs 推特中的vue板块吧，翻墙才可以http://vuejs-templates.github… 关于webpack的介绍vue-router，vuex，vue-loader文档上面链接的是英文文档，我们直接切换成中文。vue-router https://router.vuejs.org/zh/ vuex https://vuex.vuejs.org/zh/vue-loader https://vue-loader.vuejs.org/zh/ https://github.com/vuejs/awes… 最后一个awesome-vue就是一些资源链接的汇总，分为资源，项目，组件&&工具三块。感觉这个是宝藏，多多挖掘。四、一些基本配置 4.1 配置less(sass)4.1.1 cnpm install less less-loader –save-dev（–save是部署时也会使用该模块，–save-dev是开发时使用，部署时不需要） 安装成功后在package.json文件的devDependencie会增加两项,“less”,“less-loader”。如果安错了卸载cnpm uninstall less less-loader –save-dev(后面跟的–save-dev是删除模块的同时删除配置信息)4.1.2 打开build/ webpack.base.conf.js文件，配置loader。在rules里面加上{ test: /.less$/, loader: ‘style-loader!css-loader!less-loader’, },4.1.3 在.vue文件中的style标签加上lang=“less”<style scoped lang=“less”></style>4.2 安装UI组件库PC端UI框架可以选择Element iView移动端的UI框架可以选择VUX Vant等 这里以VUX为例，一般官方文档会告诉你怎么引入。4.2.1 下载vux组件库。npm install vux –save(cnpm简写方式 cnpm i vux -S) 4.2.2 vux 需要vux-loader来进行预处理（实现按需加载等功能）npm install vux-loader –save-dev(cnpm i vux-loader -D) 4.2.3 修改webpack配置const vuxLoader = require(‘vux-loader’)const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig（注意这句不是添加的,而是把原来的’module.exports=‘改成’const webpackConfig =’）module.exports = vuxLoader.merge(webpackConfig, { plugins: [‘vux-ui’]})4.2.4 现在vux就安装成功了，在你的页面里试一试。 1、npm run dev 运行项目 2、观察你的router/index.js 发现首页是HelloWorld组件。 3、页面修改如下（我们做一个flex三栏布局） <template> <div> <flexbox> <flexbox-item><div class=“flex-demo”>1</div></flexbox-item> <flexbox-item><div class=“flex-demo”>2</div></flexbox-item> <flexbox-item><div class=“flex-demo”>3</div></flexbox-item> </flexbox> </div> </template> <script> import { Flexbox, FlexboxItem } from ‘vux’ export default { components: { Flexbox, FlexboxItem } } </script> <style lang=“less”> @import ‘~vux/src/styles/1px.less’; .flex-demo { text-align: center; color: #fff; background-color: #20b907; border-radius: 4px; background-clip: padding-box; } </style>保存后页面自动刷新，效果如下4.3 配置axios4.3.1 cnpm install axios –save(可以简写为cnpm i axios -S)安装axios插件。4.3.2 新建一个./plugin/axios.js文件来封装axios（为了做统一设置，请求拦截，响应拦截,请求方法封装）为什么要做拦截？（因为可做统一的加载动画，验证等）参考文档：https://www.kancloud.cn/yunye/axios/234845Axios 是一个基于 promise 的 HTTP 库，要完成封装需要先理解es6的promise对象，参考阮一峰的ECMAScript 6入门：http://es6.ruanyifeng.com/#docs/promise （Promise对象介绍）。重点了解里面的then() actch() reject()1) 配置：1.baseUrl 2.Content-Type(跨域资源非简单请求时会首先发送一个option预检请求，也就是会请求两次。另外直接设置Content-Type好像没有用，会自动识别数据的类型) 3.tiemout只要同时满足以下两大条件，就属于简单请求，否则就是非简单请求2) 请求拦截（在请求或响应被 then 或 catch 处理前拦截它们。）： 1.post请求时数据处理，（config.data=qs.stringfy(config.data)）将JSON格式转化为url的编码形式（application/x-www-form-urlencoded）。如果不转换的话，传过去的我们提交请求的时候Content-Type设置了也没用，还是为application/json，就会变成非简单请求，但是呢！我草你妹的参数序列化这里有一个大坑，就是上传图片的时候是上传的FormData,序列化会把他转成一个空对象，是传不了数据的，所以拦截器要做一个判断来区别开FormData对象和Json对象 2.请求时做动画效果 3.请求错误时停止动画效果 3)响应拦截：1.响应正确时的数据处理 2.响应错误时的数据处理我们前面引入了vux插件，在这里演示如何用vux的loadding组件做加载动画。—-在axios.js里面import Vue和需要的vux组件import Vue from ‘vue’import { LoadingPlugin } from ‘vux’ import { ToastPlugin } from ‘vux’Vue.use(LoadingPlugin) Vue.use(ToastPlugin)/ 添加请求拦截器instance.interceptors.request.use(config => { if (config.method === ‘post’) {config.data = qs.stringify(config.data)} // 在发送请求之前loading动画 Vue.$vux.loading.show({text: ‘Loading’}) return config}, error => { // 对请求错误取消loadding动画 Vue.$vux.loading.hide() return Promise.reject(error)})// 添加响应拦截器—————————————————————–instance.interceptors.response.use(function (response) { // 对响应数据做点什么（取消loadding动画，对某一种返回数据做处理） Vue.$vux.loading.hide() var data=response.data; if(data.code==400){ //服务器报400错误时，页面提示错误信息Vue.$vux.toast.text(data.info)} return data;}, function (error) { // 对响应错误做点什么（取消loadding动画，然后做报错提示信息） Vue.$vux.loading.hide(); Vue.$vux.toast.text(‘网络错误，稍后重试’)return Promise.reject(error);});4.3.3 将实例添加到vue原型链上Vue.prototype.$http = instance;4.3.4 axios.js配置完成之后，在main.js引入import ‘./plugin/axios.js'4.4 安装表单验证插件(登录注册等提交信息前的验证，觉得不需要的就跳过， 这里选择VeeValidate)https://baianat.github.io/vee…（VeeValidate配置篇）4.4.1 cnpm i vee-validate@2.0.0-rc.25 -S (必须要这个版本，最新版使用中文会报错)4.4.2 新建一个./plugin/validate.js （新建的作用以插件的形式方便添加验证规则和设置配置信息，不直接写在mian.js以免显得混乱。） import Vue from ‘vue’ import VeeValidate,{Validator} from ‘vee-validate’ import zh_CN from ‘vee-validate/dist/locale/zh_CN’ const ValidateConfig = { events: ‘input|blur’, locale: ‘zh_CN’, }; Validator.addLocale(zh_CN) Vue.use(VeeValidate,ValidateConfig)4.4.3 在main.js 导入validate.jsimport ‘./plugin/validate.js’安装完毕，可以在页面中演示。具体如何使用参考文章：https://www.jianshu.com/p/bd6…4.5 安装vuex（一般大中型单页应用的话状态比较多，难以管理就需要用到vuex）4.5.1 npm install vuex –save(cnpm i vuex -S) 安装vuex4.5.2 main.js中引入import Vuex from ‘vuex’Vue.use(Vuex)vuex使用入门：https://www.jianshu.com/p/fff…4.6 安装css预处理插件将像素转换为rem/vw（用以不同屏幕大小的适配）。我这里选用的 postcss-px-to-viewport，将px转化为vw。4.6.1 cnpm install postcss-px-to-viewport –save-dev 安装插件 (cnpm i postcss-px-to-viewport -D)4.6.2 更改vue-loader配置找到文件build/vue-loader.conf.jsloaders: utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: isProduction, usePostcss:true //加上这一句}),4.6.2 更改.postcssrc配置 根目录下的.postcssrc.js文件下添加postcss-px-to-viewport的配置项。module.exports = { “plugins”: {“postcss-import”: {},“postcss-url”: {},// to edit target browsers: use “browserslist” field in package.json"autoprefixer": {},‘postcss-px-to-viewport’:{ viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 unitPrecision: 3, // 指定px转换为视窗单位值的小数位数（很多时候无法整除） viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，建议使用vw selectorBlackList: [’.ignore’, ‘.hairlines’], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 minPixelValue: 1, // 小于或等于1px不转换为视窗单位，你也可以设置为你想要的值 mediaQuery: false // 允许在媒体查询中转换`px}},}可以在页面中使用了。效果如下4.7 安装chrome浏览器的vue调试工具。参照https://segmentfault.com/a/11…（随便百度到的）(a)windows系统如果报错’cross-env’ 不是内部或外部命令，也不是可运行的程序的话，先安装cross-env。npm install –save-dev cross-env(b)如果一开始控制台那个vue图标没有出来，重新打开f12