新建一個完整的vue專案
阿新 • • 發佈：2019-01-09
新建一個名為myvue專案： 1、myvue/index.html為專案顯示頁面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>myvue-project</title> </head> <body> <div id="app"></div> <!-- 此id為設定 --> </body> </html> 2、myvue/main.js import Home from 'Home' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', # 此id對應上述所設定的id router, components: { Home }, # 設定要渲染的根元件Home.vue template: '<Home/>' }) 3、Home.vue為自定義的根元件，可以在這裡匯入新組建 <template> <div> {{title}} <router-link to='/home/move'>電影</router-link> <router-link to='/home/story'>小說</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'Home', data () { return { title: '首頁' } } } </script> <style scoped> </style> 4、myvue/src/router/index.js路由檔案，在這裡可以設定，訪問路由 /* global Vue */ import Router from 'vue-router' import Home from '@/components/Home' import MovePart from '@/components/MovePart' import StoryPart from '@/components/StoryPart' Vue.use(Router) module.exports = new Router({ mode: 'history', routes: [ { // 1、一級路由（瀏覽器上訪問地址http://127.0.0.1:8080/home） path: '/home', name: 'Home', component: Home, // 2、定義子路由 children: [ { path: 'move', （瀏覽器上訪問地址http://127.0.0.1:8080/home/move） name: 'MovePart', component: MovePart }, { path: 'story （瀏覽器上訪問地址http://127.0.0.1:8080/home/story） name: 'StoryPart', component: StoryPart } ] } ] }) vue就這幾個檔案，跟著上述設定，就能搭建完成一個初步的Vue專案