用vue-cli3.0安装脚手架

vue-cli 3.0 正式版在18年 8月10号发布了！作为前端，当然是得赶紧用起来才能跟上脚步，而且不用不知道，一用就会爱上，因为3.0的版本，比2.0的配置文件简洁了很多，它好像是将大部分配置都放在了node_modules里面了。所以生成的脚手架只有两个主文件夹了。

因为我电脑之前用的是vue-cli2.0，所以要先卸了2.0的先：

  npm uninstall -g vue-cli  //卸载之前的
  npm install -g @vue/cli   //全局安装vue-cli3.0

再'vue -V'命令行查看下现在的版本：

搜了说在vue-cli2.0基础上兼容vue-cli3.0安装脚手架的话是下面的命令行：但是我自己试了不行，先不琢磨了

npm install -g @vue/cli-init

安装完后，在选好的文件夹下构建项目：

vue create project-name

D:\mySelf\project\text>vue create vue_text
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes


Vue CLI v3.8.2
? Please pick a preset:    //这里上下键控制选择默认(default)还是手动(Manually)
  default (babel, eslint)    //vue-cli3.0默认使用yarn下载
> Manually select features    //我选择的是手动

然后出现下面的选项，用数字来控制选中，括号带*就是选中

Babel：将ES6编译成ES5
Linter/ Formatter：代码检查工具
CSS Pre-processors：css预编译 
Unit Testing：单元测试，开发过程中前端对代码进行自运行测试
选择完回车

 

选择预编译方法

 

eslint with...: 只进行报错提醒；

eslint + A...: 不严谨模式；

eslint + S...: 正常模式；

eslint + P...: 严格模式；

 

Lint on save：保存就检测(我选这)
Lint and fix on commit：fix跟commit检测

 

单元测试：上下键选择，具体我也不是很清楚是啥，跟别人的选第二个

 

您喜欢将babel、postss、eslint等配置放在哪里？

In dedicated config files:放在独立的文件
In package.json：放在package.json

 

是否在以后的项目都使用以上配置？我选否

 

跑完之后，它提示我去vue3.0_test这个项目下用：npm run serve把项目跑起来

 

如果我们要配置些什么，例如打包后去掉.map文件，或者设置打包的文件夹名字。新建一个vue.config.js文件，在里面配置。我是用了3.0版本之后就不想用回2.0的了，因为简洁很多。

不过，它还有一些地方要注意的：

就是它打包完之后，会把一些比较小的图片转成base64的格式保存，所以在图片文件夹就会找不到那些被转格式的图片了。但是页面还是能正常显示的。

我刚用的时候，看到打包完，文件夹有些图片不见了还以为自己哪个步骤出错了，找了好久，才发现网页能正常显示，只是图片被转成base格式了，顿时觉得自己好傻逼。