zoukankan      html  css  js  c++  java
  • vue项目运行流程

    vue的运行流程

    index.html-->main.js-->App.vue-->router/index.js

    1.index.html (项目页面入口)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-test</title>
    </head>
    <body>
    <div id="app">
    <router-view></router-view>
    </div>
    </body>
    </html>


    2.main.js(核心文件)

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
    })

    3.App.vue(项目入口文件)

    <template>
    <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    </div>
    </template>
    
    <script>
    export default {
    name: 'App'
    }
    </script>
    
    <style>
    #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    }
    </style>

    4.router--index.js(路由组件)

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
    routes: [
    {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
    }
    ]
    })

    vue-router

    vue-router是vue的核心插件,使用vue-router,我们可以将组件映射到路由,然后告诉vue-router在哪里渲染它们

  • 相关阅读:
    转载:怎样用通俗的语言解释REST,以及RESTful?
    WiresShark 图解教程1
    派力奥 1.3 发动机
    EtherChannel Cisco 端口聚合详解
    Linux 排除问题的前5分钟
    Linux 定时任务crontab
    Linux SCP命令复制传输文件的用法
    Linux 挂载aliyun数据盘
    BCDedit 研究
    Bcdedit命令使用详解使用方法
  • 原文地址:https://www.cnblogs.com/tdtdttd/p/11079028.html
Copyright © 2011-2022 走看看