如何搭建一个vue项目(完整步骤)
一、安装node环境（vued的环境依赖）:
1、第一步：node.js安装:
简单来说，node是一个运行环境，是vue的运行环境，vue的运行是要依赖于node的npm的管理工具来实现。所以搭建项目前一定要先安装node.js。
node.js安装步骤详解：
2、第二步：安装npm
npm相当于一个仓库库。npm是前端依赖包管理器，它类似maven，帮助下载和管理前端的包，这个下载源是外国服务器，如果想提高下载速度的话，建议更换成淘宝镜像，类似maven之于阿里云镜像。
npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。
3、第三步：安装cnpm：
到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm。
我们这里为了提高效率，可以使用淘宝的镜像：http://npm.taobao.org/
输入命令：
npm install -g cnpm –registry=https://registry.npm.taobao.org即可安装npm镜像，没报错表示安装成功，完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。
二、搭建vue项目环境：
1、第一步：全局安装vue-cli 脚手架构建工具
vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。
安装命令：
npm install --global vue-cli
验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；
2、第二步：进入你的项目目录，创建一个基于 webpack 模板的新项目
搭建完手脚架之后，我们要开始建一个新项目，这个时候我建议，尽量不要装在C盘，因为vue下载下来的文件比较大。
首先我们进入自己工作空间目录下：D:\workspace\vuework，然后我们开始创建新的项目输入命令：vue init webpack my-project 回车，my-project 是我自己的文件夹的名字，是基于webpack的项目，输入之后就一直回车，直到出现是否要安装vue-router。
下面会出现是否需要js语法检测，这个我们暂时用不到，就可以直接输入no，后面的都可以直接输入no，都是我们暂时用不到的：
说明：
- Vue build : 打包方式，回车即可；
- Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
- Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
- Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
- Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
3、第三步：安装依赖
文件夹已经下载好了，现在就可以进入文件夹，输入： cd my-project 回车，因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，
输入命令：cnpm i
安装成功后，项目文件夹中会多出一个目录： node_modules
4、第四步：启动项目
启动项目命令：npm run dev
项目启动成功：
三、目录讲解
1、build：构建脚本目录：
- build.js ==> 生产环境构建脚本；
- check-versions.js ==> 检查npm，node.js版本；
- utils.js ==> 构建相关工具方法；
- vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
- webpack.base.conf.js ==> webpack基本配置；
- webpack.dev.conf.js ==> webpack开发环境配置；
- webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置目录：
- dev.env.js ==> 开发环境变量；
- index.js ==> 项目配置文件；
- prod.env.js ==> 生产环境变量；
3、node_modules：
- npm 加载的项目依赖模块
4、src目录：
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
- assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
- components：组件目录，我们写的组件就放在这个目录里面；
- router：前端路由，我们需要配置的路由路径写在index.js里面；
- App.vue：根组件；
- main.js：入口js文件；
5、static目录：
- 静态资源目录，如图片、字体等。不会被webpack构建。
6、index.html：
- 首页入口文件，可以添加一些 meta 信息等。
7、package.json：
- npm包配置文件，定义了项目的npm脚本，依赖包等信息。
8、README.md：
- 项目的说明文档，markdown 格式。
9、.xxxx文件：
- 这些是一些配置文件，包括语法配置，git配置等。
致此，vue项目搭建完成！！！
