构建托管于GitHub的Vue+Webpack的前端项目
最近更新时间：2017年5月16日15:15:49
《我的博客地图》
优秀的前端工程师，总会探索未知的东西，通过学习和实践感受从无到有的体验，今天分享的是一个前后端分离的前端项目，该项目托管于GitHub可进行多人协作开发，通过VueJs框架构建，并由Webpack包管理工具进行模块打包和管理。
1、GitHub创建项目
如果您没有GitHub账号，请先行注册账号，之后进入自己账号进行如下操作；
点击 New repository，创建新项目，在新页面进行相关配置操作；
项目创建成功，会生成项目地址，如：https://github.com/wanshaobo/vue-example.git
此时，已将创建好远程代码仓库；
2、clone远程仓库项目到本地
如果您没有安装git工具，请先行安装git工具，可以参考我的文章《Git和GItHub》；
进入到你需要存放项目的路径，右键 => Git Bash Here，在git命令行窗口执行命令：
$ git clone https://github.com/wanshaobo/vue-example.git
此时，你创建的远程代码仓库已经复制到了你的本地计算机，你不仅可以在这个目录下进行项目开发，同时还可以将本地项目整体托管到GitHub上进行同步，而且，你的这个项目也可以多人进行协同开发；
3、构建Vue+Webpack的前端项目
这个项目依托于前端的自动化工具，因此，安装相关软件可以参考我的文章《NodeJs安装+NPM配置》；
安装和配置好node和npm，开始构建整个项目，步骤如下：
进入本地项目路径，如 E:\project\vue-example，右键 => Git Bash Here；
安装vuejs脚手架，用于自动化搭建需要的模板框架；$ npm install vue-cli -g
安装过程中，需要手动配置一些项目基本信息，根据项目需要自行进行配置；
检测脚手架是否安装成功，键入命令 $ vue 出现相关信息，表示安装成功；
利用脚手架（vue-cli包）自动化构建项目，会自动化生成项目目录，见本文第四项；$ vue init webpack
（$ vue init webpack vue-example01；表示在当前目录下新建文件夹vue-example01，并将该项目放置在vue-example01文件夹下面）
将git命令行窗口切换并进入项目 根目录 ./vue-example下，安装整个项目所需依赖包；$ cnpm install
启动项目；$ npm run de
此时，在浏览器地址栏中可以打开该项目，展示的内容为：
E:\project\vue-example\src\components\Hello.vue；
项目地址为：http://localhost:8080/#/
4、项目文件目录系统详解
通过WebStorm开发软件打开该项目，文件目录系统如下：
build文件夹，包括Webpack的基本配置，开发环境配置，生产环境配置。并且最终发布（$ npm run build）的代码会在这里；
build.js,
check-versions.js,
dev-client.js,
dev-server.js,
utils.js,
vue.loader.conf.js,
webpack.base.conf.js,webpack基本配置文件
webpack.dev.conf.js,
webpack.prod.conf.js,
config文件夹，配置路径端口值
node_modules文件夹，存放依赖模块
src文件夹，开发目录，大多数开发工作是在这个文件夹下面进行的；存放 组件 和 文件
assets文件夹
components文件夹，存放项目组件
router文件夹
App.vue，项目入口文件
main.js，项目核心文件，全局配置；
static文件夹，静态资源文件，用来存放图片、字体等
.babelrc，babel配置文件
.editorconfig
.gitignore
.postcssrc.js
index.html，HTML模板，项目首页入口文件，build file will be auto injected，如果是移动端项目，需要在head标签中加入相关meta标签；
package.json，这个项目的整体配置文件
README.md，项目帮助文档，在创建GitHub远程仓库的时候，GitHub自动生成的文件；
5、Vue项目路由配置
未完待续...