2. 腳手架解構(gòu) | 網(wǎng)站搭建學(xué)習(xí)筆記

上一篇 腳手架搭建 | 網(wǎng)站搭建學(xué)習(xí)筆記 中通過(guò)yeoman和vue-cli搭建了一個(gè)腳手架，腳手架的好處是自動(dòng)構(gòu)建出了一套可以被直接使用的網(wǎng)站。從認(rèn)識(shí)世界的順序來(lái)說(shuō)，看到一個(gè)東西，有了直觀的印象后，就可以對(duì)這個(gè)東西進(jìn)行逐步解析弄明白具體的原理了。（知其然——>知其所以然）

在上一篇中末尾我提了幾個(gè)問(wèn)題，經(jīng)過(guò)一周的研究，發(fā)現(xiàn)提出的問(wèn)題也是小白級(jí)別的，不過(guò)通過(guò)這幾個(gè)問(wèn)題，引申出了webpack和vue-router的使用，在這篇中進(jìn)行整理。

  1. index.html, main.js是在哪里指定的（webpack）
  2. vue-router是怎么使用的，比如在App.vue中，只有一個(gè)<router-view/>的標(biāo)簽，怎么就引入了后續(xù)的頁(yè)面，如果有多個(gè)router，該怎么設(shè)置？
  3. index.js和HelloWorld.vue是一對(duì)，main.js和App.vue是一對(duì)，那是否都需要這樣一對(duì)一的關(guān)系呢？vue組件的模式是怎樣的。是否有模式化的寫(xiě)法。

1. 入口的設(shè)置：webpack初涉

簡(jiǎn)書(shū)是個(gè)好地方，webpack的文章一搜一大把，還多是面向新手的。其中我覺(jué)得說(shuō)的最清晰的是這篇 入門(mén)Webpack，看這篇就夠了 。整理如下：

什么是webpack

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。

Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過(guò)一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開(kāi)始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)（或多個(gè)）瀏覽器可識(shí)別的JavaScript文件。

入口文件及基礎(chǔ)配置

根據(jù)資料中的描述，package.json是webpack的配置文件，在該配置文件中，設(shè)置了使用npm run dev是網(wǎng)站的啟動(dòng)方法。

  "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，果然啟動(dòng)后發(fā)現(xiàn)命令行里有如下的回顯，也就是執(zhí)行webpack-dev-server --inline --progress --config build/webpack.dev.conf.js命令來(lái)啟動(dòng)網(wǎng)站。

$ 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，順藤摸瓜可以發(fā)現(xiàn)這個(gè)配置文件merge了build/webpack.base.conf.js這個(gè)配置文件，配置了諸如host，port之類的基本信息，也指明了入口文件是main.js：

#webpack.base.conf.js
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
……
}

對(duì)于index.html，并不是我一開(kāi)始想象的那樣出生自帶，而是通過(guò)一個(gè)名為HtmlWebpackPlugin的webpack插件自動(dòng)生成的。在weback.dev.conf.js中進(jìn)行了引用：

  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  設(shè)置首頁(yè)
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
  ]

值得一提的是這個(gè)配置文件中還有個(gè)熱加載插件HotModuleReplacementPlugin，用于在每次修改文件后不需要重啟站點(diǎn)，而是可以直接在站點(diǎn)上看到。

至此我初步明白了入口和一些基本配置的設(shè)置，其實(shí)這些配置放著不動(dòng)就行，需要時(shí)再查查資料就行。下一步看看問(wèn)題2吧，如何在單頁(yè)應(yīng)用中通過(guò)路由展示不同內(nèi)容？

2. vue-router的使用

還是老規(guī)矩，先上參考資料：

  1. 包學(xué)會(huì)之淺入淺出Vue.js：開(kāi)學(xué)篇 面向新手超級(jí)有用的教程，看完覺(jué)得我都不用寫(xiě)這個(gè)筆記了。
  2. vue-router官方文檔 vue的中文文檔真的做的太好了

在淺入淺出Vue.js中，給出了一張圖，相當(dāng)清晰地展示了vue-cli搭建的腳手架的結(jié)構(gòu)


頁(yè)面基本邏輯關(guān)系圖

基本使用方法

路由器的展示位置<router-view/>在app.vue中進(jìn)行了指定，就是放在那張大V圖的下面。

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

頁(yè)面的結(jié)構(gòu)其實(shí)也很簡(jiǎn)單，繼續(xù)引用淺入淺出中的圖片：


默認(rèn)使用http://localhost:8080/訪問(wèn)的第一個(gè)頁(yè)面是在/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',     // 用于去掉訪問(wèn)頁(yè)面自動(dòng)添加的"#"號(hào)
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
    {path: '/HelloWorld', redirect: HelloWorld}
  ]
})

一眼就可以看明白component中的HelloWorld就是在上面引入的/components/HelloWorld。所以我做了個(gè)小實(shí)驗(yàn)，將HelloWorld修改了一下，并加了一個(gè)新的頁(yè)面firstpage，兩個(gè)頁(yè)面互相指向，并在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>

就完成了一個(gè)簡(jiǎn)單的頁(yè)面跳轉(zhuǎn)功能


首頁(yè)

跳轉(zhuǎn)頁(yè)面

這就是vue-router的最簡(jiǎn)單的用法。

單頁(yè)面多路由

進(jìn)一步如果我在一個(gè)頁(yè)面中有多個(gè)路由區(qū)域該怎么設(shè)置呢？比如最常見(jiàn)的頁(yè)面左側(cè)導(dǎo)航欄和頁(yè)面上方菜單欄?？梢栽贏pp.vue中配置兩個(gè)<router-view>區(qū)域：

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

#對(duì)應(yīng)的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
   }
  }
 ]
})

默認(rèn)顯示Hello，左側(cè)顯示First1，右側(cè)顯示First2。

3. 小結(jié)

第三個(gè)問(wèn)題：index.js和HelloWorld.vue是一對(duì)，main.js和App.vue是一對(duì)，那是否都需要這樣一對(duì)一的關(guān)系呢？vue組件的模式是怎樣的。是否有模式化的寫(xiě)法。

其實(shí)是我理解的錯(cuò)誤，index.js是vue-router路由的入口，HelloWorld.vue需要在index.js中指定，并不是一對(duì)。main.js是網(wǎng)站的入口，指定了引用App.vue插入index.html作為最外層的包裹頁(yè)面。這兩個(gè)也不是一對(duì)。
vue組件的模式可以進(jìn)行多層細(xì)分，我理解凡是需要?jiǎng)討B(tài)顯示的或者可能被復(fù)用的模塊都可以寫(xiě)成一個(gè)components，比如一個(gè)按鈕，比如一個(gè)需要在多處展示的表格。

至此基本了解了vue-cli所構(gòu)建出的網(wǎng)站的結(jié)構(gòu)，下一次的筆記中我嘗試設(shè)計(jì)一個(gè)ActiveMQ的信息展示頁(yè)面。
也是參考淺入淺出的升學(xué)篇，仍然強(qiáng)烈推薦：包學(xué)會(huì)之淺入淺出Vue.js：升學(xué)篇

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容