Vue中main.js、App.vue和index.html

初始化的Vue项目的时候,最先接触到的就是main.js,App.vue,index.html这三个文件。

main.js是入口文件,主要作用是初始化vue实例,并引入所需插件

App.vue是主组件,所有页面都是在App.vue下进行切换,可以理解为所有的路由都是App.vue的子组件

index.html是页面的入口文件,里面包含一个id为app挂载点,main.js中定义的Vue根实例就会挂载到该挂载点上

打开网页的时候,页面Title是index.html中定义的Title,而正文部分是App.vue中定义的内容。但在打开的瞬间是会显示index.html里面的内容(如果定义了的话)


<html>
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    
    <link rel="icon" href="data:;base64,=">
    <title>hui-fanstitle>
  head>
  <body>
    <div id="app">div>
    
  body>
html>

main.js里面创建了一个vue实例:

/* eslint-disable no-console */
import Vue from 'vue';
import hui from 'h_ui/dist/h_ui.min';
import HFileImport from 'h_ui/dist/lib/FileImport';
import VueContextMenu from 'vue-contextmenu';
import SvgIcon from 'vue-svgicon';
import gMsgbox from '@/components/gMsgBox';
import NoDataAlert from '@/components/NoDataAlert/index';
import store from './store';
import router from './router';
import App from './App';
import './style/main.scss';
import './style/custom.scss'; // am4的样式
import 'h_ui/dist/h_ui.min.css';
// eslint-disable-next-line no-unused-vars
import * as Biz from '@/utils/BizSecurity'; // 登录用的。操作员中心登录的加密算法,挂载到 window.BizSecurity
import './assets/svg-icons'; // 引入svg-icon

//引入组件
import CompanyIdSelect from '@/components/CompanyIdSelect'

Vue.use(SvgIcon, {
  tagName: 'svg-icon'
});
Vue.use(hui);
Vue.use(VueContextMenu);
Vue.use(NoDataAlert);
Vue.component('h-file-import', HFileImport);
Vue.component('CompanyIdSelect', CompanyIdSelect);

Vue.config.productionTip = false;
Vue.config.devtools = true;
Vue.config.errorHandler = (err, vm, info) => {
  console.log('@', err);
  console.log('@@', vm);
  console.log('@@@', info);
};

// 整合Msgbox instance提示,通过type类型调用对应实例
Vue.prototype.$gMsgbox = gMsgbox;

// axios 的配置移到了 api/httpFetch.js
// 事件总线
Vue.prototype.$bus = new Vue();
window.$Vue = new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app');

思考:为什么VUE默认加载main.js文件,为什么main.js是Vue工程的入口文件?

vue中的挂载页面index.html路径是在webpack.dev.conf.js下配置的,在plugins下面:
Vue中main.js、App.vue和index.html_第1张图片
filename是输出的文件名,默认是index.html
template是依赖的模板,修改这个就能改变挂载的模板路径

使用脚手架执行npm run dev时,会加载webpack.dev.conf.js文件

Vue中main.js、App.vue和index.html_第2张图片

你可能感兴趣的:(Vue,vue)