Skip to content
陈随易陈随易
我的博客
    • 目录含义
      • 路由管理
        • 构建打包
          • 项目部署
            • main.js入口
              • 静态资源
                • css预处理
                  • 路径别名
                    • 样式组织
                      • 页面分配
                        • 全局组件
                          • 插件导入

                          main.js 入口

                          陈随易原创2022年5月8日
                          • 开源项目
                          • yicode-cli
                          大约 1 分钟

                          # main.js 入口

                          main.js 文件,是我们再熟悉不过的文件,它和 App.vue 经常出现在一起。

                          同时,main.js 也是整个项目级别的入口文件,是整个项目进行打包构建的第一个入口。

                          传统的项目中,main.js 文件组织可能是这样的:

                          import Vue from "vue";
                          
                          import Cookies from "js-cookie";
                          
                          import "normalize.css/normalize.css";
                          
                          import Element from "element-ui";
                          import "./styles/element-variables.scss";
                          
                          import "@/styles/index.scss";
                          
                          import App from "./App";
                          import store from "./store";
                          import router from "./router";
                          
                          import "./icons";
                          import "./permission";
                          import "./utils/error-log";
                          
                          import * as filters from "./filters";
                          
                          if (process.env.NODE_ENV === "production") {
                              const { mockXHR } = require("../mock");
                              mockXHR();
                          }
                          
                          Vue.use(Element, {
                              size: Cookies.get("size") || "medium",
                          });
                          
                          Object.keys(filters).forEach((key) => {
                              Vue.filter(key, filters[key]);
                          });
                          
                          Vue.config.productionTip = false;
                          
                          new Vue({
                              el: "#app",
                              router,
                              store,
                              render: (h) => h(App),
                          });
                          
                          1
                          2
                          3
                          4
                          5
                          6
                          7
                          8
                          9
                          10
                          11
                          12
                          13
                          14
                          15
                          16
                          17
                          18
                          19
                          20
                          21
                          22
                          23
                          24
                          25
                          26
                          27
                          28
                          29
                          30
                          31
                          32
                          33
                          34
                          35
                          36
                          37
                          38
                          39
                          40
                          41
                          42

                          但是,yicode创建的项目,可以做到这样:

                          /**
                           * 此文件为应用核心入口文件
                           * 一般情况下,不需要动此文件
                           * 如果需要添加第三方模块
                           * 请到plugins目录下操作
                           */
                          
                          // 核心库
                          import Vue from "vue";
                          // 全局路由
                          import router from "@/router/index.js";
                          // 全局存储
                          import vuex from "@/vuex/index.js";
                          // 插件导入
                          import "@/autoload/index.js";
                          // 国际化
                          import i18n from "@/autoload/i18n.js";
                          // 全局样式
                          import "@/styles/index.scss";
                          // 应用模板
                          import App from "@/App.vue";
                          // 实例化
                          let vm = new Vue({
                              router: router,
                              store: vuex,
                              i18n: i18n,
                              render: (h) => h(App),
                          }).$mount("#app");
                          
                          1
                          2
                          3
                          4
                          5
                          6
                          7
                          8
                          9
                          10
                          11
                          12
                          13
                          14
                          15
                          16
                          17
                          18
                          19
                          20
                          21
                          22
                          23
                          24
                          25
                          26
                          27
                          28

                          不管你的项目多复杂,多庞大,main.js 入口文件,都能够做到如此简洁和轻盈。

                          因为,yicode 已经从项目组织架构上,将所有的第三方模块放到了 plugins 插件目录中。

                          每个第三方模块都是插件中的一个独立文件,让项目结构和组织,更加清晰易懂。

                          上次编辑于: 2022/5/16 上午8:47:35
                          贡献者: chensuiyi
                          上一页
                          项目部署
                          下一页
                          静态资源
                          何以解忧,唯有代码
                          Copyright © 2022 陈随易

                          该应用可以安装在你的 PC 或移动设备上。这将使该 Web 应用程序外观和行为与其他应用程序相同。它将在出现在应用程序列表中,并可以固定到主屏幕,开始菜单或任务栏。此 Web 应用程序还将能够与其他应用程序和你的操作系统安全地进行交互。

                          详情