搭建Vue-cli3

小咪咪 2022-01-06 03:21 191阅读 0赞

## 一、安装@vue/cli ##

**1、载掉旧版本命令：**

*  装了旧版本的建议先卸载旧版本，再安装新版本，没有旧版本省略这一步。
 *  node版本要在8.9以上。

npm uninstall vue-cli -g
    	# OR
    	yarn global remove vue-cli

**2、安装cli3命令：**

npm install -g @vue/cli
    	# OR
    	yarn global add @vue/cli

**3、检查是否安装完毕（CMD查看版本号）**

vue -V

## 二、创建项目 ##

vue create project-name

## 三、参数详解 ##

**1、选择默认（default）还是手动（Manually）**

default，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex），推荐选择第二项  
![在这里插入图片描述][20190624150610777.png]

**2、然后项目的需求，使用空格键勾选具体的模块，使用回车键进入下一步**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]

**3、选择路由模式**

y 是 history 模式，n 是 hash 模式；新手可以先从 hash 模式入手，不过实际项目通常采用 history 模式。  
![在这里插入图片描述][20190624150531630.png]

**4、选择CSS 的预编译工具**

stylus 不支持原生 CSS 写法  
![在这里插入图片描述][20190624150441281.png]

**5、选择自动化代码格式化检测**  
![在这里插入图片描述][20190624150353278.png]  
**6、语法检查方式**

第一项是保存检测，第二项是fix和commit的时候检测  
![在这里插入图片描述][20190624151320165.png]  
**7、单元测试**

Mocha是流行的JavaScript测试框架之一，chai 是断言库，我还没用过。

**8、特性的存放方式**

第一项是独立文件夹位置，第二项是在package.json文件里，建议放在独立文件中。  
![在这里插入图片描述][20190624151424762.png]  
**9、是否保存本次预设**

选择y，下次创建项目时，可以直接使用这一次的配置

**10、回车确定等待下载**

## 四、启动项目 ##

npm run serve

## 五、其他 ##

如果还需要使用旧版本的 vue init 功能，可以全局安装一个桥接工具

npm install -g @vue/cli-init
    vue init webpack my-project

[20190624150610777.png]: /images/20211228/437afc4d1b2f4a43a1e4c3d78b7baf54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: /images/20211228/b483e47bf9bb45bf9ab8bb310eaa67e7.png
[20190624150531630.png]: /images/20211228/d5afd69bfb7049ccb3d85938d226dde2.png
[20190624150441281.png]: /images/20211228/0319893cc5c245b9a26d341471f63121.png
[20190624150353278.png]: /images/20211228/7440248f4944428e97d17cd17a97ec68.png
[20190624151320165.png]: /images/20211228/6d928855f6fa410b97b048969bea1cfb.png
[20190624151424762.png]: /images/20211228/521700806e2044f3a17c627afa809672.png