Vue-cli（vue脚手架）超详细教程

拼搏现实的明天。 2022-11-09 12:55 406阅读 0赞

**前言**

“脚手架”，可以方便我们快速的创建项目，自动化地为我们搭建一个项目框架。之前的一篇文章：“[Vue.js 快速入门][Vue.js]”中提到了 Vue-cli脚手架，那么这篇文章就来介绍一下~

## 1. 什么是Vue-cli ##

*  Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能
 *  Vue cli 背后集成了现代化开发的诸多功能，**通过简单的命令就可以完成 "零配置"的项目环境搭建**

## 2. 安装Vue-cli步骤 ##

在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm.

### 2.1 安装Node.js ###

安装了node.js才有使用npm ，才能安装vue-cli

##### 2.1.1 什么是node.js #####

从百度百科可以看到，node.js相当于 js 的 tomacat.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70]

为什么会有node.js？

> 传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一个运行在服务端 的框架，它的底层就使用了 V8 引擎，这样就可以使用javascript去编写一些服务端的程序，这样也就实现了用 javaScript去开发 Apache + PHP 以及 Java Servlet所开发的服务端功能，这样做的好处就是前端和后端都采用 javascript，即开发一份js程序即可以运行在前端也可以运行的服务端，这样比一个应用使用多种语言在开发效率上 要高，不过node.js属于新兴产品，一些公司也在尝试使用node.js完成一些业务领域，node.js基于V8引擎，基于 事件驱动机制，在特定领域性能出色，比如用node.js实现消息推送、状态监控等的业务功能非常合适。

##### 2.1.2 安装node.js #####

1.  下载对应你系统的Node.js版本:  
    [https://nodejs.org/en/download/][https_nodejs.org_en_download]  
    **我们统一安装: node-v12.18.1-x64.msi**  
    ![在这里插入图片描述][20210315155910540.png]
2.  选安装目录进行安装, 我选择安装在了E盘: E:\\Program Files\\nodejs
3.  测试: 在命令提示符下输入命令

node -v //会显示当前node的版本

### 2.2 安装NPM ###

> npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM  
> 的功能和服务端项目构建工具maven的依赖管理功能差不多，我们通过npm 可以很方便地下载js库，打包js文件。

##### 2.2.1 自动安装NPM #####

**node.js已经集成了npm工具**  
在命令提示符输入 npm -v 可查看当前npm版本

npm -v

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

##### 2.2.2 查看包管理路径 #####

包路径就是npm从远程下载的js包所存放的路径。 使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）

npm config ls

我们发现NPM默认的管理包路径在:

> C:\\Users\\86187\\AppData\\Roaming\\npm

##### 2.2.3 设置包管理路径 #####

依赖包放在C盘不太合适,为了方便对依赖包管理, 我们将管理包的路径设置在单独的地方:

1.  我们选择一个路径,专门存放这些依赖包.我选择创建一个目录: **H:\\software\\nodejs\_package**
2.  在 **H:\\software\\nodejs\_package** 下再创建npm\_modules 文件夹 和 npm\_cache 文件夹:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 1]
3.  执行下边的命令,设置为自定义的包管理路径：

npm config set prefix "H:\software\nodejs_package\npm_modules"
    npm config set cache "H:\software\nodejs_package\npm_cache"

1.  此时再使用 npm config ls 查询NPM管理包路径发现路径已更改  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 2]

##### 2.2.4 NPM环境变量配置 #####

1.  查看npm的全局路径是什么

npm config get prefix

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

1.  配置PATH环境变量  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 3]

##### 2.2.5 安装cnpm #####

> npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像下边我们来安装cnpm：  
> 有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。

1.  联网情况下, 输入命令，进行全局安装淘宝镜像:

//安装
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    //查看cnpm的版本
    cnpm -v

### 2.3 安装vue-cli ###

> 目前主流版本是 2.x 和 3.x 版本,安装3.x 以上的版本是因为该版本既可以创建2.x项目与3.x 项目

**注意: 以管理员身份打开命令行**

1.  安装命令

npm install -g @vue/cli

1.  输入 vue命令  
    ![在这里插入图片描述][20210315162114453.png]
2.  输入 vue -V 查看版本

vue -V

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

## 3. 快速构建Vue项目 ##

### 3.1步骤说明 ###

我们使用vue-cli 快速构建项目,步骤如下:

1.  桌面创建一个空的文件夹  
    ![在这里插入图片描述][20210315170002442.png]
2.  以管理员身份运行cmd , 进入到vueTest文件夹  
    ![在这里插入图片描述][20210315170034357.png]
3.  执行下面的命令

1.基于交互式命令方式,创建项目
    //文件名 不支持驼峰（含大写字母）使用短横线方式
    vue create my-project

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

1.  选择自定义安装,点击回车  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 4]
2.  在这列表中,选择我们要安装的组件,使用空格键选择,选好后回车  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 5]
3.  按回车之后,提示选择什么模式的路由,我们输入 n (表示选择hash模式)  
    ![在这里插入图片描述][20210315170327117.png]
4.  选择项目配置文件单独存放  
    ![在这里插入图片描述][20210315170352969.png]
5.  是否保存模板,选择n 不创建  
    ![在这里插入图片描述][20210315170426482.png]
6.  安装完成,提示输入执行下面这两个命令  
    ![在这里插入图片描述][20210315170810285.png]
7.  首先进入项目目录

cd my-project

1.  启动项目

npm run serve

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 6]  
12. 访问项目: [http://localhost:8080/][http_localhost_8080]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 7]

1.  停止项目 只要关闭命令行窗口就可以

### 3.2 导入Vue项目到VSCode ###

1.  VSCode中右键选择打开文件夹
2.  选择桌面上的项目
3.  打开项目,可以看到如下项目结构  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 8]

### 3.3 项目结构介绍 ###

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

### 3.4 Vue脚手架自定义配置 ###

##### 3.4.1 package.js 介绍 #####

> 每个项目的根目录下面，一般都有一个 package.json 文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

{
    //1.项目基本信息
    "name": "project3",
    "version": "0.1.0",
    "private": true,
    //2.指定运行脚本命令
    "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
    },
    //4.生产环境所依赖模块的版本
    "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
    },
    //5.本地环境开发所依赖的版本
    "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "vue-template-compiler": "^2.6.11"
    }
    }

##### 3.4.2 通过package.json 配置项目 #####

**配置内容采用JSON格式,所有的内容都用双引号包裹**  
打开package.json,再最末端添加如下配置:

"vue":{
    "devServer":{
    "port":"8888",
    "open":true
    }
    }

*  配置说明: 该配置设置打包时服务器相关的信息  
    port : 访问端口  
    open true: 打包完成自动打开浏览器

**启动项目**

1.  在[VSCode][]中选择项目,右键在终端打开  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 10]
2.  输入命令

npm rum serve

1.  运行后发现端口号改为 8888,并且在打包完成后自动打开浏览器  
    ![在这里插入图片描述][20210315173156632.png]  
    注意: 不推荐这种方式,因为package.json 主要是用来管理包的配置信息.为了方便维护,我们将Vue脚手架相关的配置单独定义到 **vue.config.js** 配置文件中

##### 3.4.3 单独的配置文件配置项目 #####

1.  在项目的根目录创建文件 **vue.config.js**
2.  删除掉package中新添加的配置项.
3.  在vue.config.js 文件中进行相关配置

module.exports = {
    	devServer:{
    	open:true
    	port:8889
    }
    }

由于篇幅原因，就暂时介绍到这里了。通过Vue-cli怎么创建项目，应该已经够用了。这里延申的话，还可以说下Vue 组件化开发、项目运行流程、组件的使用案例等。

[Vue.js]: https://blog.csdn.net/u012660464/article/details/114170056?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161579240016780264082653%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161579240016780264082653&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-1-114170056.pc_v2_rank_blog_default&utm_term=Vue
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70]: /images/20221023/83dac0307cde491b81f91d07954d6259.png
[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[20210315155910540.png]: /images/20221023/61f9009dc52c4f95bcc35728250e4cec.png
[20210315160645237.png]: /images/20221023/86dfcce67bc04b3995aa762608be9271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/8e6071acc94b4c5e8307846e6dbd3bb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 2]: /images/20221023/45f88a20dc854cf7962cacec8445d8db.png
[20210315161437576.png]: /images/20221023/43f196a660824f1d8fd8a25d51413be6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 3]: /images/20221023/e029c4aed9b046c9ad031f706915786e.png
[20210315162114453.png]: /images/20221023/818e8cbad5a146fa918819af10d2e483.png
[20210315165532366.png]: /images/20221023/4325504418f94f6aaa4720b1b9f0949b.png
[20210315170002442.png]: /images/20221023/2488f1f3b240436192dfa706c96054b4.png
[20210315170034357.png]: /images/20221023/997a75867f1641f9b1259849c631fb4d.png
[20210315170126864.png]: /images/20221023/52a844bc67a04ca897543f00904f9f77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 4]: /images/20221023/efdfd7179ef24944a16f8d9221ac23e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 5]: /images/20221023/d0118b90a59b43fab9fdedd0f9eb4e76.png
[20210315170327117.png]: /images/20221023/b612e31dfbb040e5aa150edba858687e.png
[20210315170352969.png]: /images/20221023/1515b08125ce4d85af64e1779d132e2e.png
[20210315170426482.png]: /images/20221023/d8d943f4c73d4016bd55b0033f9010ab.png
[20210315170810285.png]: /images/20221023/00959d9fdce84747927f69b403b43641.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 6]: /images/20221023/5ee59810a02d4e7f94ef7b9960036601.png
[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 7]: /images/20221023/6898c497e46b467cb40f039a668bb694.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 8]: /images/20221023/eecf73f89aa14bb48d82b80418d92e5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 9]: /images/20221023/5a28ffa0e0c441b3b9a7f20d008d7cbb.png
[VSCode]: https://download.csdn.net/download/u012660464/15491548
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 10]: /images/20221023/0b3a5bfed45f49bc9a5129fe5f941d15.png
[20210315173156632.png]: /images/20221023/73c48c879a88481eaf66d4c342997d28.png