vue2 项目搭建

vue2.0 推荐开发环境

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2

1、安装nodeJs

地址：下载 | Node.js 中文网

2、设置global和cache路径，设置路径能够把通过npm安装的模块集中在一起，便于管理。

（1）在nodejs的安装目录下，新建node_global和node_cache两个文件夹，如安装目录为“D:\nodejs\”

windows

md node_global
md node_cache

mac

mkdir node_global
mkdir node_cache

（2）用命令npm config set prefix "D:\nodejs\node_global"和npm config set cache "D:\nodejs\node_cache"设置global和cache，设置成功后，后续用命令npm install -g XXX安装，模块就在D:\nodejs\node_global\node_modules里。

npm config set perfix "node_global路径"
npm config set cache "node_cache路径"

3、设置环境变量

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。

（1）修改用户变量PATH：把"D:\nodejs\node_global"加到后面。

（2）新增系统变量NODE_PATH：设置成“D:\nodejs\node_global\node_modules”。

4、安装cnpm

说明：由于许多npm包都在国外，用淘宝的镜像服务器，对依赖的module进行安装。

参考网址为：npmmirror 镜像站

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

5、安装webpack

cnpm install webpack -g

6、安装vue 脚手架

npm install vue-cli -g

项目搭建

1、创建一个放工程目录的

windows

md xxxx
cd xxxx

mac

mkdir xxxx
cd xxx

工程创建 

vue init webpack-simple 工程名称<不能用中文>
或者创建vue1.0项目
vue init webpack-simple#1.0 工程名称<不能中文>

会有一些初始化设置，输入如下 直接回车默认（然后会下载vue2.0模板）
Target directory exists. Continue? (Y/n)
Project name (vue-test)
Project description (A Vue.js project)
Author xxx

2、根据模板创建项目

（1）cd命令进入将要新建工程的目录，如“E:\nodejs”

用命令"vue init webpack mytest"创建一个基于 webpack 模板的新项目，工程名为"mytest"。

vue init webpack xxxx

（2）cd命令进入mytest目录

（3）安装该工程依赖的模块

用命令"cnpm install”安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules.

一定要从官方仓库安装，npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

（4）安装vue路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save
或者
npm install vue-router vue-resource --save

（5）运行项目

用命令“cnpm run dev”测试该项目是否能够正常工作，用nodejs来启动。

cnpm run dev
或者
npm run dev

学习地址：

1.浅谈windows下搭建Vue.js开发环境-CSDN博客

2.Vue2.0 新手完全填坑攻略——从环境搭建到发布 - 简书