vue-cli 3.0 体验

vue-cli

官方出品vue脚手架vue-cli前阵子更新了3.x版本，截止本文的版本号是v3.0.0-beta.6。

安装方式已经改为了npm的新命名规则:

npm install -g @vue/cli

命令行中输入vue后发现命令都发生了变化，创建新项目的方法变成了vue create

按照提示在命令后输入项目名，会切换到配置界面

可以选择默认配置，也可以选择第二项手动选择配置

选择手动配置，可以看到许多feature可供选择，在这里我选了较为熟悉的一套东西（测试啥的还不会。。）

值得一提的是，按照提示选择完选项后，可以将这次选择的结果保存为一套预设方案

再次使用vue-cli命令创建项目时，就可以选择自己保存的预设了

移动端改造

在公司接了一个锅，要做一个简单的移动端项目，用啥都行，就想着用新版vue-cli来尝试一下

要改造的东西其实不算很多，最主要的是引入flexible（新版vh方案兼容性不是很好，用的rem方案）

引入flexible

首先yarn add lib-flexible添加依赖，并在/src/main.js中import 'lib-flexible'引入，由于flexible是动态添加meta头，还需要在/public/index.html中删去原本的viewport头防止冲突。

至此其实改造完毕了(是的我也很意外就这么简单)，但是总不至于每个px都自己计算成rem吧…

PostCSS

PostCSS是个处理css的好东西，我用的最多的大概就是autoprefixer，自动添加前缀，相当省心。

新版vue-cli自带postcss-loader，为了愉快的写px而不去计算rem，需要安装插件

yarn add postcss-loader，vue-cli虽然自己生成了了.postcssrc，但是不太喜欢

删了重建一个

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({}),
    require('postcss-px2rem')({
      remUnit: 37.5 // rem的单位，按照需求自己换
    })
  ]
}

配置文件完成后，npm run serve（是的换命令了）进入开发环境，打开F12看看html标签上是否多了data-dpr和font-size，以及px是否自动转换成了rem

另外还可以根据喜好自己添加postcss插件，比如cssnext….不过cssnext集成了autoprefixer，不可以同时引入这两个插件…

其他

新版的vue-cli还是很值得摸索一下的，突然讲究”零配置”的现在，vue-cli也把webpack的配置隐藏了起来，但也并不意味着没法改变，vue-cli提供了中文的全配置文档，一般问题都能解决了，不能解决的可以看看issue里有没有人提…

配置项是添加在package.json还是另外新建一个文件，在创建过程中就提供了选择，如果选择保存在一个文件中，需要在根目录下新建vue.config.js，具体配置内容文档给的很详细。

vue-cli3.0新引入了一个叫vue-cli-service的东西，蛮神奇的，package.json中的scripts里可以看到，精简成了这样…

分别用serve，build，lint来实现开发环境，打包以及自动lint的功能