用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-cl...
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格式了,顿时觉得自己好傻逼。
更多推荐
所有评论(0)