Skip to content
陈随易陈随易
我的博客
    • vue-cli的困境
      • yicode-cli解决了哪些问题
        • 自动导入
          • 项目架构和维护
            • main.js 文件混乱

          yicode-cli 解决了哪些问题

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

          此页内容
          • 自动导入
          • 项目架构和维护
          • main.js 文件混乱

          # yicode-cli 解决了哪些问题

          大部分时候,我们使用一个新工具之前,最先需要考量的,就是这个工具解决了什么问题。

          # 自动导入

          【自动导入】是 yicode-cli 的核心特性之一。

          路由、插件、api、样式、环境变量、全局组件、全局指令、全局过滤器等等,都是自动导入的。

          举个例子,使用 yicode-cli,我们再也不用写下面这种路由文件了。

          export const constantRoutes = [
              {
                  path: "/redirect",
                  component: Layout,
                  hidden: true,
                  children: [
                      {
                          path: "/redirect/:path(.*)",
                          component: () => import("@/views/redirect/index"),
                      },
                  ],
              },
              {
                  path: "/login",
                  component: () => import("@/views/login/index"),
                  hidden: true,
              },
              {
                  path: "/auth-redirect",
                  component: () => import("@/views/login/auth-redirect"),
                  hidden: true,
              },
              {
                  path: "/404",
                  component: () => import("@/views/error-page/404"),
                  hidden: true,
              },
              {
                  path: "/401",
                  component: () => import("@/views/error-page/401"),
                  hidden: true,
              },
              {
                  path: "/",
                  component: Layout,
                  redirect: "/dashboard",
                  children: [
                      {
                          path: "dashboard",
                          component: () => import("@/views/dashboard/index"),
                          name: "Dashboard",
                          meta: { title: "Dashboard", icon: "dashboard", affix: true },
                      },
                  ],
              },
              {
                  path: "/documentation",
                  component: Layout,
                  children: [
                      {
                          path: "index",
                          component: () => import("@/views/documentation/index"),
                          name: "Documentation",
                          meta: { title: "Documentation", icon: "documentation", affix: true },
                      },
                  ],
              },
              {
                  path: "/guide",
                  component: Layout,
                  redirect: "/guide/index",
                  children: [
                      {
                          path: "index",
                          component: () => import("@/views/guide/index"),
                          name: "Guide",
                          meta: { title: "Guide", icon: "guide", noCache: true },
                      },
                  ],
              },
              {
                  path: "/profile",
                  component: Layout,
                  redirect: "/profile/index",
                  hidden: true,
                  children: [
                      {
                          path: "index",
                          component: () => import("@/views/profile/index"),
                          name: "Profile",
                          meta: { title: "Profile", icon: "user", noCache: true },
                      },
                  ],
              },
          ];
          
          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
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          60
          61
          62
          63
          64
          65
          66
          67
          68
          69
          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
          80
          81
          82
          83
          84
          85

          所有的路由,都是和我们的文件目录一一对应,而且不仅可以自动导入,还能跟随 yicode-cli 的页面创建命令,一键生成路由。

          # 项目架构和维护

          yicode-cli 解决的另一个非常重要的问题就是,项目的架构和维护。

          路由是一个 vue 项目的浇水,一个个页面,通过路由串联成一个整体。

          同时呢,我们只需要查看 src/pages 下面的目录结构,就能清楚地知道页面的访问路径。

          目录路由描述
          src/pages/news/index.vue/news新闻首页
          src/pages/news/detail/index.vue/news/detail新闻详情页
          src/pages/news/list/index.vue/news/list新闻列表页
          src/pages/about/company/index.vue/about/company关于-公司介绍
          src/pages/about/contact/index.vue/about/contact关于-联系我们

          通过上面这个表格,相信同学们应该大致了解了 yicode-cli 的项目的页面结构和路由组织方式。

          # main.js 文件混乱

          大部分 vue 项目,都存在一个普遍的问题,main.js 入口文件,极其混乱。

          import Vue from "vue";
          
          import Cookies from "js-cookie";
          
          import "normalize.css/normalize.css"; // a modern alternative to CSS resets
          
          import Element from "element-ui";
          import "./styles/element-variables.scss";
          import enLang from "element-ui/lib/locale/lang/en"; // 如果使用中文语言包请默认支持,无需额外引入,请删除该依赖
          
          import "@/styles/index.scss"; // global css
          
          import App from "./App";
          import store from "./store";
          import router from "./router";
          
          import "./icons"; // icon
          import "./permission"; // permission control
          import "./utils/error-log"; // error log
          
          import * as filters from "./filters"; // global filters
          
          /**
           * If you don't want to use mock-server
           * you want to use MockJs for mock api
           * you can execute: mockXHR()
           *
           * Currently MockJs will be used in the production environment,
           * please remove it before going online ! ! !
           */
          if (process.env.NODE_ENV === "production") {
              const { mockXHR } = require("../mock");
              mockXHR();
          }
          
          Vue.use(Element, {
              size: Cookies.get("size") || "medium", // set element-ui default size
              locale: enLang, // 如果使用中文,无需设置,请删除
          });
          
          // register global utility filters
          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
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53

          各种模块、样式、第三方库、初始化等等都堆积在这个文件里面,让人看了直呼头疼。

          yicode-cli 很好地解决了这个问题,main.js 文件内容如下。

          /**
           * 此文件为应用核心入口文件
           * 一般情况下,不需要动此文件
           * 如果需要添加第三方模块
           * 请到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

          yicode-cli 将各种模块、第三方框架、配置等等,都分散到了 plugins 目录里面。

          那么,plugins 目录的结构,大致将会如下。

          ├─plusins
          │  ├─basil.js 浏览器存储
          │  ├─xlsx.js excel操作
          │  ├─js-cookie.js cookie操作
          │  └─element-ui.js ui框架
          │  └─index.js 自动导入所有插件
          
          1
          2
          3
          4
          5
          6

          通过【插件】的概念,很好地解决了 main.js 文件混乱的问题。

          上次编辑于: 2022/5/16 上午8:47:35
          贡献者: chensuiyi
          上一页
          vue-cli的困境
          何以解忧,唯有代码
          Copyright © 2022 陈随易

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

          详情