使用vue-cli脚手架搭建项目

目前很多网站都在使用vue技术来开发，那么问题就来了，怎么用vue搭建项目呢？

这里我向大家介绍怎么使用脚手架搭建项目。

1、首先做好预备工作。

1>安装node.js 。

因为我们这边会用到一个命令npm ，它是node自带的包管理工具，所以需要先安装node.js.下载网址：https://nodejs.org/en/，大家也可以自己百度搜索，建议安装LTS稳定版的，current是最新版，可能不太稳定。安装完成后在“开始”输入栏输入cmd或win+R，打开cmd命令面板，输入node -v查看安装node版本，有版本号证明安装成功，输入命令where node ，查看node安装的路径，输入npm -v ，同样出现版本号，证明node.js自带的npm存在。

2>安装cnpm（可选择性安装）。

 1、由于直接使用npm install 安装第三方包是去国外网站上下载，有可能会被墙而安装失败，所以我们要将下载源切换到国内淘宝上因此需要利用 npm install nrm -g安装一个全局的nrm 2、安装好nrm以后，在cmd命令面板中输入： nrm use taobao 将下载源切换到淘宝，可以使用 nrm ls 查看当前使用的下载源 3、也可安装淘宝提供的类似于npm的工具 cnpm来替代npm安装node包,安装包命令和npm一样，安装cnpm命令： npm install cnpm -g

3>安装webpack资源打包工具。

webpack是一个资源的打包工具，分为1.0和2.0版本，可以将 .js, .css , image等静态资源当做一个模块来进行打包，那么每一种模块都是有一个对应的 loader来实现
webpack 1.0版本官网：https://webpack.github.io/docs/usage.html
webpack 2.0版本官网：https://webpack.js.org/
在这里我们使用webpack 1.14.0

• 安装webpack步骤：  第一种安装方式：    在cmd命令行面板中 执行： npm install webpack@1.14.0 -g 将webpack1.14.0版本安装为全局就能够在cmd命令行面板中使用webpack指令了   第二种安装方式：    在cmd命令行面板中 执行： cnpm install webpack@1.14.0 -g 将webpack1.14.0版本安装为全局就能够在cmd命令行面板中使用webpack指令了

2、安装vue-cli

3、新建一个文件夹，用来存放你的项目，然后打开这个文件夹，按住“shift”键，然后鼠标右键，点击”在此处打开命令窗口” 1、在cmd命令面板输入npm install vue-cli -g

注：-g表示全局安装，然后同样检查是否安装成功，输入命令 ： vue -V ，注意这里的V是大写的。

4、新建一个文件夹，用来存放你的项目，然后打开这个文件夹，按住“shift”键，然后鼠标右键，点击”在此处打开命令窗口”，输入命令 vue init webpack myproject

5、输入命令 npm install

6、编译。输入命令 npm start 或者命令 npm run dev

希望本文对您有所帮助，有好的意见欢迎探讨！