Vue-cli的安装与配置

Node的下载与安装

工欲善其事必先利其器，在搭建vue的开发环境之前，一定一定要先下载node.js，vue的运行是要依赖于node的npm的管理工具来实现。

1、首先我们进入到node的官网 https://nodejs.org/zh-cn/ 下载node

运行安装node-—选择文件安装路径-—之后一直点next就可以了

 

2、安装淘宝cnpm镜像

安装好node之后，我们打开终端，输入node -v 查看node的版本，如果能够成功查询到，就表示安装成功了。

因为node中包括了npm,所以可以查看npm的版本

在国内使用npm是非常慢的，所以我推荐使用淘宝npm镜像，使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具，安装cnpm需要npm,打开终端窗口，输入

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

然后回车，如下图所示

安装完成之后，我们输入cnpm -v 来确定是否安装成功，由图可以看出，系统不识别这个cnpm命令

 

这个时候我们来到node安装的文件位置，找到node_global全局模块的文件夹，可以看到cnpm实际上安装在nodel_modules文件夹中，但是cnpm.cmd却是在node_global文件夹中，我们只需要将这个cnpm.cmd文件所在文件夹路径添加到PATH系统变量中去即可，如图所示：

添加文件路径到PATH中去

 

再次打开cmd窗口，输入cnpm -v ，能够成功显示，表示安装淘宝cnpm成功了。

 

3、安装vue-cli脚手架

打开终端 , 全局安装vue-cli

输入指令cnpm install --global vue-cli 

安装好vue-cli之后，再输入vue 来查看vue-cli是否安装成功，出来vue的信息，及说明安装成功

 

4、搭建完vue-cli之后，我们开始创建一个新项目，我们尽量不要安装在c盘，

      因为vue下载下来的文件比较大，更换到其他盘里。

我们开始创建一个新的项目，输入命令： vue init webpack my_project

项目的名称   my_vue

项目的描述   默认

作者

如何构建项目（选第一个）

是否安装vue-router(路由)  根据项目来（新学者选 n ）

是否使用ESLint来规范我们的代码？ Y

选用标准的语法检测（第一个）

是否需要自动化测试？ N   N

项目中采用是什么形式安装？ Npm

之后自动安装项目所依赖的包

接着我们进入到我们安装项目的文件目录中，能够发现我们创建好的项目。

 

接着来到终端中，进入到我们的项目文件中输入 cd my_project，之后安装各个模板之间的依赖 输入 cnpm install

 

5、已经安装完成之后，我们来测试一下下载好的模板是否能够正常的运行，输入 cnpm run dev 运行服务，复制本地端口网址，在浏览器中去访问。

访问网址，能够成功访问到页面，就表示安装成功，可以开始做vue-cli项目了。

 

6、我们打开WS将创建好的项目引入进来，简单介绍一些每个文件目录存放的资源信息

（没有安装WS的可以使用Hbulider中打开文件）

Build       放置的是一些项目的配置文件（默认不动）

Config     是针对于开发环境和线上换环境的一些配置文件（默认不动）

Node_modules  项目的依赖

Src            指的是我们的源代码

Static       放置的是一些静态资源

Main.js文件里面注册了一个局部组件

Vue.vue是页面上显示的内容，vue文件内容主要分成三个部分，模板、脚本和样式。

不太清楚的建议去看看相关的视频

https://www.imooc.com/video/16985