使用Vue-cli 3.0搭建Vue项目，详解！！！

向右看齐 2023-05-31 06:40 5阅读 0赞

### 在开始创建vue-cli3.0之初遇到挺多问题，以下是我配置成功的正确操作步骤，供大家参考，希望有所帮助。 ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][] ###

### 1.1. 安装Node.js （建议使用LTS版本） ###

npm install -g

### 1.2. nrm安装及npm registry设置 ###

// use npm
    npm i nrm -g
    // use yarn
    yarn global add nrm

查看可用的npm源

nrm ls

切换npm源(以使用taobao为例)

// 用法： nrm use ***
    nrm use taobao
    // 切换之后可用 nrm ls查看是否已经切换了npm源

### 1.3. 安装yarn ###

npm i yarn -g

### 1.4. 安装vue-cli 3.0 ###

npm i @vue/cli -g

开始之初以为以上有些步骤纯属多余，结果发现后面输入命令‘vue create vue-test’ 创建失败，后发现配置以上成功即可，如下图：

### ![20191023133935980.png][] ###

### 2.vue-cli搭建脚本文件 ###

在终端输入以下命令，其中vue-test为自定义的项目名称

vue create vue-test

根据提示进行相应的配置（以手动配置为例）：

### 2.1. 选择`Manually select features` ###

![20191023111716249.png][]

### 2.2. 选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)） ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

### 2.3. 选择CSS预处理器语言，此处选择LESS ###

![20191023112040285.png][]

### 2.4. 选择ESLint的代码规范 ###

![20191023113121306.png][]

### 2.5. 选择何时进行代码检测，此处选择在保存时进行检测 ###

![20191023134727895.png][]

### 2.6. 选择单元测试解决方案，此处选择 Jest ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2][]

### 2.7. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3][]

### 2.8. 配置完成后等待Vue-cli完成初始化 ###

![20191023112350297.png][]

![20191023112629299.png][]

### 配置成功 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20230531/5b1ae04bb49b4842ade1e3853828e37a.png
[20191023133935980.png]: /images/20230531/8d3c8f8776d24708971aea6b7b8e7282.png
[20191023111716249.png]: /images/20230531/aceb1e3b365040b1b3dcf7e026e216fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: /images/20230531/6acbb0fa8ca74994a7fecc0b88fc09c1.png
[20191023112040285.png]: /images/20230531/002f0a1b58374fda9f4bb510914d2991.png
[20191023113121306.png]: /images/20230531/cf432ce3f99541af985bbc4f233e9cb0.png
[20191023134727895.png]: /images/20230531/2546a817cb5c42a390f7eb0d61333e0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2]: /images/20230531/f6dc999c86b94c298902125326e0334f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3]: /images/20230531/5c8616f382134cb8b0b10e6e88c9b360.png
[20191023112350297.png]: /images/20230531/b97425e7e9e348e9a9615f723e175c38.png
[20191023112629299.png]: /images/20230531/d9845eabc1e94d8ba0b6538e856c02a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 4]: /images/20230531/b27921c279cb4de0bb17e6100ec8f32b.png