一、初始化项目
1. vue-cli
vue-cli 是 vue.js 的脚手架工具，可以帮助我们编写基础代码、快速搭建开发环境。
使用 vue-cli 工具之前，首先安装 node 和 npm 包管理工具。
2. 初始化项目步骤
2.1 全局安装 vue-cli 工具
npm install -g vue-cli
2.2 使用命令搭建项目
vue init <模板名称> <项目名称>
2.3 下载依赖
npm install
2.4 运行开发测试服务器，浏览器自动打开地址 http://localhost:8080/
npm run dev
2.5 注意：
从淘宝镜像下载，可提高安装速度，运行如下命令：
npm config set registry https://registry.npm.taobao.org/
想要恢复原样，只需运行如下命令：
npm config delete registry
2.6 例子：基于 webpack 模板，创建 first-test-vue 项目
$ npm install -g vue-cli // 全局安装 vue-cli
$ vue init webpack first-test-vue // 初始化命令
? Project name first-test-vue // 项目名称
? Project description A Vue.js project // 项目描述
? Author NathanYang // 作者
? Vue build standalone // 独立构建
? Install vue-router? Yes // 安装路由
? Use ESLint to lint your code? Yes // 安装 ESLint 代码检测工具
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? No // 端到端测试
vue-cli · Generated "first-test-vue".
To get started:
cd first-test-vue // cd 进入 first-test-vue 项目
npm install // 安装依赖
npm run dev // 开始运行：webpack 持续运行
Documentation can be found at https://vuejs-templates.github.io/webpack
二、目录结构
first-test-vue
├── build # 存放构建脚本，例如 webpack 配置文件
├── config # 存放配置信息
├── node_modules # 依赖
├── src # 除首页外，其他源代码
├── assets # 存放代码之外的资源，例如图片、字体等
├── components # 存放主组件之外的组件，vue 组件的后缀都是 .vue
├── router # 路由
├── App.vue # 主组件
└── main.js # JS 入口文件
├── static # 存放静态资源
└── test # 单元测试代码
├── .babelrc # babel 配置文件
├── .editorconfig
├── .eslintignore
├── .eslintrc # ESLint 配置文件
├── .gitignore
├── .postcssrc
├── index.html # 首页
├── package.json
└── README.md
三、生成预览链接
3.1 首先，找到 config/index.js 中的 assetsPublicPath
并将其改为： assetsPublicPath: '/<github 项目名称>/dist'
例如本项目： assetsPublicPath: '/first-test-vue/dist'
3.2 其次，运行命令 npm run build
运行命令 npm run build 后，项目中会自动生成一个 dist 目录
dist 目录下的 index.html 需 http 协议 才可预览到页面内容，否则空白一片
3.3 最后，使用 git pages 预览
打开 .gitignore 文件，删除 dist/ 该行，因为需要提交该目录到 github，然后 push 代码
在 github 上开启该项目的 git pages 预览功能
项目 first-test-vue 实际预览链接：https://NathanYangcn.github.io/first-test-vue/dist/
