vue之Vue CLI

通过vue cli 可以快速进行vue项目的框架搭建，接下来对其搭建和使用进行简单的介绍。

一、全局安装：
npm install -g @vue/cli

二、创建一个vue项目
1 vue create 项目名称（比如：test）回车
2 选择手动选择功能

正常情况选择 babel router vuex css 就够了，其它根据情况选择（选择时按空格键）如下图：

3 路由选择
n代表hash y代表history 根据具体情况选择

4css选择 有以下几种，根据情况选择，一般选择node-sass 其它几种基本一样

5 生成package.json配置文件

6不保存预设，下次建项目重新配置，选择n

等待执行完毕…

7 cd test 切换到当前项目根目录
npm run serve 运行测试

通过 http://localhost:8081/正常打开，如下图所示，表示项目创建成功

三、使用要点

1 、项目整体结构介绍，如下图：

2 注意事项

1 如果数据是多组件共享可以使用vuex来存储数据，否则直接使用data存储即可；在使用vuex存储时，可以使用辅助函数（mapState，mapMutations，mapGetters，mapActions，具体使用可以去查看vuex文档）使代码更简洁

2 如果需要配置webpack，需要新建一个vue.config.js文件（文件名唯一，不可随意更改），具体的配置可以去vue官网查看

3 vue.config.js文件配置完毕，可以通过vue inspect > output.js，在output.js文件中对比查看一下自己的配置是否正确（这点很重要）

4 简化路径的方法：利用了webpack的链式调用，下图来自vue官网

chainWebpack: config => {
// 别名配置，路径的间接跳转 不需要写 ../
config.resolve.alias
   .set('assets', path.resolve(__dirname, './src/assets/'))
   .set('views', path.resolve(__dirname, './src/views/'))
}

5 移动端的适配，推荐使用插件： postcss-px-to-viewport
具体使用可以查看： vue官网介绍 npm对其使用的介绍
下面的写法可以从上面两个文档中找到

css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
        plugins: [
          new pxtovw({
            unitToConvert: 'px',
            // 这个值要根据移动端屏幕宽度来设置
            viewportWidth: 375,
            unitPrecision: 5,
            // 可以过滤某些文件不转换vw
            propList: ['*'],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            // 忽略某些文件夹
            exclude: [/node_modules/]
          })
        ]
      }
    }
  },

以上就是vue cli简单的使用，后续会继续更新。