# vue3-template **Repository Path**: biubiuuuu/vue3-template ## Basic Information - **Project Name**: vue3-template - **Description**: 该项目为vue3基础模版，使用vue3+element-plus+webpack。 配置了eslint 配合 prettier 进行代码格式化以及代码验证。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2023-03-15 - **Last Updated**: 2023-05-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

开箱即用的vue3基础框架模版

> ## 项目功能 - 该项目为 `vue3` 基础模版，使用 `vue3` + `element-plus` + `webpack`。 - 配置了 `eslint` 配合 `prettier` 进行代码格式化以及代码验证。确保代码风格统一。 - 配置了 `axios` 进行接口请求，以及 `nprogress` 进行页面顶部进度条。 - 配置了 `vuex` 进行状态管理，以及 `vue-router` 进行路由管理。 - 配置了 `sass` 进行样式编写，以及 `postcss` 进行样式兼容。 - 配置了 `vue.config.js` 进行项目配置，以及 `jsconfig.json` 进行项目路径别名配置。 - 配置了 `@babel/core` 进行代码转换，以及 `@babel/eslint-parser` 进行代码检查。 - 配置了 `@vue/cli-plugin-babel` 进行 babel 插件，以及 `@vue/cli-plugin-eslint` 进行 eslint 插件。 - 配置了 `@vue/cli-service` 进行 vue-cli 服务，以及 `@vue/cli-plugin-eslint` 进行 eslint 插件。 - 配置了 `eslint` 进行代码检查，以及 `eslint-plugin-vue` 进行 vue 代码检查。 - 配置了 `eslint-plugin-prettier` 进行代码格式化，以及 `sass` 进行样式编写。 - 配置了 `sass-loader` 进行样式编写，以及 `sortablejs` 进行拖拽排序。 > ## 目录结构 ``` ┌── public # 静态资源(不会被Webpack打包) ├── src # 源代码 │ ├── api # 接口，已配置自动导入 │ ├── assets # 静态资源(会被打包) │ ├── components # 组件库，可在main.js配置自动导入 │ ├── config # 配置文件 │ ├── directives # 自定义指令 │ ├── layout # 框架布局视图 │ ├── router # 路由配置 │ ├── store # VUEX状态管理 │ ├── style # 全局样式 │ ├── utils # 全局公用方法 │ ├── views # 所有视图页面文件 │ ├── App.vue # 入口视图 │ └── main.js # 入口文件 ├── .editorconfig # 统一编辑器样式 ├── .env.development # 开发环境变量 ├── .env.production # 生产环境变量 ├── .eslintrc.js # ESLint 代码质量校验相关配置 ├── .gitignore # git 忽略文件 ├── .prettierrc.js # Prettier 代码格式化相关配置 ├── babel.config.js # postcss 配置 ├── jsconfig.json # jsconfig 配置 ├── package.json # 包管理 └── vue.config.js # vue-cli 配置 ``` --- > ## 依赖结构 - ### 生产依赖 ``` ┌── axios # HTTP请求库 ├── @element-plus/icons-vue # element 图标库 ├── element-plus # element 组件库 ├── nprogress # 页面顶部进度条 ├── sortablejs # 拖拽排序库 ├── vue # Vue核心库 ├── vue-router # Vue路由 └── vuex # Vue状态管理 ``` - ### 开发依赖 ``` ┌── @babel/core # babel核心库 ├── @babel/eslint-parser # babel-eslint ├── @vue/cli-plugin-babel # babel插件 ├── @vue/cli-plugin-eslint # eslint插件 ├── @vue/cli-service # vue-cli 服务 ├── eslint # eslint ├── eslint-plugin-vue # eslint插件 ├── eslint-plugin-prettier # 让不符合 Prettier 规则的代码报错提示。 ├── sass # sass └── sass-loader # sass-loader 用于将 Sass 编译为 CSS ``` - `@babel/core`：Babel 核心库，用于将 ES6+ 代码转换为浏览器或 Node.js 可以执行的 ES5 代码。它包含了 Babel 的所有核心功能，如 AS 解析、插件和预设等。在使用 Babel 进行代码转换时，需要安装和配置 `@babel/core` 库。在 Vue 3 项目中，Babel 的配置通常是由 `@vue/cli-plugin-babel` 插件自动生成和管理的，无需手动配置。 - `@babel/eslint-parser`：Babel ESLint 解析器，是一个用于将 ES6+ 代码解析为 AST 的工具，可作为 ESLint 解析器的替代品，用于支持 ESLint 对 ES6+ 语法的检查。它支持使用 Babel 插件和预设对代码进行转换，并提供了对 JSX 和 Flow 等语法的支持。在使用 ESLint 对 ES6+ 代码进行检查时，需要安装和配置 `@babel/eslint-parser`。在 Vue 3 项目中，ESLint 的配置通常由 `@vue/cli-plugin-eslint` 插件自动生成和管理，无需手动配置。`@babel/eslint-parser` 库会被自动安装和集成到 ESLint 中，用于支持 ESLint 对 ES6+ 语法的检查。 在 Vue 3 项目中，这两个库通常与 `@vue/cli-plugin-babel` 和 `@vue/cli-plugin-eslint` 插件一起使用，用于提供对 ES6+ 语法的支持和对代码的转换、检查等功能。`@babel/core` 负责转换代码，`@babel/eslint-parser` 负责将转换后的代码交给 ESLint 进行检查 > ## 安装教程 ```sh # 克隆项目 git clone https://gitee.com/biubiuuuu/vue3-template # 进入项目目录 cd svipc # 安装依赖 yarn # 启动项目(开发模式) yarn serve # 打包项目(生产模式) yarn build ``` > ## 格式化配置问题 - 如果你无法在保存时根据 `prettier` 配置进行格式化，可能是因为编辑器的设置中未启用 `Prettier` 的自动格式化选项。 在 VS Code 中，你可以在 settings.json 文件中添加以下设置来启用自动格式化： - javascript、vue 和 json 文件类型的默认格式化器设置为 prettier。 ```json "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } ``` - 其他配置 ```json "eslint.enable": true, // 是否开启eslint "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "ts"], // #需要检查的文件类型 "prettier.configPath": ".prettierrc.js", // 这里直接读取项目的 prettier 配置文件 ```