vue-cli脚手架的简介与搭建

前言

  Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，我们可以通过 vue-cli 这种脚手架工具来快速搭建vue项目。

  vue-cli 里存放了很多常用的项目骨架，直接拿来就可以搭建出一个拥有比较成熟项目结构的项目。下面我们来看看vue-cli项目有那些搭建方法以及vue目录的详细介绍。

一、安装node.js

要想使用 vue-cli，得先安装 node.js。

node.js 是一个可以让前端运行在 node.js 提供的服务器上的一个工具，换句话说，就是提供了一个服务器。

1、下载安装node

node官网：https://nodejs.org/zh-cn/

点击选择长期支持版下载，node的安装很简单，这里就不多说明了，一直点next就好了。

2、配置环境变量

如果下载的是后缀名为.msi的安装包的话，node的环境变量在安装的时候已经配置好了；如果下载的是后缀名为.zip的压缩包文件的话，还需要配置下环境变量。

在path下添加node的目录就好了。我的路径是：D:\nodejs\

3、验证

在命令提示符下输入 node -v 以及 npm -v（npm是安装的包管理工具）

这个地方我还输入了cnpm -v，也就是我还安装了cnpm。安装cnpm的原因是因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以就安装了淘宝所提供的cnpm。

下面是cnpm的安装命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

nodejs安装成功

二、安装vue-cli

1、vue cli有2.0和3.0版本之分

vue cli3.0版本和vue cli2.0版本的区别，请参考下面博客：

vue-cli版本（2.0,3.0）与 vue版本（2.x,3.x）：https://www.jianshu.com/p/157b2d5c35a4

2、卸载vue-cli版本

Vue cli的2.x和3.x的卸载方法，请参考下面博客：
vue-cli 安装，卸载，安装指定版本，和创建项目问题相关整理：https://blog.csdn.net/shi851051279/article/details/84928798

3、全局安装vue-cli

首先全局安装webpack

npm install -g webpack  //安装成功后输入`webpack -v`出现版本号
npm install webpack webpack-cli -g  //安装 webpack-cli 依赖

然后再全局安装vue-cli

npm install --global vue-cli  //安装成功后输入`vue -V`出现版本号

• npm：指明使用 node.js 的命令。
• install：安装
• vue-cli：要安装的工具
• –global：全局安装

测试下vue-cli是否安装成功，运行如下命令（注意最后的 V 是大写）：

vue -V

最后，初始化vue（不然在创建项目时会报错），在终端输入以下命令：

npm install -g @vue/cli-init 

三、使用命令搭建vue-cli项目

  在终端中运行 cd 命令，进入想要创建项目的目录位置 。比如我们想把工程创建在 D盘中 D:\VSCode\space 目录下，首先在命令控制台中进入到这个文件夹。接着执行如下命令：

vue init webpack bloghtml  //最后一个参数是自定义的项目名称，我这里命名为：bloghtml

等一会控制台会出现一些配置参数让你选择，基本默认就可以了。

? Project name vue-demo # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
	Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router，路由肯定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm 

四、使用vue ui搭建vue-cli项目

  @vue/cli3.0增加一个可视化项目管理工具，全局安装完成cli3.0之后，可以直接在cmd输入命令：vue ui 启动即可，地址默认是：http://localhost:8000

运行命令 vue ui , 就会启动一个本地服务，下面是vue ui的界面：

创建新项目

选择手动预设

除了默认的功能外选择router、vuex。

然后在配置中选择ESLint + Standard config。

最后创建项目，下面是项目创建成功界面。