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

最新推荐文章于 2024-06-15 01:42:30 发布

可爱的黑山样

最新推荐文章于 2024-06-15 01:42:30 发布

阅读量5.4k

点赞数 9

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42275614/article/details/113973978

版权

Vue 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

初始化的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里面的内容（如果定义了的话）

<!DOCTYPE html>
<html>
  <head>
    <!-- <meta base="/trade-service/"> -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <script src="./sysconfig.js"></script> -->
    <!-- 跳过 favicon.ico 请求 -->
    <link rel="icon" href="data:;base64,=">
    <title>hui-fans</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </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下面：
在这里插入图片描述
filename是输出的文件名，默认是index.html
template是依赖的模板，修改这个就能改变挂载的模板路径

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

在这里插入图片描述

可爱的黑山样

关注

9
点赞
踩
51

收藏

觉得还不错? 一键收藏
0
评论
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..
复制链接

扫一扫