持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
“温故而知新，可以为师矣。”还是很有道理的。
Vue中有一个点之前没在意过，这次进行了多方面的了解，包括但不限于Vue官方文档，在此记录。
一、说明
使用CLI创建Vue项目会自动生成这个文件。
在Vue中，main.js是一个项目的入口文件，项目中所有的页面都会加载它，其重要性不言而喻。
具体来说它有如下几个作用：
- 实例化Vue；
- 放置经常会用到的插件和CSS样式；
- 存储全局变量。
二、main.js初始代码解读
import Vue from 'vue' // 引入VUE核心库
import App from './App.vue' // 引入一个当前目录下的名字为App.vue的组件
Vue.config.productionTip = false; // 是否要在生产环境当中给予提示功能。
new Vue({ // 生成一个VUE实例
render: function (h) { return h(App) }, // 渲染函数,将组件App渲染到挂载的元素上。
}).$mount('#app') //这个 #app 是挂载在 index.html 主页面上的，
// 在public/index.html中可以看到<div id="app"></div>
三、使用
比如，一般来说一个项目基本都要使用路由，在官方文档里，推荐使用vue-router 库。
首先，先安装Vue Router，在使用CLI工具创建Vue项目时，可以选择默认安装路由，如果创建时没有选择，需要使用：
npm install vue-router@4
或者
yarn add vue-router@4
在安装完后，是无法直接使用的，需要配置，这时候就需要对main.js进行相应配置。
配置步骤：
1、引入：安装完后，文件内会自动引入vue router；
2、传递给Vue实例，这样就可以在每个页面（组件）都能使用。
......
import router from './router' // 引入router
......
new Vue({
router, // 传递给vue实例
render: function (h) { return h(App) },
}).$mount('#app')
四、最后
已经配置完毕，接下来我们可以在App.vue页面里输出看一下是否成功。
mounted() {
console.log('App.vue输出', this);
},
浏览器输出结果：可以看到$route，后期可以通过这个this.$route 的形式访问当前路由。
