vue开发使用vue-cli4.x创建项目详解

Love The Way You Lie 2023-07-04 08:47 6阅读 0赞

**- 前言**  
vue-cli4.x新版本安装教程可以看看我之前的文章。版本更新后在创建项目上有所不同，这里做详细的步骤教程以及选项解释。

**- 创建项目**  
`vue create 项目名`

**- 选择配置**  
![在这里插入图片描述][20200209191338704.png]  
先无视第一项（我的个人配置，后面会讲到）；一般有两项：  
**default**：默认配置（只有babel和eslint）  
**Manually select features**：手动配置  
一般做项目默认配置是不够的，我们选第二项。

**- 进行配置**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Babel</td> 
   <td>一种能让浏览器自动识别向后兼容各版本JavaScript的功能（选）</td> 
  </tr> 
  <tr> 
   <td>TypeScript</td> 
   <td>一种.ts后缀兼容js的语法（不选）</td> 
  </tr> 
  <tr> 
   <td>Progressive Web App（PWA）Support</td> 
   <td>渐进式网络应用（不选）</td> 
  </tr> 
  <tr> 
   <td>Router</td> 
   <td>vue的路由管理组件（选）</td> 
  </tr> 
  <tr> 
   <td>Vuex</td> 
   <td>vue的状态仓库管理组件（选）</td> 
  </tr> 
  <tr> 
   <td>CSS Pre-processors</td> 
   <td>CSS预编译（选）</td> 
  </tr> 
  <tr> 
   <td>Linter/Formatter</td> 
   <td>代码检验 格式检查（选）</td> 
  </tr> 
  <tr> 
   <td>Unit Testing</td> 
   <td>单元测试 以开发角度测试代码（不选）</td> 
  </tr> 
  <tr> 
   <td>E2E Testing</td> 
   <td>e2e测试 以用户角度测试代码（不选）</td> 
  </tr> 
 </tbody> 
</table>

**- 选择router模式**  
![在这里插入图片描述][20200209194706164.png]  
history和hash是router组件的mode选项，一般默认用history更普遍和实用。

**- 选择CSS预编译方式**  
![在这里插入图片描述][20200209195159972.png]  
这里看你个人习惯，我经常用`Sass/Scss（with node-sass）`或者`Less`

**- 选择代码校验方式**  
![在这里插入图片描述][20200209195541258.png]  
我习惯选`ESLint with error prevention only`或者最后一项`ESLint+Prettier`。如果是用VScode的小伙伴推荐最后一项，与VScode里的Prettier插件配合不错。

**- 选择代码检查时间点**  
![在这里插入图片描述][20200209195958579.png]  
选择第一项`Lint on save`，在保存后就自动检验代码和格式。

**- 询问配置保存位置**  
![在这里插入图片描述][20200209200226131.png]  
询问是否将配置放在package.json文件中。推荐选第一项`In dedicated config files`，创建新的配置文件。

**- 保存为预配置**  
![在这里插入图片描述][20200209200521281.png]  
询问是否将以上配置保存为**预配置**，也就是刚第一步选择配置时我的“Jsxj-preset”。这个根据自己意愿，预配置对以后创建项目来说还是方便点的，  
选择“Y”or“N”。如果“Y”，就继续设置预配置名称；如果“N”就自动跳过。

**- 自动创建**  
回车开始自动创建项目，需要一定时间，创建成功结束后可以看到以下项目结构！  
![在这里插入图片描述][20200209201059527.png]

[20200209191338704.png]: https://img-blog.csdnimg.cn/20200209191338704.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200209192019806.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0,size_16,color_FFFFFF,t_70
[20200209194706164.png]: https://img-blog.csdnimg.cn/20200209194706164.png
[20200209195159972.png]: https://img-blog.csdnimg.cn/20200209195159972.png
[20200209195541258.png]: https://img-blog.csdnimg.cn/20200209195541258.png
[20200209195958579.png]: https://img-blog.csdnimg.cn/20200209195958579.png
[20200209200226131.png]: https://img-blog.csdnimg.cn/20200209200226131.png
[20200209200521281.png]: https://img-blog.csdnimg.cn/20200209200521281.png
[20200209201059527.png]: https://img-blog.csdnimg.cn/20200209201059527.png