02-vue3详细执行过程

Burgess_Lee

已于 2022-10-12 16:05:02 修改

阅读量1.8k

点赞数 4

分类专栏： VueJs 文章标签： javascript 前端 vue3

于 2022-10-06 13:26:59 首次发布

本文链接：https://blog.csdn.net/Burgess_Lee/article/details/127181920

版权

VueJs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

App挂载文件-index.html
创建App主文件-main.js
根组件-App.vue
路由配置文件-router/index.js
views/Home.vue
- HelloWorld.vue

App挂载文件-index.html

public目录下的index.html文件内容如下：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

主要有一个div标签，提供vue创建的App进行挂载

创建App主文件-main.js

src目录下main.js文件内容如下：

// 从vue核心库中引入createApp方法
import { createApp } from 'vue'
// 引入当前目录下App.vue的组件
import App from './App.vue'
// 引入路由
import router from './router'
import store from './store'
// 创建APP，使用路由将其挂载到index.html文件上的div标签上
createApp(App).use(store).use(router).mount('#app')

main.js执行时是从上往下执行的。

根组件-App.vue

main.js是将App.vue组件引入并作为根节点挂载到index.html中，然后渲染到页面上

<!-- 模板部分 -->
<template>
  <nav>
    <!-- router-link路由链接导航，单击会渲染到router-view处，后者相当于一个占位符，用来显示路由结果的组件 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<!-- css样式部分 scoped表示所有的样式仅在磁组件内容有效，不影响其他组件-->
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
<!-- 模板部分 -->
<script></script>

路由配置文件-router/index.js

// 从vue-router引入createRouter和createWebHashHistory 方法
import { createRouter, createWebHashHistory } from 'vue-router'
// 引入vuews目录下的Home.vue组件，并取名为HomeView
import HomeView from '../views/HomeView.vue'

// 配置路由，类型为数组
const routes = [
  {
    // 根路径，即第一个路由
    path: '/',
    // 路由名称
    name: 'home',
    // 对应组件模板
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由懒加载，即路由被使用时才被加载
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
// 创建路由实例
const router = createRouter({
  // 设置history模式的路由
  history: createWebHashHistory(),
  // 上面定义的路由数组
  routes
})
// 暴露路由
export default router

浏览器访问之后，路由到第一个根路由，也就是HomeView，也就是说引入Home.vue组件替换App.vue组件内的路由占位符router-view

views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- 使用子组件并渲染到网页中，传递数据msg -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
// @是一个别名，相当于/src文件夹
// 引入/src/components/HelloWorld.vue组件，取名为HelloWorld
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    // 定义子组件名称
    HelloWorld
  }
}
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>