您的位置：首页 > Web前端 > Vue.js

vue-cli3的安装及项目搭建与使用

2019-06-05 13:27 609 查看

文章目录

1. vue-cli 的简单介绍
2. vue-cli的安装与更新
3. 用vue-cli2.x搭建项目
4. 用vue-cli 3.0搭建项目
5. 用vue-cli 3.0添加插件

1. vue-cli 的简单介绍

CLI为命令行工具，Vue-CLI是一个基于nodeJs、用于快速搭建繁杂vue项目的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

2. vue-cli的安装与更新

注意：在 win10下安装时，使用

管理员身份

进行，不然在之后的使用中会有权限限制。

完成安装nodejs ，node中有自带的npm，可以在cmd中直接用npm安装全局的vue-cli：
```
C:\Windows\system32> npm install -g @vue/cli-init
```
检查当前vue版本号：
```
C:\Windows\system32>vue --version
3.8.2
```
也可以使用cnpm安装，这个会速度快些，但需要先装cnpm
```
npm install cnpm -g --registry=https://registry.npm.taobao.org
```

然后将上面安装过程中的npm换成cnpm就好了

更新vue-cli
```
cnpm update vue-cli
```

查看vue-cli的版本：使用

cnpm view vue-cli

，如下：

C:\Windows\system32>cnpm view vue-cli

vue-cli@2.9.6 | MIT | deps: 20 | versions: 35
A simple CLI for scaffolding Vue.js projects.
https://github.com/vuejs/vue-cli#readme
bin: vue, vue-init, vue-list
dist
.tarball: https://registry.npm.taobao.org/vue-cli/download/vue-cli-2.9.6.tgz
.shasum: afc3cc6ce6de350d89876fee2dc163d0b83e0136

dependencies:
async: ^2.4.0                     inquirer: ^6.0.0                  rimraf: ^2.5.0
chalk: ^2.1.0                     metalsmith: ^2.1.0                semver: ^5.1.0
coffee-script: 1.12.7             minimatch: ^3.0.0                 tildify: ^1.2.0
commander: ^2.9.0                 multimatch: ^2.1.0                uid: 0.0.2
consolidate: ^0.14.0              ora: ^1.3.0                       user-home: ^2.0.0
download-git-repo: ^1.0.1         read-metadata: ^1.0.0             validate-npm-package-name: ^3.0.0
handlebars: ^4.0.5                request: ^2.67.0

maintainers:
- rem <0x142857@gmail.com>
- yyx990803 <yyx990803@gmail.com>
- zigomir <zigomir@gmail.com>

dist-tags:
latest: 2.9.6

published 12 months ago by yyx990803 <yyx990803@gmail.com>

3. 用vue-cli2.x搭建项目

先将路径改为自己的项目文件夹下，运行：
```
vue init webpack my-project11
```
其中
```
my-project11
```
为自己建的项目名称，如下所示：

直接按回车键即可
基础选项配置
在下图中你可以对你的项目进行描述，我的描述为：Vue基础

接下来是一些项目构建过程中的配置选项，一般选择no或按回车键即可，当然，若是有你需要的你也可以选yes，其中
```
vue-router
```
你可以在需要的时候再进行安装，
```
ESLint
```
（提供代码检测功能，比较严格，稍微语法不符合它的规范就会报错，可以不选）、
```
unit tests
```
（单元测试）、
```
e2e tests with Nightwatch
```
也是一个测试工具，这里我都没有选择，遇到
```
>
```
的可以通过我们键盘上的上下来进行选择，然后按回车即可
```
E:\1-前端\网页\15-vuejs\vue项目>vue init webpack my-project11
? Project name my-project11
? Project description Vue基础
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended)
`>`Yes, use NPM
Yes, use Yarn
No, I will handle that myself
```
图片如下，选择使用npm，直接回车
接下来就是它自动安装项目模块了，需要等待一分钟左右

此时可以看到原本是空的文件夹多了一个
```
my-project11
```
项目文件，如下图中的1；打开该文件夹后，如图中的2所示，里面是一些初始化的项目目录文件夹
该项目中有很多文件夹，现在简单了解，以后详细补充
* build 构建了客户端和服务端，可以改变端口号，
* config 是对应的一些配置
* src 知识点以后补充
* static 放的是静态文件
* index.html 当前入口文件
运行项目
如下图，红色矩形框里是上一步安装项目模块的最后输出，按照蓝色箭头指示的内容，我们先通过
```
cd my-project11
```
到我们项目文件夹下，然后
```
npm run dev
```
，按回车，可开启一个8080的端口

此时可以打开本地服务器实时查看效果（localhost:8080），在浏览器中展示内容，下面看到的就是vue搭建好的一个初始项目
按Ctrl+C退出监听

4. 用vue-cli 3.0搭建项目

有以上基础，相信很快就可以搭建好3.0的项目

先将路径改为自己的项目文件夹下，运行：
```
vue create vue3-demo
```
其中
```
vue3-demo
```
为自己建的项目名称，如下所示，点击回车：
接下来也是一些基础选项配置，上图中是问对应你所需要安装的一些东西，第一个选项是默认安装babel和eslint，第二种是可以多个选择的，我这里选择第二种方式，选择要安装的内容，通过键盘的上下箭头控制选项、使用空格来决定要或者不要，若括号内有
```
*
```
表示安装、无
```
*
```
表示不安装

Babel：javascript转译器。使用原因：javascript不断发展，但浏览器发展速度慢，为能在现有的浏览器上使用js新语法和新数据类型，需要使用一个转译器将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。
typescript：微软提供的一种javascript超级，vue3.0版本支持typescript
CSS Pre-processors：CSS预处理器，如：Sass（SCSS）、LESS、Stylus等

下面是我的一些基础设置：

Save this as a preset for future project?

指是否将刚刚自己选择的保存为自己脚手架模板，若

Yes

则以后可以直接选择自己定义的这个脚手架，并可以给自己定义的脚手架命名，我这里选择no。
接下来等待一两分钟便安装成功，此时文件夹里多了一个我们新建的项目（1中紫色箭头所示），打开该项目文件夹，里面内容如下图2中所示：

启动项目

cd .\vue3-demo

```
npm run serve
```
：运行开发环境或
```
npm run build
```
：运行生产环境
运行开发环境如下图所示：
```
注意生成两种地址形式，本地地址和网络地址，网络地址可以在手机上查看
```
打开浏览器，便能看到我们项目的初始化状态：

点击页面上的
```
About
```
，如下所示：