vue-cli4.x的安装与使用

介绍

Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
采用自底向上增量开发的设计。Vue
的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架–它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js
也能完美地驱动复杂的单页应用。

安装node.js

安装vue手脚架之前需要先安装nodejs

1、node.js安装：https://nodejs.org/en/download/
根据自己的电脑位数选择对应的版本进行安装，我的电脑是win10 64位。

如何查看自己的电脑是位数。
双击此电脑


2、下载好node.js后，将node.js放置到除C盘以外的任意一个盘中，如果只有一个C盘，那就随意。这里我将它放在了D盘中。

双击安装，安装过程非常容易，安装的位置需要记一下，稍后要配置path环境变量。

然后一直next（下一步就可以了）。

3、安装完成后我们先启动DOS界面

windows键＋R键输入cmd 后进入的界面叫DOS界面也叫命令行界面。

首先通过指令 node -v指令来查看安装好以后的node，要求在任何一个位置都能够直接使用node。
回车，出现报警不是内部命令。。。。。

说明我们的安装和配置还没有成功，这个时候我们需要配置环境变量。在配置环境变量之前首先要查看一下node安装的文件位置，找到nodejs的文件夹之后，双击打开

我们将会看到有node和npm，这两个文件都是我们即将要使用的。后面的日期是这个版本所修改的日期，并不是我们现在所下载的日期，实际上是以文件产生发布的时间。

好了，废话不多说。然后把上面的地址复制下来（快捷键：CTRL+C）。

然后打开用来设置环境变量的位置，
双击此电脑


在环境变量里边找到path之后双击也可以点击编辑也可以。但是非常需要注意的是里面的路径都不能破坏，我们在里边只能在最前面或在最后面进行编辑，就两头吧，不要破坏中间原有的内容，否则将会导致某些软件不正常，甚至无法进行。然后我这里是在最后面ctrl+v粘贴就行了。设置环境变量的好处呢就是可以在任何一个位置上直接使用node.js里面的任何一个内容。

单击确定X3

重新打开dos界面，一定要关闭之前的dos界面，然后再重新打开dos界面，否则配置的变量不会生效，输入的指令也不会执行，如同之前一样的问题。

打开dos界面—>输入node -v 。这一会出现node的版本号，显示的是v12.14.0这个版本。出现版本号说明nodejs安装成功了。说明node在任何一个位置都能够直接被使用

我们还可以查看npm的版本号，npm是属于node里边所衍生出来一个指令。我们可以不会node，但是npm里边的一些指令我们是需要会的，因为他是我们在学习脚手架的时候所必须的一些指令。

查看npm版本号指令：npm -v

安装vue-cli4.x

由于最新的Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 

但下载npm 一般默认还是安装的2.X版本

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，

你需要先通过 npm uninstall
vue-cli -g 或 yarn global remove vue-cli 卸载它。（如果之前没有安装vue-cli2过，这部分就不用理了）

如果还无效的话 ，替换掉npm再次重试  

命令：npm config set
registry http://registry.npmjs.org

最后再执行一波 卸载或者安装操作就ok啦

方式一：普通安装vuecli4指令：npm install -g @vue/cli

方式二：淘宝镜像安装vuecli4指令： cnpm install -g @vue/cli

npm指令安装极及慢，网速不好建议使用cnpm安装。但是得先下载cnpm

cnpm安装（下载）

（npm和cnpm最大的区别在于默认和选择的站点不同）

npm 默认下载是在国外

cnpm 默认下载是在国内的淘宝镜像

cnpm下载指令：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装好cnpm之后，就可以使用cnpm来进行vue-cli4的安装了

安装最新vue-cli4

cnpm install -g @vue/cli

然后等待就可以了。

补充知识点：也可以使用指令：cnpm install -gD vue-cli （D可以大写也可以小写，标准写法为大写）

指令:npm i -g --save --dev vue-cli既适用于开发环境也使用于生产环境

-S，-D参数

-S，--save 安装包信息将加入到dependencies（生产阶段的依赖）

生产阶段的依赖：指开发完成后已经进入到实际应用的阶段，主要用于我们发布和产品交互使用的时候。

-D，--save，--dev 安装包信息将加入到devDependencies（开发阶段的依赖）,所以开发阶段一般使用它

i 是install的缩写（注意：i前面没有“-”）

整个工作安装好之后

输入指令：vue -V

看到版本号，说明cli4安装成功了

vue-cli4创建项目

先选择要在哪里创建项目
比如在d盘

d:       //切换到D盘
md test4     //（文件名称是自己起的，起名的时候最好要做到望文知意）
cd test4     //（在test4这个路径里边进行项目的创建）
vue create test4 （上下键选择手动配置，空格键选择或取消选择）

 

创建cli过程中部分配置内容需要特别注意的两项

1、Install vue-router？（Y/N） 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可

2、use Eslint to
lint your code?（Y/N）是否使用Eslint管理代码，Eslint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。但是这里选择n

3、其他回车默认，

安装完成之后根据提示

输入

cd test4

npm run serve

就可以启动项目了。

浏览器访问local网址也可以访问Network也可以，都会看到如下界面。

至此cli4项目创建成功。