从零开始一个vue项目-基础配置篇
第一篇 基础配置篇
一、安装node.js
1.1 node官网下载node.js安装包，然后一直点击下一步安装 (自带npm)
https://nodejs.org/en/
1.2 安装淘宝镜像（国内有墙，直接用npm下载会很慢）
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
二、安装vue-cli
cnpm 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 配置axios
4.3.1 cnpm install axios --save(可以简写为cnpm i axios -S)安装axios插件。
4.3.2 新建一个./plugin/axios.js文件来封装axios（为了做统一设置，请求拦截，响应拦截,请求方法封装）
为什么要做拦截？（因为可做统一的加载动画，验证等） 参考文档：https://www.kancloud.cn/yunye/axios/234845 Axios 是一个基于 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 [email protected] -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.js import './plugin/validate.js'
安装完毕，可以在页面中演示。
具体如何使用参考文章：
https://www.jianshu.com/p/bd6...
4.5 安装vuex（一般大中型单页应用的话状态比较多，难以管理就需要用到vuex）
4.5.1 npm install vuex --save(cnpm i vuex -S) 安装vuex
4.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.js
loaders: 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