本文共 3324 字，大约阅读时间需要 11 分钟。

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。

在这里我们还需要修改npm下载的镜像，使用阿里提供的国内镜像可以加快下载速度，使用以下命令进行配置即可，

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

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

npm config get registry:

Vue-Cli脚手架的安装

在前面设置好nodejs相关的配置之后，我们可以直接使用npm工具拉取vue-cli脚手架，

使用命令：进行全局安装

npm install -g vue-cli

Vue-Cli的安装与卸载 在我们需要对vue-cli 进行版本更新的时候，我们通常是对其先进行卸载再进行重新安装。

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

附图如下：

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

在前面已经搭建好了环境，在下载vue-cli脚手架之后，如果你没有下载vue，也把vue下载下来，使用相同的命令npm install -g vue 下载完成之后使用vue -V查看vue的版本，检验是否安装成功。

使用vue init webpack hello命令进行创建一个vue-cli脚手架的项目，（hello表示项目名）并且对项目的细节进行一系列的设置，如下图所示，在最后选择了npm之后，会通过npm拉取项目所需文件。在这里进行仅对使用路由选择yes，其余皆使用no即可。 项目获取完成之后，就可以看到这个项目的所有文件了，如下图所示： 之后我们要运行这个项目，先要切换到这个项目的路径当中，cd hello 到这个项目之后，直接使用npm start对项目进行启动即可，在这里是使用nodejs进行启动，如下图： 在最后面会得到一个路由，直接在浏览器当中对这个路由进行访问。 项目目录解析：

├── 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文件，部分代码如下

这样下来保证页面有东西可以显示，之后需要到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标签实现跳转。

go to User		go to student

组件之间的引用

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

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

直到这里，简单的vue-cli脚手架项目也就编写完成了，运行项目，查看效果，如下图所示：

转载地址：http://skqzi.baihongyu.com/