从零开始一个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 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.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