VueCli 脚手架详解（从安装到实际运用）

小咪咪 2022-12-27 01:56 324阅读 0赞

Cli是什么？

是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）

Vue-Cli是什么？

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，

*  通过 @vue/cli 实现的交互式的项目脚手架。
 *  通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
 *  一个运行时依赖 (@vue/cli-service)，该依赖：
 *  可升级；
    
    1.  基于 webpack 构建，并带有合理的默认配置；
    2.  可以通过项目内的配置文件进行配置；
    3.  可以通过插件进行扩展。
 *  一个丰富的官方插件集合，集成了前端生态中最好的工具。
 *  一套完全图形化的创建和管理 Vue.js 项目的用户界面。

环境需要

要先使用npm进行管理，而使用npm需要先下载nodejs。[参考这篇文章][Link 1]  
在这里我们还需要修改npm下载的镜像，使用阿里提供的国内镜像可以加快下载速度，使用以下命令进行配置即可，

npm install -g cnpm --registry=https://registry.npm.taobao.org
    或者使用这一条命令进行设置
    npm config set registry " https://registry.npm.taobao.org "

使用下述命令进行查看下载地址

npm config get registry:

![在这里插入图片描述][2020120714453543.png]  
Vue-Cli脚手架的安装

在前面设置好nodejs相关的配置之后，我们可以直接使用npm工具拉取vue-cli脚手架，  
使用命令：进行全局安装

npm install -g vue-cli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
Vue-Cli的安装与卸载  
在我们需要对vue-cli 进行版本更新的时候，我们通常是对其先进行卸载再进行重新安装。

# 卸载命令
    npm uninstall -g vue-cli
    #安装命令 版本3
    npm install -g @vue/cli

附图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]

第一个Vue-Cli脚手架的项目

在前面已经搭建好了环境，在下载vue-cli脚手架之后，如果你没有下载vue，也把vue下载下来，使用相同的命令`npm install -g vue` 下载完成之后使用`vue -V`查看vue的版本，检验是否安装成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 2]  
使用`vue init webpack hello`命令进行创建一个vue-cli脚手架的项目，（hello表示项目名）并且对项目的细节进行一系列的设置，如下图所示，在最后选择了npm之后，会通过npm拉取项目所需文件。在这里进行仅对使用路由选择yes，其余皆使用no即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 3]  
项目获取完成之后，就可以看到这个项目的所有文件了，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 4]  
之后我们要运行这个项目，先要切换到这个项目的路径当中，`cd hello` 到这个项目之后，直接使用`npm start`对项目进行启动即可，在这里是使用nodejs进行启动，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 5]  
在最后面会得到一个路由，直接在浏览器当中对这个路由进行访问。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 6]  
项目目录解析：

├── dist/# build 生成的生产环境下的项目
    ├── node_modules/# 依赖包，通常执行npm i会生成
    ├── public/# 公共资源
    ├── src/# 源码目录（开发的项目文件都在此文件中写）
    │ ├── assets/# 放置需要经由 Webpack 处理的静态文件
    │ ├── components/# 公共组件
    │ ├── filters/# 过滤器
    │ ├── store/# 状态管理
    │ ├── routes/# 路由，此处配置项目路由
    │ ├── utils/# 工具类
    │ ├── views/# 路由页面组件
    │ │ ├── demo/# 模块名
    │ │ │ ├── components/# 组件目录
    │ │ │ ├── mixins/# 混入目录
    │ │ │ ├── main.vue/# 模块入口组件
    │ │ │ ├── main.js/# 模块入口文件
    │ ├── App.vue# 根组件
    │ ├── main.js# 入口文件
    ├── babel.config.js# babel配置（语言转换）
    ├── package.json# 本项目的配置信息，启动方式
    ├── package-lock.json# 记录当前状态下实际安装的各个npm package的具体来源和版本号
    ├── README.md# 项目说明
    ├── vue.config.js# 配置文件

第一个Vue-Cli脚手架的项目(自己定义)

**HelloWorld.vue 自定义的模板**

在上面已经对项目的大体有了一定的了解，那么我们要自己进行开发那又应该怎么办呢?看下面，首先，在默认的项目当中HelloWorld.vue这个文件，包含了div块、js代码、css样式，先看js代码块。在这里使用的是es6的语法，对这个vue模块进行暴露，也就是在外部可以对这个进行访问，其次模板语法给data数据当中定义一个变量。

而div块直接加入代码，和获取这个msg变量的值，css代码不做解释。

**App.vue 根组件**

这个文件和上面的HelloWorld.vue同理，同样的对当前模板添加暴露，不同的在于在div块当中使用`<router-view />`表示指向路由。

**index.js 路由文件**

先进行导入vue文件,如下：

import HelloWorld from '@/components/HelloWorld'

在routes当中定义路由。

{ 
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },

**自定义页面的实现**

这样子就是一个简单的概述，其次来说我们自己定义的话和这基本同理，比如，重新使用一个Home.vue作为这一个项目的主页。新建一个Home.vue文件，部分代码如下

<template>
    	<div class="hello">
    		<h1>{ { msg}}</h1>
    		<h2>this is Home</h2>
    	</div>
    </template>
    
    <script>
    	export default { 
    		name: 'Home',
    		data() { 
    			return { 
    				msg: 'Welcome to Your Vue.js App'
    			}
    		},
    	}
    </script>

这样下来保证页面有东西可以显示，之后需要到index.js当中进行路由的注册，先删掉helloworld，使用Home作为主页也就是常说的根目录。先使用import进行导入`import Home from '../components/Home.vue'`导入之后添加路由，并且加上重定向，使得`/`和`/home`都访问的是这一个页面：

{ 
    			path: '/',
    			redirect: '/home'
    		},
    		{ 
    			path: '/home',
    			name: 'Home',
    			component: Home
    		},

这样设置之后再进行访问就是访问这个新定义的home.vue文件了，而在这里还可以使用同样的方式定义其余的页面，并且在页面当中可以实现跳转，在这里我再定义了一个User.vue和Student.vue文件，并且配置好路由都可以进行访问，在Home.vue当中添加a标签即可实现页面的跳转，代码实现如下：而在User和Student也可以添加同样的a标签实现跳转。

<a href="#/user">go to User</a>
    		<a href="#/student">go to student</a>

**组件之间的引用**

在这里再定义一个Footer页脚的组件，新建一个Footer.vue文件。添加一个div块作为内容和再js当中进行暴露，代码如下：

<template>
    	<div class="hello">
    		<h2>this is footer @lizuoqun </h2>
    	</div>
    </template>
    
    <script>
    	export default { 
    		name: "Footer"
    	}
    </script>

在这里因为是使用其他的vue进行引入，所以就不需要再到index.js当中进行路由的注册，在Home当中进行引入，先在script当中进行import导入，之后使用components进行设置，之后就可以直接在div块当中进行使用了。直接使用：`<Footer></Footer>`，这个组件也就导入到主页当中了。

直到这里，简单的vue-cli脚手架项目也就编写完成了，运行项目，查看效果，如下图所示：  
![在这里插入图片描述][20201208155720533.gif_pic_center]

[Link 1]: https://blog.csdn.net/qq_44973159/article/details/108732828
[2020120714453543.png]: /images/20221120/2de98317e8d24ecd865031aff871ceb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201207154829429.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210228211754203.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201215164548383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201208091921478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201207173614795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020120809231938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201208092358869.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70
[20201208155720533.gif_pic_center]: https://img-blog.csdnimg.cn/20201208155720533.gif#pic_center