1.安装node
node.js环境（npm包管理器）
cnpm npm的淘宝镜像
从node.js官网下载并安装node，安装过程一直点击“下一步”就可。
安装完成之后，window+r，输入cmd，打开命令行工具，输入 node -v，如果出现相应的版本号，则说明安装成功。
npm包管理器，是集成在node中的，所以，直接输入 npm -v就会显示出npm的版本信息。
2、安装cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org
3、安装webpack
npm install webpack -g//配置全局的webpack
4、安装Vue
cnpm install vue
5.安装vue-cli 脚手架工具
npm install vue-cli -g
-g表示全局安装。安装完成可以用vue -V （注意V是大写）来查vue-cli的版本号，如果出现相应的版本号，则说明安装成功
6.初始化项目--创建一个基于 webpack 模板的新项目
vue init webpack my-project
//$ vue init 模板名称 项目名称。
init：表示我们要用vue-cli来初始化项目
vue-cli官方提供了五种模板如下：（一般我们在实际开发中都会使用webpack模板）
webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
simple-一个最简单的单页应用模板。
7.创建项目的询问，安装依赖
输入初始化命令后，程序会询问我们几个简单选项，根据自己的需求进行选择就行，
不应用ESLint
创建webpack模板项目时，ES6和ESLint 要求比较严格，一不小心就报错，导致整个项目运行不起来，对于初学很痛苦，不熟悉的不建议安装。
1、cd my-project 进入我们的vue项目目录。
2、npm install 安装我们的项目依赖包，也就是安装package.json里的包，用cnpm要快些。
3、npm run dev 开发模式下运行我们的程序。
8.运行新创建的vue项目
npm run dev
ps:运行项目的时候一定要到文件的根目录下在运行项目，不然有可能会报错误，例如：
运行之后会看到vue的初始页面效果，一个vue项目搭建成功。
网友评论