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项目搭建成功。