第一部分:main.js文件解析
- src/main.jsandroid系统定制开发是入口文件,android系统定制开发主要作用是初始化vueandroid系统定制开发实例并使用需要的插件
- 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素
- //基础配置
- import Vue from 'vue'
- import App from './App.vue'
-
- //引入已经配置好的路由和vuex
- import router from './router'
- import store from './store/store'
-
- // 导入less(样式的导入例子,css,less)
- //import '@/assets/xxx.less'
- //导入js(例如)
- //import xxx from 'xxx.js'
-
- // 是否启动生产消息
- Vue.config.productionTip = false
-
- //第一种写法
- new Vue({
- router,
- store,
- render: h => h(App)
- }).$mount('#app')
-
- //第二种写法
- const myVue=new Vue({
- el:'#app',
- router,
- store,
- render: h => h(App)
- })
-
- export default myVue
-
- // 其他js文件可以引用main.js的myVue实例从而调用myVue的router、store等等
- //调用注意 main.$store,main.$router即使是vue原型链上的axios也可以被调用
- //main.$axios
第二部分:Vue.use的作用以及什么时候使用
在Vue中引入使用第三方库通常我们都会采用import的形式引入进来,但是有的组件在引入之后又做了Vue.use()操作,有的组件引入进来又进行了Vue.prototype.$something = something,那么它们之间有什么联系呢?
- 先说一下Vue.prototype,在Vue项目中通常我们引入axios来进行请求接口数据,通过npm安装之后我们只需在我们的文件中import axios from "axios"就可以使用,有时候我们会加上一句Vue.prototype.$axios = axios,prototype我们应该是再熟悉不过了
- import Vue from 'vue'
- import App from './App.vue'
- //路由导入
- import router from './router'
- //vuex导入
- import store from './store'
- //npm下载好的三方axios包
- import axios from 'axios'
- // 是否启动生产消息
- Vue.config.productionTip = false
- // 设置axios的请求根路径
- axios.defaults.baseURL = 'url'
- // 把 axios 挂载到 Vue.prototype 上
- Vue.prototype.$http = axios
- //其实是在Vue原型上增加了一个$http,然后在其余的vue组件的文件中,
- //可以通过this.$http直接来使用axios
- new Vue({
- router,
- store,
- render: h => h(App)
- }).$mount('#app')
Vue.use是什么?(官方文档)
通过全局方法 Vue.use() 使用插件,Vue.use 会自动阻止多次注册相同插件,它需要在你调用 new Vue() 启动应用之前完成,Vue.use() 方法至少传入一个参数,该参数类型必须是 Object 或 Function,如果是 Object 那么这个 Object 需要定义一个 install 方法,如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行,当 install 执行时第一个参数就是 Vue,其他参数是 Vue.use() 执行时传入的其他参数。就是说使用它之后调用的是该组件的install 方法。
Vue.use()什么时候使用?
它在使用时实际是调用了该插件的install方法,所以引入的当前插件如果含有install方法我们就需要使用Vue.use(),例如在Vue中引用Element如下:
- import Vue from 'vue'
- import App from './App.vue'
- import router from './router'
- import store from './store'
- // 注册elementUi
- import ElementUI from 'element-ui'
- import 'element-ui/lib/theme-chalk/index.css'
-
- Vue.use(ElementUI)
- // 是否启动生产消息
- Vue.config.productionTip = false
- new Vue({
- router,
- store,
- render: h => h(App)
- }).$mount('#app')
利用 Vue.use
统一全局注册组件
说明:
-
Vue.use 可以接收一个对象, Vue.use(obj)
-
对象中需要提供一个 install 函数
-
install 函数可以拿到参数 Vue, 且将来会在 Vue.use 时, 自动调用该 install 函数
第一步:提供统一注册的入口文件 src/componets/index.js
- // 该文件负责所有的公共组件的全局注册
- // vue插件机制: Vue.use
- import PageTools from './PageTools'
-
- export default {
- install(Vue) {
- Vue.component('PageTools', PageTools)
- }
- }
第二步:在入口处进行注册 src/main.js
Vue.use 注册使用自己的插件模块
- import Components from './components'
- Vue.use(Components)