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格式了,顿时觉得自己好傻逼。

 

Logo

前往低代码交流专区

更多推荐