Vue main.js

Vue  main.js

main.js是项目的入口文件，项目中所有的页面都会加载main.js

main.js配置

定义:main.js是项目的入口文件，项目中所有的页面都会加载main.js。

主要有三个作用：

 1.实例化Vue。

 2.放置项目中经常会用到的插件和CSS样式。

3.存储全局变量。

项目创建完毕，main.js中会有默认的配置，但是要想真正投入使用，这种简版的配置是不够的。以下通过配置三项内容让读者有个初步的了解。

https://www.jb51.net/javascript/2852492e1.htm

 

src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件

===============================

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// element-ui组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 

import './api/mock'
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

import { Message, MessageBox } from "element-ui";
 
Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.use(Antd);

 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 

===============================

https://www.cnblogs.com/gagaya2/p/17749960.html

 

1.内容：

import Vue from 'vue'      //导入 Vue 核心包

import App from './App.vue'    //导入 App.vue 根组件

Vue.config.productionTip = false   //提示当前处于什么环境（生产环境 / 开发环境），fasle是什么提示都没有，改为true才提示，但通常写false

new Vue({                      // Vue 实例化，提供 render 方法

  render: h => h(App),   // render 方法的作用是 基于App.vue创建结构，渲染 index.html 里的 id = "app" 的容器

}).$mount('#app')          // .$mount('#app') 的作用与 el : ' #app '  完全一致，都用于指定 Vue 所管理的容器

 

2. render: h => h(App) 的完整格式：

render: (createElement) => {

      return  createElement (App)   //基于App创建元素结构

}

 

3. main.js文件的核心作用：导入App.vue，基于App.vue创建结构，渲染 index.html 里的 id = "app" 的容器

 

4.总结：在运行命令 npm run serve 的时候，在 localhost:8080 中之所以能看到最终界面，本质上是先执行 main.js ，在 main.js 中我们写了三段核心代码：导入了 Vue ，导入了 App.vue 根组件，进行了 Vue 的实例化，在实例化过程中利用 render 方法将 App.vue 动态创建结构，最终渲染到了 index.html 的容器当中，咱们是通过 .$mount('#app') 来指定的容器，用 el : ' #app ' 也完全可以。和以前的区别就在于，以前我们的模板是直接放在 html 里面的，这一次因为是放在 App.vue 里面了，所以如果要创建结构渲染，得提供一个 render 方法，基于 render 方法来创建结构做渲染。

===============================

Vue.prototype，在Vue项目中通常我们引入axios来进行请求接口数据，通过npm安装之后我们只需在我们的文件中import axios from "axios"就可以使用，有时候我们会加上一句Vue.prototype.$axios = axios

    import axios from 'axios'
　　// 把 axios 挂载到 Vue.prototype 上
　　Vue.prototype.$http = axios
　　//其实是在Vue原型上增加了一个$http，然后在其余的vue组件的文件中,
　　//可以通过this.$http直接来使用axios

如果通过全局方法 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如下：

// 注册elementUi
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

利用 Vue.use 统一全局注册组件

　　说明:

　　Vue.use 可以接收一个对象, Vue.use(obj)

　　对象中需要提供一个 install 函数

　　install 函数可以拿到参数 Vue, 且将来会在 Vue.use 时, 自动调用该 install 函数

　　第一步：提供统一注册的入口文件 src/componets/index.js　

1. 　// 该文件负责所有的公共组件的全局注册
2. 　　// vue插件机制: Vue.use
3. 　　import PageTools from './PageTools'
4. 　　export default {
5. 　　install(Vue) {
6. 　　Vue.component('PageTools', PageTools)
7. 　　}
8. 　　}

　　第二步：在入口处进行注册 src/main.js Vue.use 注册使用自己的插件模块

1. 　　import Components from './components'
2. 　　Vue.use(Components)

 https://www.ucloud.cn/yun/127855.html

================================