Vue2.0 搭建Vue脚手架（vue-cli）搭建项目

 

1.首先，打开命令行工具（win+r，然后输入cmd），

• 
• 
• 

2.输入node -v,若出现相应版本号表示已经安装过了；若没有则安装node.js,从node.js官网下载并安装node,安装过程很简单，一直“下一步”即可。注意：在官网下载安装node.js后，就已经自带npm （包管理工具）了，另需注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。

3.然后，安装淘宝镜像，打开命令行工具，输入  npm install -g cnpm --registry= https://registry.npm.taobao.org  ，按回车就会自动安装。安装淘宝镜像的原因是：我们用的npm的服务器在国外，有时候我们安装依赖的话会很慢很慢，所以就用这个cnpm来安装我们需要的依赖。安装完成后输入 cnpm -v,若出现相应的版本号则表示安装成功。

• 

4.接下来安装Vue脚手架：

全局安装vue-cli，也就是所谓的脚手架。

1.    用npm安装（国际开源库生态系统）                                                                                                                                             

   npm install -g vue-cli

2.     用cnpm安装（使用国内镜像安装）

   cnpm install -g vue-cli

   

3. 然后在命令行输入vue -V,若出现相应的版本号则安装成功。

5.准备工作已经完毕，下面直接使用vue-cli初始化webpack项目，：

在命令框内输入vue，可以看到命令描述：

输入vue list 查看可安装的vue模板，

输入如下，搭建项目：

vue init webpack myproject(你的项目名称)

中间会输入项目名称，项目描述，作者等信息，一路回车，可以看到我们刚才创建的webpack项目已经建好了，

6.查看目录结构：

cd myproject

需要注意的是项目的名称不能大写，不然会报错：

Project name (my-project) # 项目名称（我的项目）

Project description (A Vue.js project) # 项目描述一个Vue.js 项目

Author 作者（你的名字）

Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）

Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）

Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）

当然这些都看你自己个人的情况，我这里是全选了是。

7.安装依赖：

刚初始化的项目是没有依赖的，如果运行回报类似的错误，

所以在这之前要解决项目的依赖问题，使用下面的命令安装项目的依赖：

npm install

国内有些包npm无法安装，可以使用cnpm进行安装。

8.启动本地开发：

npm run dev

 

本地node服务器已经跑起来了，端口为配置文件中的端口。

9.打包上线：

npm run build

看到build complete 证明打包成功。

观察目录结构，发现多了一个dist文件夹，这便是webpack打包之后的文件，将该文件和后台商量，以什么形式放到服务器上即可，上线成功。

番外：

上面脚手架给我们把常用的插件下载并配置起来，比方说路由，以及ES6转成ES5的插件。在做项目的过程我们常常用到数据的传输和各个组件的管理，所以接下来还需安装一些插件：

安装vue-resource是用于ajax请求的vue插件，用来和服务器端进行数据通信：

npm install vue-resource --save

安装vuex是用于管理每个组件之间的状态值的改变：

npm install vuex --save

另外，如果浏览器页面打不开或者是没有加载页面，有可能是本地8080端口被占用，又或者是你关闭了这个窗口。

解决办法：

针对第一种情况，修改配置文件就好了，打开项目找到 config/index.js  

建议将端口号改为不常用的端口。

针对第二种情况，重新启动一下JavaScript的运行环境就好。