搭建vue项目环境

前言

在开发本项目之前，我对vue，react，angular等框架了解，仅限于知道它们是什么框架，他们的核心是什么，但是并没有实际使用过（angular 1.0版本用过，因为太难用，所以对这类框架都有点阴影...）。

这是我第一次使用vue开发项目，在项目开始前1周，我才开始看vue的官方文档。我在安装vue.js并搭建vue项目的过程中遇到了各种各样的问题，并通过百度mother找到了许多不同的解决方法。

当时看了众多的博文，感觉写的并不详细，有些还有点乱，所以想写一个比较完善的博文，既作为项目经验的总结，也希望能帮助刚入vue的小伙伴。

安装node环境

关于如何安装node环境，请查看 windows系统下安装 node.js (node.js安装及环境配置)

安装webpack

打开命令行工具
npm install webpack -g（-g表示全局安装）

检查是否安装成功：
webpack -h/v

安装成功会出现版本信息，如下图所示

安装vue-cli 脚手架构建工具

打开命令行工具
npm install vue-cli -g（-g表示全局安装）

检查是否安装成功：
vue -V

安装成功会出现版本信息，如下图所示

构建项目

在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径 ②如果以安装git的，在相关目录右键选择Git Bash Here

安装vue脚手架输入：
vue init webpack myProject

注意这里的“myProject” 是项目的名称（可以随便起名字，但是不能是中文）。

vue init webpack myProject ---------------- 这个是那个安装vue脚手架的命令 ? Project name (myProject) ---------------- 项目名称 ? Project description (A Vue.js project) ----------------项目描述 ? Author authorName ---------------- 项目创建者 ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? (Y/n) y ---------------- 是否安装Vue路由，也就是以后是spa（单页面应用需要的模块，要用输入y，不用输入n，可以在用的时候再安装） ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) n ---------------- 是否启用eslint检测规则（eslint是一个代码语法规范检查的工具，选择no就不会把语法规范功能加进webpack编译的流程里。建议选no） ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? (Y/n) ---------------- 是否启用单元测试（可加可不加） ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? (Y/n) y ---------------- 是否启用单元测试 ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "myProject". To get started: ---------------- 这里说明如何启动这个服务 cd exprice ---------------- 进入项目文件夹 npm install ---------------- 下载依赖 npm run dev ---------------- 启动项目

进入项目文件夹
cd myProject

安装项目依赖：
npm install

因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。

如果安装依赖时间太长或者安装依赖总是失败的话，建议使用淘宝镜像安装。

安装淘宝镜像
npm install -g cnpm --registry="https://registry.npm.taobao.org"

安装好淘宝镜像后就可以使用cnpm代替npm（据说淘宝镜像会缺失一些依赖库，可以先用淘宝下载依赖，如果下载完有缺失库的话，再用npm下载缺失的库就行了）

以下是安装完依赖后的截图：

安装项目需要的依赖

npm install --save-dev normalize.css npm install --save-dev element-ui -S 安装element-UI，实际这样安装的element-ui并不是最新版本，有很多属性无法使用 npm install --save-dev 依赖包@版本号安装指定版本的依赖包

启动项目(这是第5步，不知道为啥变成了1...)
npm run dev

打包项目(这是第6步.)
npm run build

项目目录文件说明

├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面 │ ├── build.js 生产环境构建脚本 │ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新 │ ├── dev-server.js 运行本地开发服务器 │ ├── utils.js 构建相关工具方法 │ ├── webpack.base.conf.js wabpack基础配置 │ ├── webpack.dev.conf.js wabpack开发环境配置 │ └── webpack.prod.conf.js wabpack生产环境配置 ├── config 项目配置 │ ├── dev.env.js 开发环境变量 │ ├── index.js 项目配置文件 │ ├── prod.env.js 生产环境变量 │ └── test.env.js 测试环境变量(启用单元测试才有该文件) ├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息 ├── src 项目源码目录 │ ├── main.js 入口js文件 │ ├── app.vue 根组件 │ ├── components 公共组件目录 │ │ └── helloWorld.vue │ ├── assets 资源目录，这里的资源会被wabpack构建 │ │ └── logo.png │ ├── routes 前端路由 │ │ └── index.js │ ├── store 应用级数据（state） │ │ └── index.js │ └── views 页面目录 │ ├── hello.vue │ └── notfound.vue ├── static 纯静态资源，不会被wabpack构建。 └── test 测试文件目录（unit&e2e,启用单元测试才有该文件） └── unit 单元测试 ├── index.js 入口脚本 ├── karma.conf.js karma配置文件 └── specs 单测case目录 └── Hello.spec.js