对Vue cli3创建的模板文件的理解

对Vue cli3创建的模板文件的理解

目录

• 对Vue cli3创建的模板文件的理解
  • 文件概览
  • 文件分析
  • 总体分析
  • 文件运行的过程

文件概览

这是文件路径图

运行npm run serve之后，出现的画面是这样的

文件分析

先看main.js，我写了几句注释

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from "axios"
// 阻止启动生产消息
Vue.config.productionTip = false
// 将axios加入全局的作用域
Vue.prototype.$axios=axios
new Vue({
  // 配置路由
  router,
  // 将App.vue 渲染进去
  render: h => h(App)
}).$mount('#app')

关于render 官方文档有这样一段说法

• Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
• 将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。

#app的html内容是App.vue的内容，路由是由./router/index.js定义的路由

接下来去看App.vue，里面的主体是两个router-link，导航指向的组件应该在main.js中引入的./router里面查看

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

然后看一下router/index.js，该文件的目的是定义了一个路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    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/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

再来看一下name为Home的路由路径所使用的组件../views/Home.vue，这个组件使用了一个单文件组件/src/components/HelloWorld.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '/src/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

总体分析

1. main.js将APP.vue作为数据渲染的模板，然后将router/index.js作为vue实例的路由。
2. App.vue中有两个路由导航，导航指向的具体内容可以在router/index.js中查看。
3. router/index.js中name为Home的路由所使用的单文件组件Home.vue里面，使用了单文件组件HelloWorld.vue

文件运行的过程