yicode-cli 解决了哪些问题
原创2022年5月8日
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 },
},
],
},
];
所有的路由,都是和我们的文件目录一一对应,而且不仅可以自动导入,还能跟随 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),
});
各种模块、样式、第三方库、初始化等等都堆积在这个文件里面,让人看了直呼头疼。
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");
yicode-cli 将各种模块、第三方框架、配置等等,都分散到了 plugins 目录里面。
那么,plugins 目录的结构,大致将会如下。
├─plusins
│ ├─basil.js 浏览器存储
│ ├─xlsx.js excel操作
│ ├─js-cookie.js cookie操作
│ └─element-ui.js ui框架
│ └─index.js 自动导入所有插件
通过【插件】的概念,很好地解决了 main.js 文件混乱的问题。