上一篇 脚手架搭建 | 网站搭建学习笔记 中通过yeoman和vue-cli搭建了一个脚手架，脚手架的好处是自动构建出了一套可以被直接使用的网站。从认识世界的顺序来说，看到一个东西，有了直观的印象后，就可以对这个东西进行逐步解析弄明白具体的原理了。（知其然——>知其所以然）
在上一篇中末尾我提了几个问题，经过一周的研究，发现提出的问题也是小白级别的，不过通过这几个问题，引申出了webpack和vue-router的使用，在这篇中进行整理。
- index.html, main.js是在哪里指定的（webpack）
- vue-router是怎么使用的，比如在App.vue中，只有一个
的标签，怎么就引入了后续的页面，如果有多个router，该怎么设置？ - index.js和HelloWorld.vue是一对，main.js和App.vue是一对，那是否都需要这样一对一的关系呢？vue组件的模式是怎样的。是否有模式化的写法。
1. 入口的设置：webpack初涉
是个好地方，webpack的文章一搜一大把，还多是面向新手的。其中我觉得说的最清晰的是这篇 入门Webpack，看这篇就够了 。整理如下：
什么是webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
入口文件及基础配置
根据资料中的描述，package.json是webpack的配置文件，在该配置文件中，设置了使用npm run dev是网站的启动方法。
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit/specs",
"build": "node build/build.js"
},
重新跑一下npm run dev，果然启动后发现命令行里有如下的回显，也就是执行webpack-dev-server --inline --progress --config build/webpack.dev.conf.js命令来启动网站。
$ npm run dev
> [email protected] dev /Users/vue/Learning/first
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
命令中指定的配置文件是build/webpack.dev.conf.js，顺藤摸瓜可以发现这个配置文件merge了build/webpack.base.conf.js这个配置文件，配置了诸如host，port之类的基本信息，也指明了入口文件是main.js：
#webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
……
}
对于index.html，并不是我一开始想象的那样出生自带，而是通过一个名为HtmlWebpackPlugin的webpack插件自动生成的。在weback.dev.conf.js中进行了引用：
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(), // 热加载插件
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin 设置首页
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
]
值得一提的是这个配置文件中还有个热加载插件HotModuleReplacementPlugin，用于在每次修改文件后不需要重启站点，而是可以直接在站点上看到。
至此我初步明白了入口和一些基本配置的设置，其实这些配置放着不动就行，需要时再查查资料就行。下一步看看问题2吧，如何在单页应用中通过路由展示不同内容？
2. vue-router的使用
还是老规矩，先上参考资料：
- 包学会之浅入浅出Vue.js：开学篇 面向新手超级有用的教程，看完觉得我都不用写这个笔记了。
- vue-router官方文档 vue的中文文档真的做的太好了
在浅入浅出Vue.js中，给出了一张图，相当清晰地展示了vue-cli搭建的脚手架的结构
基本使用方法
路由器的展示位置
页面的结构其实也很简单，继续引用浅入浅出中的图片：
默认使用http://localhost:8080/访问的第一个页面是在/router/index.js中指定的
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
Vue.use(Router)
export default new Router({
mode: 'history', // 用于去掉访问页面自动添加的"#"号
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
{path: '/HelloWorld', redirect: HelloWorld}
]
})
一眼就可以看明白component中的HelloWorld就是在上面引入的/components/HelloWorld。所以我做了个小实验，将HelloWorld修改了一下，并加了一个新的页面firstpage，两个页面互相指向，并在index.js中修改了一下配置：
# index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import Firstpage from '../components/myfirstpage'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/firstpage',
name: 'firstpage',
component: Firstpage
},
{path: '/HelloWorld', redirect: HelloWorld}
]
})
#HelloWorld.vue
# firstpage.vue
test
就完成了一个简单的页面跳转功能
这就是vue-router的最简单的用法。
单页面多路由
进一步如果我在一个页面中有多个路由区域该怎么设置呢？比如最常见的页面左侧导航栏和页面上方菜单栏。可以在App.vue中配置两个
#App.vue
默认显示Hello，左侧显示First1，右侧显示First2。
3. 小结
第三个问题：index.js和HelloWorld.vue是一对，main.js和App.vue是一对，那是否都需要这样一对一的关系呢？vue组件的模式是怎样的。是否有模式化的写法。
其实是我理解的错误，index.js是vue-router路由的入口，HelloWorld.vue需要在index.js中指定，并不是一对。main.js是网站的入口，指定了引用App.vue插入index.html作为最外层的包裹页面。这两个也不是一对。
vue组件的模式可以进行多层细分，我理解凡是需要动态显示的或者可能被复用的模块都可以写成一个components，比如一个按钮，比如一个需要在多处展示的表格。
至此基本了解了vue-cli所构建出的网站的结构，下一次的笔记中我尝试设计一个ActiveMQ的信息展示页面。
也是参考浅入浅出的升学篇，仍然强烈推荐：包学会之浅入浅出Vue.js：升学篇