webpack+vue2.0項目（二）熱加載，vue-router

時間 2019-11-17

標籤 webpack+vue2.0 webpack vue 項目加載 router 简体版

原文原文鏈接

目錄建立好以後，命令行輸入css

npm run dev

由於在配置文件config/index.js裏：html

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

webpack會默認建立本地服務器監聽8080端口，autoOpenBrowser爲true，瀏覽器會自動打開，我通常會關掉，由於之後調試會運行不少次 npm run dev；vue

而後打開webpack

下面看下幾個主要的文件：git

index.htmlgithub

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index裏面只有一個id爲app的div，由於webpack會自動將js，css添加進去；web

main.jsvue-router

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

這個文件，首先將vue，App（引入的component），router（配置路由）；npm

建立Vue實例而後將App組件以<App><App/>的方式放入index裏id爲app的元素裏；瀏覽器

而後是App.vue

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

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

對vue組件不熟的能夠去看官方文檔，真的很詳細；

在template中引入了 <router-view></router-view> 這表明路由，咱們能夠看下路由的配置；

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

這個官方文檔講得也很清楚，path寫的是路徑，這個文件的意思是當路徑是"/"(即當前頁面)時，引入組件Hello.vue;

對應App.vue就是打開首頁的同時要引入Hello.vue；

固然在真正的項目中會有多個路由，只要在routes中多加介個配置就好了；

下面是我在項目中的router.js文件，注：引入組件文件的時候，必定要註冊組件

import Vue from 'vue'
import Router from 'vue-router'
import goods from '../components/goods/goods'
import seller from '../components/seller/seller'
import ratings from '../components/ratings/ratings'

Vue.use(Router)

export default new Router({
  linkActiveClass:'active',
  routes: [
    {
      path: '/goods',
      component: goods
    },
     {
      path: '/seller',
      component: seller
    },
     {
      path: '/ratings',
      component: ratings
    },
    {
      path: '/',
      component: goods
    },
  ]
})