Vuejs学习笔记--CLI3笔记

1. 安装

 略

2.Vue-CLI3构建项目

2.1 命令

vue create testvuecli3

2.2 配置项

? Please pick a preset：请选择一个预设

• > default (babel, eslint)         　　　　　　　　　　默认配置
• > Manually select features　　　　　　　　　　　自定义配置

? Please pick a preset: Manually select features
? Check the features needed for your project：选择项目所需的功能

（空格可以选中或者取消，enter确认）

 ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?：您喜欢将Babel、PostSS、ESLint等的配置放在哪里

• > In dedicated config files　　　　　　　　单独放在config文件夹中
• > In package.json　　　　　　　　　　　  放在package.json文件中

? Save this as a preset for future projects? (y/N)  是否将此保存为将来项目的预设

• 以后创建的时候，可以显示当前保存的配置，删除方法参考5.1常见问题
• 

? Save preset as：将预设另存为

• 自定义配置的名称

3. CLI3目录结构，对比CLI2

 

 

.postcssrc.js是css转换的文件。很少改动。

 

4. Vue-CLI3运行项目

• 开发：npm run serve
• 打包：npm run build

5. 常见问题

5.1 预设的配置能否删除？

在C盘用户文件夹下，有个.vuerc文件，删除文件中的配置信息即可

 

5.2 脚手架3的src文件夹变化

 5.2.1 Vue.config.productionTip = false

• 我们在构建项目的时候，会有一些提示信息，就是在执行npm run build的时候。
• 但是，我们在npm run serve的时候，是不需要这些信息的。
• 所以，我们可以设置为false。
• 发布的时候，可以设置为true，到时候终端这里会有很多的信息，构建了什么信息之类的。用处不是很大

 5.2.2 挂载元素的区别：$mount的写法，跟el的写法

• 内部当你把el传进去的时候，内部还是执行$mount这种东西的。
• 如果你是el的写法，vue的内部会判断，你有没有这个属性。如果你有这个el属性，内部执行$mount。
• 如果你是自己用了$mount，那就不会判断了。
• 最终挂载的东西，都会被我们render出来的东西替换掉

6. Vue-CLI3配置文件查看和修改

6.1 终端启用 vue ui

 

6.2 找到vuecli3的配置

 

6.3 修改webpack的默认配置

需要在自己当前项目目录下，创建一个文件，叫做vue.config.js

你在这里写的配置，会和默认的配置，一起进行合并，作为webpack整体的配置

这个文件的名字，不能够修改