vue环境搭建与简单项目构建

vue环境搭建与简单项目构建

一、环境搭建

1、下载并安装node.js
首先到node.js官网下载http://nodejs.cn/下载安装包,
安装完成后打开命令行输入node -v,如下图则说明安装成功.

2、安装NPM
新版的Node.js已经集成了NPM,所以无需另外安装,使用npm -v测试是否已经安装.

3、安装cnpm
由于npm是下载的国外资源,速度慢而且安装依赖包经常失败,所以需要重新安装npm的国内淘宝镜像cnpm,用cnpm代替npm,依赖全 速度快

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

4、安装webpack

cnpm install webpack -g

5.安装Vue脚手架Vue-cli

cnpm install vue-cli -g

6、测试vue是否已安装成功

vue -V

二、 构建项目

1.在本地系统盘创建一个目录F:\TEST\font,在命令行模式下进入到此目录（cd 命令）,使用命令来创建项目模板

vue init webpack myfront

创建过程大致如下

2.安装项目依赖

cnpm install

执行此命令之后,就安装完所有的项目依赖了,在项目目录中会生成一个node_modules文件夹

3.安装vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

4.安装jQuery

cnpm install jquery --save

5.启动项目

npm run dev

6.打包项目

npm run build

项目下会生成一个dist文件夹
7.打开浏览器输入http://localhost:8080/

到目前为止，你就可以愉快的使用vue了。