Vue笔记(9) 脚手架

学习内容

⊙ 脚手架的介绍

⊙ 脚手架2.x的创建

⊙ 脚手架3.x的创建

⊙ 脚手架3修改配置文件

脚手架的介绍

安装:

npm i -g @vue/cli

安装完以后,如果我们还想用脚手架2功能,就要拉取2.x的模板

npm i -g@vue/cli -init

vue脚手架2初始化项目:

vue init webpack my-project

现在初始化一个2.x版本的项目

这时候会有很多选项要我们确定

我的设置

然后就自动帮我们生成好文件

真的很强大,直接帮我们都配置好了,webpack的噩梦结束了hhh

脚手架3.x的创建

创建项目:

vue create 项目名称

依旧是有很多东西让我们选

之前我们在脚手架2运行时是用的npm run dev,现在脚手架3用的是npm run serve,可以在package.json里面找到

跑一下试试看:

来看看main.js

这里的template没有了,变成了render,总之就是使用render更轻量一点,小了6kb,把组件放进去就OK了,这里的mount和el的用法其实也是一样的,只是多了一层判断而已

脚手架3修改配置

之前看了脚手架2和3的区别,3的设计原则是"0配置",所以我们该怎么修改配置呢?

vue ui

我们在下载vue/cli的时候他就给我们下载了一个叫vue ui的东西,可以在本地服务上管理配置

只要在终端敲下vue ui即可

会自动帮我们打开浏览器

然后导入我们的vuecli3这个项目:

但是这个有点卡...

点击配置

还可以直接在上面运行

通过配置文件修改

进入这个文件就可以看到很多配置了

如果我们还是想自己写一些配置,可以修改文件vue.config.js,到时它会将这个文件和原来的配置进行合并

这章写的不多,因为我想给vue-router写一章,因为他们每一章都比较重要,所以分开写