新建一个完整的vue项目

新建一个名为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项目
新建一个完整的vue项目

猜你喜欢
