一、初始化项目

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/