3.Vue-module-dev

安裝webpack

npm install webpack -g

安裝veu/cli

npm install -g @vue/cli-init

npm install @vue/cli -g

安裝完成後，新增目錄(vue-first)，並進到目錄裡面執行指令初始化

vue init webpack vue-first

其中在new Vue的route是一種簡寫的寫法，也可寫成

import router from './router'

new Vue({
  el: '#app',
  router: router,
  components: { App },
  template: '<App/>'
})

可以看到由import的部分就是在router的目錄中導入的

再回到main.js

當屬性和變數名稱都相同就可簡寫成一個即可，也可寫成

new Vue({
  el: '#app',
  router: router,
  components: { App: App },
  template: '<App/>'
})

而template使用的是App這個標籤，所以實際畫面如何就會在App.vue中顯示

在App.vue這個頁面可以區分為三大部分

官方文件也有建議的說明

先來看第一部分

標籤<router-view>是動態view，可根據URL而改變，而目前使用的就是router路由，在/router/index.js中routes可定義多種規則

routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]

只要路徑為/就會顯示HelloWorld這個元件，而這個元件就是/src/components/HelloWorld.vue

可以看到這個檔案裡面也是以<template> <script> <style>區分。

所以可以另外寫一個元件來測試一下

在/src/components/新增一個Hello.vue

<template>
  <div>
    <h1>Hello , I'm {{ name }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "Hello",
    };
  },
};
</script>

<style>
</style>

並且在/src/router/index.js路由新增規則，並且記得匯入元件

import Hello from '@/components/Hello'

routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    }
  ]

存檔後再訪問路徑 http://localhost:8081/#/hello，畫面就跳轉hello的元件了