vue-cli4.x创建vue2项目

缺乏、安全感 2022-08-30 12:57 208阅读 0赞

### vue-cli4.x创建vue2项目 ###

*  安装与卸载
 *  创建项目
 *  选择配置
 *   *  选择是否使用history router
     *  选择css预处理器
     *  如何存放配置
     *  是否保存当前配置
 *  等待创建项目
 *   *  运行项目并访问

# 安装与卸载 #

3.0以上版本使用 `@vue/cli` 安装最新版

> npm install @vue/cli -g

卸载 `@vue/cli`

> npm uninstall @vue/cli -g

命令行执行 `vue` 命令，展示所有可用命令的帮助信息  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16]  
命令行执行 `vue --version` 或 `vue -V` 命令，查看当前版本  
![在这里插入图片描述][d3422c8ae1a048b8ae44414eb2f6a616.png]  
如需升级全局的 Vue CLI 包，请运行

> npm update @vue/cli -g

# 创建项目 #

> vue create project-name

![在这里插入图片描述][afbd40bff38fad385448a1149763af80.png]  
第一个是包含基本的 Babel + ESLint 设置的vue2项目  
第二个是包含基本的 Babel + ESLint 设置的vue3项目  
第三个为手动选择特性  
默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，这里选择手动配置

# 选择配置 #

> 通过`↑ ↓`箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选。

![在这里插入图片描述][a6378bc87cc2d899687d09f42c07a806.png]

> Choose Vue version // 选择Vue版本(vue2、vue3)  
> Babel // 转码器，可以将ES6代码转为ES5代码  
> TypeScript //J S类型的超集，可以编译成纯JS  
> Progressive Web App (PWA) Support // 渐进式Web应用程序  
> Router // vue路由  
> Vuex // vue的状态管理模式  
> CSS Pre-processors // CSS 预处理器（如：less、sass）  
> Linter / Formatter // 代码风格检查和格式化（如：ESlint）  
> Unit Testing // 单元测试（unit tests）  
> E2E Testing // e2e（end to end） 测试

## 选择是否使用history router ##

![在这里插入图片描述][f1669f71a6810a588fa17aad1844d343.png]  
有需要可以使用，后期也可以开启，这里选n

## 选择css预处理器 ##

![在这里插入图片描述][3530e37a45ce274bed9489ce4edd04fe.png]  
node-sass因为国情原因经常装不上，这里果断选择dart-sass，推荐dart-sass性能更好，也是sass官方使用的

## 如何存放配置 ##

![在这里插入图片描述][91e706f05950a892adb51e5ae50120ab.png]

> In dedicated config files 存放在独立文件  
> In package.json 存放在package.json

我这里选存放在package.json中，存放在独立文件中会生成相关文件，如ESLint会生成.eslintrc.js文件

## 是否保存当前配置 ##

![在这里插入图片描述][083476216c329e14c162a6f3f228e408.png]  
输入N不记录，输入Y保存需要输入保存名字

# 等待创建项目 #

![在这里插入图片描述][449d6050cf16223c788f6d6739c87f27.png]

## 运行项目并访问 ##

![在这里插入图片描述][02966afb41d8d9ce1d90f18572a905fd.png]  
![在这里插入图片描述][6a7debf552da50a1b932c45ea0b1314b.png]  
一个通过vue-cli搭建的基本项目完成了

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/2c37f54cc1d745fd804214ed74633d3c.png
[d3422c8ae1a048b8ae44414eb2f6a616.png]: /images/20220829/059b4eb961464f8a97a63f687ae714ae.png
[afbd40bff38fad385448a1149763af80.png]: /images/20220829/3d89a068ace246c9b28b91f051c8a20b.png
[a6378bc87cc2d899687d09f42c07a806.png]: /images/20220829/1376c321a04c4d98ac218ce17e2172d9.png
[f1669f71a6810a588fa17aad1844d343.png]: /images/20220829/c6016f50f54948a4a28e9a978867321a.png
[3530e37a45ce274bed9489ce4edd04fe.png]: /images/20220829/673b31d992e64397b3e291d636b7d7bd.png
[91e706f05950a892adb51e5ae50120ab.png]: /images/20220829/821d83a73b544660bfd16c37ab608a24.png
[083476216c329e14c162a6f3f228e408.png]: /images/20220829/5dffb3e7a02440fdb29ca84547276b5f.png
[449d6050cf16223c788f6d6739c87f27.png]: /images/20220829/5433a262ec6540fa82ae5a3d50763834.png
[02966afb41d8d9ce1d90f18572a905fd.png]: /images/20220829/764a0a969f444881ab8d21edd5941d57.png
[6a7debf552da50a1b932c45ea0b1314b.png]: /images/20220829/d86496c07be04bdfb5eb09292f5d316b.png