經過 vue init webpack my-project 安裝的 vue項目結合 vue-router實踐demo

時間 2019-12-04

標籤經過 vue init webpack project 安裝項目結合 router 實踐 demo 简体版

原文原文鏈接

網上蠻多 vue-router 的例子和問題可是比較少最佳實踐初次接觸vue,感受弄了很久才弄好，
vue init webpack my-project 安裝項目以後 id=‘app’ 並非寫在index.html中
而是寫在app.vue 使用router的時候一直提示找不到 #app
因此須要將 id = 'app'放在 index.html中以下html

// main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
/* eslint-disable no-new */
Vue.use(VueRouter)
const router = new VueRouter()
const Foo = Vue.extend({
  template: '<p>This is foo!</p>'
})
const Bar = Vue.extend({
  template: '<p>This is bar!</p>'
})

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})
router.start(App, '#app’)  //

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

相關標籤/搜索

webpack+vue+vuerouter

idea2016+vue+webpack+vue

經過 vue init webpack my-project 安裝的 vue項目 結合 vue-router實踐demo

經過 vue init webpack my-project 安裝的 vue項目結合 vue-router實踐demo