html5项目改造Vue工程化

将html5项目改造成vue项目

也就是view层的vue文件:Index.vue

<template>i
 <div>
     将html代码粘贴到这里
 </div>
</template>

<script>
export default {
          
   
   name: Index,//注意这里就是Index.vue文件的名称
   data() {
          
   
          return {
          
   

          }
        },
        methods: {
          
   
            gotoTest(id) {
          
   
                // this.$router.push() 表示路由调转
                this.$router.push(`/test/${
           
    id}`)
            }
        },
        mounted() {
          
   
        },
  components: {
          
   
  }
}
</script>

<style lang="scss" scoped>
	@import "../assets/css/amazeui.css";
	@import "../assets/css/admin.css";
	@import "../assets/css/demo.css";
	@import "../assets/css/seastyle.css";
</style>

router层： index.js 1.导入对应的包

import Vue from vue
import VueRouter from vue-router
import Index from ../views/Index
import Test from ../views/Test
import Search from ../views/Search
import Introduction from ../views/Introduction

2.使用路由

Vue.use(VueRouter)

3.页面的跳转与参数的传递

const router = new VueRouter({
          
   
    mode: history,
    routes: [
        {
          
   
            path: /,
            component: Index
        },
        {
          
   
            path: /test/:abc,  // /test/45   /test/abc
            props: true,
            component: Test
        },
        {
          
   
            path: /search,
            component: Search
        },
        {
          
   
            path: /intr,
            component: Introduction
        }
    ]
})

4.导出路由

export default router

实例：

<template>
  <h1>Helle world, {
          
   {
          
   abc}}</h1>
</template>

<script>
export default {
          
   
  props: {
          
   
  //abc对应上面的 path: /test/:abc，其实就是传递参数而已
    abc: Number  // String  地位上和data中的属性是一样的，在任何地方都可以使用 this.abc
  },
  data() {
          
   
    return {
          
   
      name: 
    }
  },
  name: "Test"
}
</script>

<style scoped>

</style>