vue/cli--4.5.13创建项目以及配置

客官°小女子只卖身不卖艺 2022-09-14 09:46 245阅读 0赞

### vue/cli--4.5.13创建项目以及配置 ###

*  目录
 *  一、下载vue/cli
 *  二、创建项目
 *  三、按照项目需求选择相应配置
 *  四、选择版本
 *  五、选择css预处理
 *  六、选择编码规则，代码风格、格式校验
 *  七、选择语法检查方式
 *  八、配置文件存放
 *  九、是否保存配置记忆
 *  十、构建完成
 *  十一、项目运行

--------------------

# 目录 #

# 一、下载vue/cli #

安装vue-cli：

npm install -g @vue/cli

npm链接：

https://www.npmjs.com/package/@vue/cli

# 二、创建项目 #

进入到相应文件夹,进入终端输入vue create命令创建新项目

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

# 三、按照项目需求选择相应配置 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
选项----描述

1 Choose Vue version  
    选择Vue版本  
2 Babel  
    vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5  
3 TypeScript  
    TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源  
4 Progressive Web App (PWA) Support  
    渐进式Web应用程序（PWA）支持  
5 Router  
     路由  
6 Vuex  
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化  
7 CSS Pre-processors  
    CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。  
8 Linter / Formatter  
    格式化程序  
9 Unit Testing  
    单元测试  
10 E2E Testing  
    端到端（end-to-end）  
————————————————

# 四、选择版本 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

# 五、选择css预处理 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]

# 六、选择编码规则，代码风格、格式校验 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]

# 七、选择语法检查方式 #

lint on save  
代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error

lint and fix on commit  
代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]

# 八、配置文件存放 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]

# 九、是否保存配置记忆 #

Save this as a preset for future projects? No
    	//是否记录一下以便下次继续使用这套配置，这里选择不保存

# 十、构建完成 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 7]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 8]

# 十一、项目运行 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 9]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/fb39dfe0fe2144af8e21465d0384db69.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/76de66048130479f96d74f1235da7cef.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/ac53bc3d92504dcc9769f43580de06f8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: /images/20220828/38b4cec275ca44b888320669e70512b8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: /images/20220828/8dea0d3b9297408a81088a715530bb6e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]: /images/20220828/0547f7e4af7647b0bd414457ecee8627.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]: /images/20220828/b63a51fa08bf43a8909221883d7bc711.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 7]: /images/20220828/62e78eae126143799b77d7269f81f9bb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 8]: /images/20220828/9d7d9e6a7ca9486bba83509e2673053b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 9]: /images/20220828/e4431b774d034acdb46947bdb981aad2.png