Web项目框架搭建【四】—— 前端vue.js框架搭建

vue.js框架搭建具体步骤如下：

1.安装node 
到官网下载安装。 
（中）https://nodejs.org/zh-cn/ 
（英）https://nodejs.org/en/

2.安装cnpm镜像 
（node自带安装了npm，故不再安装）

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

• 1

安装模块时安装方法

$ cnpm install [name]

• 1

3.安装Vue2.0

$ cnpm install vue

• 1

4.安装vue-cli 脚手架工具

$ cnpm install --global vue-cli

• 1

5.在某个目录下，创建一个基于 webpack 模板的新项目

$ vue init webpack my-project
//my-project是你的项目名

• 1
• 2

创建webpack模板项目时，如果你对ES6和ESLint不是很熟的话不建议你应用它，因为要求比较严格，所以一不小心就报错，导致整个项目运行不起来，对于初学很痛苦。 

6.安装依赖

$ cd my-project        //到项目目录下
$ cnpm install     //安装依赖

• 1
• 2

7.运行新创建的vue项目

$ npm run dev

• 1

运行之后会看到vue的初始页面效果，如下图，说明你就成功搭建了一个vue项目。（下面框出来的是官方提供的插件和awesome，很实用） 

8. 搭建完成之后的项目结构图如下：