vue3自从2020年发布之后，越来越多的同学开始了vue3的学习，要开始学习vue3，就要从脚手架开始，否则后面就走不踏实。
本文章讲解vue3-cli脚手架不同模块之间的选项的详细差别，驼峰老师本人已经花了1天时间进行详细整理，可以节省大家大量自己摸索的时间，从这个角度上面去学习vue3事半功倍。
通过vue-cli的脚手架，命令行是【vue create {项目名称}】来进行项目的初始化。vue命令的安装方法是【npm install -g @vue/cli】，如果提示没有安装权限，请增加sudo。
本文探讨如下几种模式：
- 项目名称p001: Babel + Eslint
- 项目名称p002: Babel + Eslint + Typescript(class-style component)
- 项目名称p003: Babel + Eslint + Typescript(no class-style component)
- 项目名称p004: Babel + Eslint + Typescript + router
- 项目名称p004: Babel + Eslint + Typescript + router + vuex
其中Babel是js编译器，Eslint是用来代码质量检测的，Typescript是ts语言，使项目比js来写更加容易维护和面向对象，router是url路由模块，vuex是状态管理。
1, 项目名称p001: Babel + Eslint
通过cd p001进入项目目录，执行yarn serve启动服务，然后浏览器访问http://localhost:8080即可打开网站。
通过yarn lint可以检验eslint正常工作。
2， 项目名称p002: Babel + Eslint + Typescript(class-style component)
项目p002和项目p001的区别点
- package.json的内容多了ts的依赖，以及使用class风格来写component，如下图
- p002项目目录下比p001项目目录下多了tsconfig.json，文件作用也是为了typescript
- src目录下main.js变成了main.ts
- src下的App.vue文件的写法微微变化，如下图
- HelloWorld.vue组件也发生和App.vue的同样变化，如下图
- 主页展现的区别如下图
3， 项目名称p003: Babel + Eslint + Typescript(no class-style component)
项目p003和项目p002的区别
- package.json减少了vue-class-component的依赖
- component组件没有用class的写法
4， 项目名称p004: Babel + Eslint + Typescript + router
项目p004和项目p003的区别:
- 主页展现的区别，因为要展示router的功能，需要多页面，所以多了一个About页面，如下图
- package.json多了router的依赖，如下图
- main.ts里面增加了router的加载，如下图
- App.vue的变更，如下图
- src目录下多了views目录和router目录
- router目录下的index.ts记录了路由规则（哪个url路径对应哪个view视图），如下图
- views目录下定义了Home.vue文件和About.vue文件。About.vue的内容如下图：
Home.vue的内容如下图：
5， 项目名称p005: Babel + Eslint + Typescript + router + vuex
- package.json中增加了vuex的依赖
- main.ts里面多了store的加载
- src目录下多了store目录，里面有index.ts，如下图：
我们手动增加一个变量count: 1，给About页面去使用
打开views目录下的About.vue，把代码变为下图：
浏览器打开http://localhost:8080/about看看效果，如下图：
结束语：
项目根基搞清楚后，后续才能坚实地添砖加瓦哦。希望对你有所帮助，希望驼峰老师对哪些内容进行讲解的可以留言给老师。