html5项目改造Vue工程化

将html5项目改造成vue项目也就是view层的vue文件:Index.vue<template>i<div>将html代码粘贴到这里</div></template><script>export default {name: 'Index',//注意这里就是Index.vue文件的名称data() {return {}},

qq_45849275

9380人浏览 · 2021-06-22 19:47:51

qq_45849275 · 2021-06-22 19:47:51 发布

将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>