项目结构基座优化

Author: Neveryu

.env.development

@@ -10,7 +10,7 @@ PORT = '8888'
 VUE_APP_BASE_API = '/dev-api'
 
 # 代理
- VUE_APP_PROXY_API = '/'
+ VUE_APP_PROXY_API = 'http://localhost:4000'
 
 # 主要用于控制 Babel 对 JavaScript 模块（如 ES Modules）的转译行为。它的核心作用是解决某些模块系统（如 CommonJS 和 ES Modules）之间的兼容性问题，尤其是在依赖第三方库或优化构建时。
 # 该环境变量会强制 Babel 将所有 ES Modules 转换为 CommonJS 格式

.eslintrc.js

@@ -3,10 +3,11 @@ module.exports = {
   env: {
     node: true,
   },
+  // extends 字段表示 继承一组预定义的 ESLint 规则配置
   extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
   // 【parserOptions】扩展 ESLint 对 JavaScript 新语法和实验性特性的支持
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     ecmaFeatures: {
       // 支持装饰器
       legacyDecorators: true,
@@ -37,35 +38,26 @@ module.exports = {
 
   rules: {
     'prettier/prettier': [
+      // 使用eslint-plugin-prettier可以让Prettier规则作为ESLint的一部分运行，这样可以在代码检查时同时处理格式问题，简化工作流。
+      // 'prettier/prettier'：表示该规则由 eslint-plugin-prettier 插件提供，用于将 Prettier 的格式化规则作为 ESLint 规则运行。
       'error',
       {
         semi: false,
         singleQuote: true,
         tabWidth: 2,
-        printWidth: 120,
         arrowParens: 'avoid',
         bracketSpacing: true,
         insertPragma: false,
-        jsxBracketSameLine: false,
         jsxSingleQuote: false,
         proseWrap: 'preserve',
         quoteProps: 'as-needed',
         requirePragma: false,
         trailingComma: 'none',
-        useTabs: false,
+        useTabs: false, // 禁止使用 Tab 缩进，强制使用空格
       },
     ],
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    // 使用2个空格缩进
-    indent: [
-      'error',
-      2,
-      {
-        SwitchCase: 1,
-        flatTernaryExpressions: true,
-      },
-    ],
     // 代码后不使用分号
     semi: ['error', 'never'],
     // 注释 // 或 /* 之后必须有一个空格

.prettierrc.js

@@ -13,7 +13,7 @@
 module.exports = {
   semi: false,
   singleQuote: true,
-  printWidth: 120,
+  printWidth: 150,
   htmlWhitespaceSensitivity: 'ignore',
   bracketSameLine: true, // 用于控制HTML元素的闭合括号是否与最后一行的内容在同一行
   // 动态条件示例

README.md

@@ -95,6 +95,42 @@ bash ./deploy.sh
 - 富文本
 ```
 
+## 目录结构说明
+
+```
+vue-cms/  项目名称
+|-- node_modules         #存放第三方依赖包（例如，执行npm i安装的依赖包）
+|-- public/              #静态资源目录
+|   |-- favicon.ico      #网站图标
+|   |-- index.html       #项目的入口文件
+|-- src/                 #项目的源代码目录
+|   |-- assets/          #静态资源目录，如图片、字体等
+|   |-- components/      #可复用的 Vue 组件
+|   |-- router/          #Vue Router 的路由配置
+|   |   |-- index.js     #路由的主文件
+|   |-- store/           #Vuex 的状态管理
+|   |   |-- index.js     #状态管理的主文件
+|   |-- views/           #页面目录
+|   |   |-- About.vue    #关于页面
+|   |   |-- Home.vue     #首页
+|   |-- App.vue          #根组件
+|   |-- main.js          #项目的入口文件
+|-- tests/               #测试文件
+|-- .env                 #环境变量（在所有的环境中被载入）
+|-- .env.development     #环境变量（仅开发环境）
+|-- .env.production      #环境变量（仅生成环境（构建打包的时候））
+|-- .eslintrc.js         #ESLint 配置
+|-- .eslintignore        #ESLint 忽略的文件
+|-- .gitignore           #Git 忽略的文件
+|-- .prettierrc.js       #prettier 配置
+|-- babel.config.js      #Babel 插件的配置文件
+|-- jest.config.js       #jest 配置
+|-- package-lock.json    #npm 依赖的锁定文件
+|-- package.json         #项目的元数据文件和 npm 脚本
+|-- README.md            #项目的说明文件
+|-- vue.config.js        #Vue CLI 配置文件，比如配置alias、devServer和configure Webpack等
+```
+
 ## 截图
 
 ![](./resource/screenhot3.png)

package.json

@@ -61,23 +61,23 @@
     "xlsx": "^0.12.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-unit-jest": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@babel/core": "7.24.7",
+    "@babel/eslint-parser": "7.24.7",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-plugin-router": "5.0.8",
+    "@vue/cli-plugin-unit-jest": "5.0.8",
+    "@vue/cli-plugin-vuex": "5.0.8",
+    "@vue/cli-service": "5.0.8",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.1.0",
     "eslint": "7.32.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "8.7.1",
     "prettier": "^3.5.3",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "svg-sprite-loader": "^5.0.0",
-    "vue-loader": "^15.9.6",
     "vue-template-compiler": "2.7.16"
   },
   "engines": {

src/App.vue

@@ -6,13 +6,12 @@
 
 <script>
 export default {
-	watch: {
-		$route(to) {
-			if(to.path.indexOf('/login') === -1) {
-				
-			}
-		}
-	}
+  watch: {
+    $route(to) {
+      if (to.path.indexOf('/login') === -1) {
+      }
+    },
+  },
 }
 </script>
 

src/layout/app-main.vue

@@ -13,14 +13,14 @@ export default {
   name: 'app-main',
   data() {
     return {
-      desc: '这里是右侧主界面'
+      desc: '这里是右侧主界面',
     }
   },
   computed: {
     key() {
       return this.$route.path
-    }
-  }
+    },
+  },
 }
 </script>
 

src/layout/sidebar/sidebar-item.vue

@@ -9,16 +9,12 @@
       <router-link
         v-if="
           hasOneShowingChildren(item.children, item) &&
-            (!onlyOneChild.children || onlyOneChild.noShowingChild) &&
-            !item.alwaysShow
+          (!onlyOneChild.children || onlyOneChild.noShowingChild) &&
+          !item.alwaysShow
         "
-        :to="resolvePath(onlyOneChild.path)"
-      >
+        :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="item.path">
-          <item
-            :icon="item.children[0].meta.icon"
-            :title="item.children[0].meta.title"
-          ></item>
+          <item :icon="item.children[0].meta.icon" :title="item.children[0].meta.title"></item>
         </el-menu-item>
       </router-link>
 
@@ -32,8 +28,7 @@
             :item="child"
             :base-path="resolvePath(child.path)"
             :key="child.path"
-            v-if="!child.hidden && child.children && child.children.length > 0"
-          />
+            v-if="!child.hidden && child.children && child.children.length > 0" />
 
           <router-link v-else :to="resolvePath(child.path)" :key="child.path">
             <el-menu-item :index="child.path">
@@ -46,27 +41,26 @@
   </div>
 </template>
 <script>
-import path from 'path'
 import Item from './item'
 export default {
   name: 'sidebar-item',
   components: {
-    Item
+    Item,
   },
   props: {
     // 一级路由对象
     item: {
       type: Object,
-      required: true
+      required: true,
     },
     basePath: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
   data() {
     return {
-      onlyOneChild: null
+      onlyOneChild: null,
     }
   },
   methods: {
@@ -75,7 +69,7 @@ export default {
       // 1、后面要来判断，children 里面是不是只有一个
       // 2、亦或者没有 【比如 '/login' 这个 route 就没有 children】
       // 3、亦或者 children 里面的子路由大于1个
-      const showingChildren = children.filter(item => {
+      const showingChildren = children.filter((item) => {
         if (item.hidden) {
           return false
         } else {
@@ -94,7 +88,7 @@ export default {
         this.onlyOneChild = {
           ...parent,
           path: '',
-          noShowingChild: true
+          noShowingChild: true,
         }
         return true
       }
@@ -103,11 +97,11 @@ export default {
     },
     resolvePath(routePath) {
       // console.log(path.resolve(this.basePath, routePath))
-      return path.resolve(this.basePath, routePath)
-    }
+      return this.basePath + routePath
+    },
   },
   created() {
     // console.log(this.basePath)
-  }
+  },
 }
 </script>

src/main.js

@@ -13,7 +13,6 @@ import App from './App.vue'
 import store from './store'
 import router from './router'
 
-
 // 自定义的全局组件
 import Notification from '@/components/notification'
 
@@ -27,8 +26,8 @@ import './permission'
 import './mock/index2'
 
 Vue.use(ElementUI, {
-	size: Cookies.get('size') || 'small',
-  i18n: (key, value) => i18n.t(key, value)
+  size: Cookies.get('size') || 'small',
+  i18n: (key, value) => i18n.t(key, value),
 })
 Vue.use(Notification)
 
@@ -38,5 +37,5 @@ new Vue({
   router,
   store,
   i18n,
-  render: h => h(App)
+  render: (h) => h(App),
 }).$mount('#app')