五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）

女爷i 2022-09-11 08:17 141阅读 0赞

## 五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看） ##

## 一、搭建vue环境 ##

安装Nodejs 官网下载Nodejs，如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版，稳定。

[点我进入node官网][node]

安装好后cmd输入node -v查询是否安装成功，如下出现版本号即为成功。

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

## 二、Vue脚手架工具 ##

全局安装vue-cli，命令行中输入：

npm install --g vue-cli

国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝镜像或者yarn

## 淘宝镜像的安装如下 ##

npm install -g cnpm --registry=https://registry.npm.taobao.org
    //安装成功后 使用 cnpm i xxx 代替 npm install xxx

## 三、创建项目 ##

vue create 项目名

vue create  code    //其中code为你的项目目录名称 (enter键确认,并进入下一步)

## 最开始回车会出现下面两项 ##

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

Default (Vue 3) ([Vue 3] babel, eslint)(默认配置 提供babel或者eslint支持)
      
      Manually select features(手动选择项目特性)

我们可以通过上下键，空格来选择我们需要的，一般我们都会选择手动配置

## 四、选择manually select (enter键确认,并进入下一步) ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16]  
**对于每一项的功能，王同学做一个简单的描述：**

*  Babel 主要是对es6语法转换成兼容的js （选上）
 *  TypeScript 支持使用TypeScript语法来编写代码
 *  Progressive Web App (PWA) Support \[把网页做的更像原生app\]
 *  Router 支持vue路由配置插件（一般都会选择）
 *  Vuex 支持vue程序状态管理模式 (一般都会选择)
 *  CSS Pre-processors 支持css预处理器 （一般都会选择）
 *  Linter / Formatter 支持代码风格检查和格式化 （选上）
 *  Unit Testing 单元测试
 *  E2E Testing E2E测试

## 常见的项目选择如下 ##

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

## 五、选择完成之后回车 这里我们选择3.x的 ##

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

## 六、完成之后回车 出现以下界面 ##

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

这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n

## 七、回车 出现以下界面 ##

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

这里的意思是问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个

## 八、回车出现以下界面 ##

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

这里的意思是选择一种格式化代码方式：我一般选择 ESLint + Prettier

## 九、回车出现以下界面 ##

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

这里的意思是问你什么时候进行代码规则检测，我一般会选择保存就检测，也就是Lint on Save

## 十、回车出现以下界面 ##

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

这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件干净点，所以选择第一个

## 十一、回车出现以下界面 ##

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

这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了，完成后如下图：

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

## 十二、根据提示，启动项目 ##

根据指令提示 我们先执行cd code，然后执行npm run serve

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

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

## 十三、当我们需要自定义webpack相关配置的时候需要在项目根目录中创建vue.config.js文件，它会被@vue/cli-server自动加载，相关配置内容官网将的很详细，大家可以自己去官网看 ##

# 好了，今天的内容就到这里了，本期结束 我们下期见！！！ #

## Vue脚手架的基本用法 ##

**方法一：基于交互式命令行的方式，创建vue项目**  
![在这里插入图片描述][0cd28de114ec4075a98f89060684c99b.png]  
**详细步骤请参考上文**

## 方法二：基于图形化的方式创建新版的vue ##

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

**第一步：Windows+R打开面板—输入cmd命令—回车**

## 第二步：输入命令 vue ui ##

![在这里插入图片描述][a29e6a7ba10043abbaade60c999672fc.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 9]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 10]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 11]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 12]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 13]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 14]

## 方法三：基于2.X的旧版本，创建旧版的vue项目 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 15]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 17]

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

[node]: https://nodejs.org/zh-cn/
[08e9851ac9fa479e872b46c9b6e07aac.png]: /images/20220828/e14aa920ca1e45b1865f50d51cbd70cb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/22f4faa000d64a7daa3e183b8a5ce3ea.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/fe01afa030754eb79956ab79e2cf01a4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/184cc88ccbd44cb89b4201d7cc6239d2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/4e0f64490a5b447cbff930e7af3786d0.png
[50cf0dc19e0c447ea565928e854094e6.png]: /images/20220828/3f6b58f9b5a640d2bac0121ce0df12fe.png
[521c587ff1a140afacadad10268c9303.png]: /images/20220828/5361c3d129c844feb36988abe0a33a89.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/07753cccf5104205b83d29ffb743134a.png
[b352b33275664121a935055946d21188.png]: /images/20220828/9be3d4df368e43f1a336bd3b07455a84.png
[ced704d550e241a6a136095fd4bec4f1.png]: /images/20220828/f57c8a73ce104d5ba6d8ca19fc85a30e.png
[10f5e596165d4a6392bfc97dfe623cbb.png]: /images/20220828/f292331076e14747b0b6fedae965aa63.png
[46900d9a78c34d13a961731f82b2e0e3.png]: /images/20220828/51e7c39eca044c13aa61822a0fd26031.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/4a63c12443e14507a026b5baa063898f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/dcf6ba7da1cd453da77f2e788c8789f4.png
[0cd28de114ec4075a98f89060684c99b.png]: /images/20220828/75601ae4057142a39a3ca66e37ef98fe.png
[5322b91973ba4bfd90627601bb681d42.png]: /images/20220828/f4f210641a4f4230adbd2cae84f55580.png
[a29e6a7ba10043abbaade60c999672fc.png]: /images/20220828/78dedcbfb30a4121af0540acfc9d4f48.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/5982d0c34fee4c52b8820dafbe3bb011.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/0d83ebdb71594381ad05c121ec7c8ed5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/ac0c3db5f9df456cb310170ec77f1b71.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/d48471f642ea46aba951c49a77a06eb7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/08d31ff6d2204f2db0895ebc502485b2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/eb46d1f0d4414a32aa823195692247f9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220828/1d2dea36bfa44fc6ac692bb4a5beea0c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220828/c4e0119d53fb44df9d5ae321d7169ad5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220828/a4ec24e0d3df4a3fa62d1d4321178719.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 14]: /images/20220828/08dad5d434f34d2aab2a15ee10e70024.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220828/6e81d79e17b24892852ea838802bd5d5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 16]: /images/20220828/b7bd789b9396430f8abb6176a1b9353d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 17]: /images/20220828/f5ec0967ebe24f3e93471e4948d64519.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 18]: /images/20220828/c6137639c178487f91d6ff68300788c7.png