对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>
总体分析
main.js
将APP.vue
作为数据渲染的模板,然后将router/index.js
作为vue实例的路由。App.vue
中有两个路由导航,导航指向的具体内容可以在router/index.js
中查看。router/index.js
中name
为Home
的路由所使用的单文件组件Home.vue
里面,使用了单文件组件HelloWorld.vue