vue——搭建vue-cli脚手架（可详细了！）

本文目录：

1. 下载安装node.js环境
2. 安装cnpm淘宝镜像
3. 使用npm安装vue-cli包
4. 创建初始化vue项目
5. 本地运行vue项目

正文：

1.下载安装node.js环境——首先我们要知道vue是需要依赖node.js环境来进行包的安装和运行，下载node.js可以通过node.js下载网址进行下载，根据个人电脑系统进行下载版本：
下载完成以后点击安装，如果不懂node.js的安装配置的，可以傻瓜式安装，一直next即可：

安装完成以后，我们打开电脑的终端工具：

• window系统打开步骤：win+r键打开运行工具——>输入cmd回车即可
• 
• moc系统打开步骤：打开搜索，输入终端，选择终端即可

检测node.js和npm是否安装成功，可以在终端中输入node -v和npm -v，来查看版本，如果能够返回版本号证明安装成功，安装node的时候会默认安装npm，所以不需要在单独安装：

2. 安装cnpm淘宝镜像——npm是包的管理工具，可以使用此命令来下载安装所需要的包，但是npm是直接请求的国外的资源所以会比较慢，cnpm是淘宝的一个镜像工具，使用cnpm会直接请求国内的资源地址，所以会比npm更快，npm可能会因为网络不佳的原因导致包的安装失败问题，所以出现此失败问题后，可以换成cnpm，安装cnpm在终端工具中输入以下命令：

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

安装成功以后可以通过cnpm -v来查看版本号，验证是否安装成功：

3. 使用npm安装vue-cli包——前期的环境准备工作已经完成了，现在就可以来安装vue-cli了，在终端工具中输入以下命令：

npm install -g vue-cli

安装完成以后可以通过vue -V来查看vue的版本号，验证是否安装成功（注意：这里的-V，是大写的V，不能使用小写的v）：

4. 创建初始化vue项目——首先在我们的电脑里新建一个存放我们vue项目的文件夹，这个文件可以随意放在任何地方都可以，方便自己查找及归类即可：
   
   我创建了一个demo1文件夹来作为此次的项目存放，双击demo1文件，进入demo1文件内，我们要想将vue的代码放入此文件内，就需要在终端工具中先进入此文件夹，可以使用命令cd（不会的自己百度一下），也可以直接快捷操作，进入文件后，按住键盘shift键再点击鼠标右键，在弹出的菜单中选择在此处打开Powershell窗口，然后终端工具就会自动打开并定位在此目录下（此方法打开的终端工具是蓝色背景的，和上方的黑色背景的是一样的，没有区别）：
   
   终端工具打开并定位在demo1文件下后，在终端工具中输入以下命令并回车，会有一句话Generate project in current directory?（在当前目录中生成项目？），输入y回车：

 vue init webpack

然后会需要咱们确定和选择项目的一些基础配置和选项：

选择完以后，就会自动进行项目文件的创建，当执行完以后，就会在demo1目录里看到很多文件了，这些文件都是默认的webpack模板文件，后面再详解：

5. 本地运行vue项目——上面的文件生成以后，我们需要看一下文件内是否存在node_modules这个文件夹，这个文件是项目安装的包的文件，没有此文件项目无法运行，如果没有的话，我们可以在终端工具中输入(终端工具路径需要在当前目录下)来下载安装需要的包：

npm install

下载完成以后就会出现node_modules文件夹了，有了node_modules文件后，我们在终端工具在输入命令：

npm run dev

命令执行完成后，会出现一个访问地址http://localhost:8080，我们把这个地址在浏览器中打开即可：

提示：node_modules文件是安装node后用来存放用包管理工具下载安装的包的文件夹，这个文件很大，如果我们需要将项目代码进行提交git或者svn或者拷贝给其他人的话，不需要上传和携带此文件，别人拿到项目文件后执行以下npm install 即可正常运行项目。

完！望客官给个赞~