这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
前言
本文主要介绍一下vue项目入口文件的解读，包括一些语法、命令的使用。
项目入口main.js介绍
项目默认的main.js如下
//这个是引入vue框架 等同于引入vue.js <script src="./js/vue.js"></script>
import Vue from 'vue'
// 引入根组件App ,App是单页面应用中的唯一的根组件,以后开发的组件都会放在App内部
import App from './App.vue'
//隐藏开发模式的提示：
Vue.config.productionTip = false
//创建vue的根实例
// h是一个渲染dom的回调,将App组件渲染到id=app的dom结构中
// $mount('#app'): #app即为public文件夹中index.html中的<div id="app"></div>new Vue(
{
render: h => h(App),
}).$mount('#app')
这里还可以有另外一种写法
import store from "./store";
import router from "./router";
new Vue(
{
el: "#app",
router,
store,
render: (h) => h(App),});
其中.$mount('#app') 和 el的声明所起的作用是一样的，这里有引入另外的vuex库和route库，
通过 router 配置参数注入路由，让整个应用具有路由功能。
store是全局状态管理，一并在此引入
Vue相关语法使用总结
-
Vue.use()
import VueRouter from "vue-router"; Vue.use(VueRouter); use表示全局引入路由插件。
import Vue from 'vue';
// 这个插件必须具有install方法 const plugin = { install (Vue, options) { // 添加全局方法或者属性 Vue.myGlobMethod = function () {}; // 添加全局指令 Vue.directive(); // 添加混入 Vue.mixin(); // 添加实例方法 Vue.prototype.$xxx = function () {}; // 注册全局组件 Vue.component() } }
// Vue.use内部会调用plugin的install方法 Vue.use(plugin);
这个方法接收一个参数。这个参数必须具有install方法。Vue.use函数内部会调用参数的install方法。 如果插件没有被注册过，那么注册成功之后会给插件添加一个installed的属性值为true。 Vue.use方法内部会检测插件的installed属性，从而避免重复注册插件。 插件的install方法将接收两个参数，第一个是参数是Vue，第二个参数是配置项options。 在install方法内部可以添加全局方法或者属性、全局指令、mixin混入、添加实例方法、使用Vue.component()注册组件等。
-
import
-
用于在一个模块中加载另一个含有export接口的模块 这种是对于 export default 的组件，如下导入 import Layout from "@/layouts"; //这里表示引入组件,默认是引入src目录下对应layouts文件夹下的index.vueimport EditImg from "@/components/xinou/checkImgEdit.vue"; //这里表示引入组件,默认是引入src目录下对应components文件夹下的checkImgEdit.vue -
export default 与 export
-
export default 表示导出一个默认模块 如果通过export方式导出，在导入时要加{ }，export default则不需要 如下在js文件里 var name1="李四"; var name2="张三";function nameTo(x,y){ alert(name1+name2) }export { name1 ,name2,nameTo }也可以直接定义 export var name1="李四";2种方式均可 在另外个文件导入 import { name1 , name2,nameTo } from "/name.js" //路径根据你的实际情况填写 -
Vue.compont
-
这个方法是注册一个全局组件， Vue.component("byui-query-form", ByuiQueryForm); 表示在全局可以直接使用<byui-query-form></byui-query-form> 来用将ByuiQueryForm注册为全局组件， 在别的组件中通过<byui-query-form>标签使用ByuiQueryForm组件
总结
本文主要对入口main.js文件作了一些解读，还有vue项目里的各个语法命令的介绍，加深我们对项目的理解，方便我们的开发，毕竟从入口开始,我们就需要对一些业务做一些初始化或者其他的处理。
所以对入口的运行逻辑还是需要知道的，后面还有路由插件route、全局状态管理插件vuex的使用，摸清了这2个插件的用法，一个vue项目的流程基本也能很好的处理了，剩下的就是业务代码的编写。
