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在哪里渲染它们

  • 相关阅读:
    MongoDB入门
    MongoDB基础命令
    MongoDB查询
    MongoDB索引
    MongoDB聚合
    MongoDB进阶
    Elasticsearch简介与安装
    ElasticSearch索引
    shiro xml标准配置
    shiro双realm验证
  • 原文地址:https://www.cnblogs.com/tdtdttd/p/11079028.html
Copyright © 2011-2022 走看看