使用脚手架vue/cli创建vue项目

深藏阁楼爱情的钟 2022-12-27 09:25 146阅读 0赞

## 使用脚手架vue/cli创建vue项目 ##

注：使用git bush here不好进行选择操作

1、未安装脚手架，需要安装

npm install @vue/cli -g

2、脚手架安装成功后，查看vue版本

vue -V

3、搭建项目

vue create 项目名称

4、选择手动配置回车 =》  Manually select features

![20201210110856292.png][]

5、选择我们需要的功能，使用空格键选择

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70][]

*  Babel  将ES6代码转为ES5代码。
 *  TypeScript  支持使用 TypeScript 书写源码（后缀.ts）。
 *  Progressive Web App (PWA) Support  PWA 支持。
 *  Router  支持 vue-router 。
 *  Vuex  支持 vuex 。
 *  CSS Pre-processors  支持 CSS 预处理器(支持less、sass)。
 *  Linter / Formatter  支持代码风格检查和格式化(ESlint)。
 *  Unit Testing  支持单元测试。
 *  E2E Testing  支持 E2E 测试。

6、选择vue版本

![20201210110856331.png][]

7、 使用 class 风格的写法

![20201210110856334.png][]

8、 使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills

![20201210110856455.png][]

9、使用history模式的路由

![20201210110856462.png][]

10、选择css预处理器类型

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70 1][]

11、代码校验

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70 2][]

12、选择代码校验保存时校验

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70 3][]

13、Babel,ESLInt的配置保存在外部文件还是package.json中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70 4][]

对于 Babel 、 PostCSS 等，都可以有自己的配置文件： .babelrc 、 .postcssrc 等等，同时也可以把配置信息放在 package.json 里面

14、是否保存当前一系列的配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70 1][]

[20201210110856292.png]: /images/20221120/89c6757b3b5f4f9098e9f0c592cea3f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201210110856327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU=,size_16,color_FFFFFF,t_70
[20201210110856331.png]: https://img-blog.csdnimg.cn/20201210110856331.png
[20201210110856334.png]: https://img-blog.csdnimg.cn/20201210110856334.png
[20201210110856455.png]: https://img-blog.csdnimg.cn/20201210110856455.png
[20201210110856462.png]: https://img-blog.csdnimg.cn/20201210110856462.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201210110856502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201210110856501.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201210110856414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201210110856500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdXNlZGU=,size_16,color_FFFFFF,t_70