2. 脚手架解构 | 网站搭建学习笔记

上一篇脚手架搭建 | 网站搭建学习笔记中通过yeoman和vue-cli搭建了一个脚手架，脚手架的好处是自动构建出了一套可以被直接使用的网站。从认识世界的顺序来说，看到一个东西，有了直观的印象后，就可以对这个东西进行逐步解析弄明白具体的原理了。（知其然——>知其所以然）

在上一篇中末尾我提了几个问题，经过一周的研究，发现提出的问题也是小白级别的，不过通过这几个问题，引申出了webpack和vue-router的使用，在这篇中进行整理。

index.html, main.js是在哪里指定的（webpack）

vue-router是怎么使用的，比如在App.vue中，只有一个<router-view/>的标签，怎么就引入了后续的页面，如果有多个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

> first@1.0.0 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搭建的脚手架的结构

页面基本逻辑关系图

基本使用方法

路由器的展示位置<router-view/>在app.vue中进行了指定，就是放在那张大V图的下面。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

页面的结构其实也很简单，继续引用浅入浅出中的图片：

默认使用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
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="firstpage">Firstpage</a></li>
    </ul>
  </div>
</template>

# firstpage.vue
<template>
  <div class="hello">
    <h2>test</h2>
    <ul>
      <li><a href="/">HelloWorld  </a></li>
    </ul>
  </div>
</template>

就完成了一个简单的页面跳转功能

首页

跳转页面

这就是vue-router的最简单的用法。

单页面多路由

进一步如果我在一个页面中有多个路由区域该怎么设置呢？比如最常见的页面左侧导航栏和页面上方菜单栏。可以在App.vue中配置两个<router-view>区域：

#App.vue
<router-view/>
<router-view name="left"></router-view>
<router-view name="right"></router-view>

#对应的router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import First1 from '@/components/first1'
import First2 from '@/components/first2'
 
Vue.use(Router)
 
export default new Router ({
 routes : [
  {
   path : '/',
   name : 'Hello',
   components : {
    default : Hello,
    left : First1,
    right : First2
   }
  }
 ]
})

默认显示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：升学篇