代码拉取完成，页面将自动刷新
# 安装依赖
npm install
# 运行项目
npm run serve
# 打包发布
npm run build
# git 提交
npm run commit
使用vue3 + vuex4.x + vue-router4.x + element-plus搭建的项目模板。克隆到本地就可以直接在原有的代码上进行开发，无需创建项目。
模板项目提供了一些特性，如自动按需导入element-plus组件、封装网络请求、自动注册公共组件、自动引入iconfonts图标等。
如果需要更多的通用特性的话可以提issues～✨
├── LICENSE
├── README.md
├── auto-imports.d.ts // auto-import插件自动生成文件 (不要修改)
├── babel.config.js // babel配置文件
├── commitlint.config.js // commitlint配置文件
├── jsconfig.json // js声明
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico // 网站图标
│ └── index.html // 打包html模板
├── src // 源代码
│ ├── App.vue
│ ├── assets // 附件
│ ├── components
│ │ ├── common // 公共组件 全局自动注册
│ │ │ └── svg-icon.vue
│ | ├── ...页面名字 // 页面的组件
│ │ └── index.js // 工具函数 注册所有公共组件(common文件夹下)
│ ├── config // app配置
│ │ ├── icons.js // 图标配置
│ │ └── index.js // 统一导出
│ ├── hooks // 自定义hooks
│ │ └── useWindowSize.js
│ ├── layout // 布局组件
│ │ ├── components
│ │ │ ├── aside-menu.vue // 左侧菜单
│ │ │ └── layout-header.vue // 头部导航组件
│ │ └── index.vue
│ ├── main.js
│ ├── router
│ │ ├── index.js
│ │ └── router-utils // 路由的工具文件夹
│ │ └── router-guard.js // 路由守卫
│ ├── service // 网络请求相关代码
│ │ ├── demo.js // 根据页面划分模块
│ │ └── index.js // 网络请求基础封装
│ ├── store
│ │ ├── index.js
│ │ └── modules // store模块 自动注册
│ │ └── demo.js
│ ├── styles // 公共样式
│ │ ├── common
│ │ │ ├── base.scss
│ │ │ └── utils.scss
│ │ ├── global.scss
│ │ └── index.scss
│ ├── utils // 工具
│ │ ├── emitter.js // 全局事件总线
│ │ └── storage.js // 数据存储工具类
│ └── views
│ ├── 404.vue
│ ├── About.vue
│ └── Home.vue
└── vue.config.js // vue配置文件
vue3.2以上的版本的新特性，不需要再写setup函数。导入的组件可以直接使用，使用defineProps定义props，使用defineEmits定义emit数组。文档地址
本项目使用了elemnt-plus自动导入，无需再main.js中显式引入组件，在模板中可以直接使用。
自动导入为按需导入，在模板中使用的组件会自动导入对应的组件和样式定义文件。
在**iconfonts**中创建项目，选取图标添加到项目中。选择Symble后点击生成js代码，复制链接到src/config/icons的ICON_URL常量。
调用regiterSvgIcons函数将链接添加到document中，生成的js代码会自动在body下添加svg，使用svg-icon组件，提供name属性（不用加icon-前缀）使用图标。使用color定义图标颜色，使用size定义图标大小。
在每次添加或修改项目图标后，需要重新生成js代码，再把生成的链接复制到常量中。
<svg-icon name="add" color="red" :size="20"></svg-icon>
在components文件夹中，common文件夹下的组件是自动全局注册的，无需引入可以在template中直接使用。注册组件的key是组件文件名转为大驼峰。
只有在common文件夹下而且层级只有一层的以.vue结尾的组件会被自动注册
在components文件夹下创建页面文件夹，把页面独有的组件定义到页面的components文件夹中。
使用vuex4.x提供状态管理，在store/index.js中自动导入了modules文件夹下的所有模块到modules属性中。
在modules文件夹下新建的文件会被当成一个store的模块，模块的key是文件名。不需要写namespaced属性，在自动导入时已经批量加入了。
使用axios发送网络请求，在service/index.js中对axios进行了封装，使用时可以导入service对象，调用service对象上的方法发送网络请求。
采用网络请求集中管理，在service文件夹创建属于页面的文件，在js文件中导出网络请求函数，在页面中调用函数发送网络请求，这种管理方法使网络请求更加集中，易于管理。
/* 演示 */
// 导入请求实例
import service from "./index";
// 导出请求函数
export const getInfo = (data) => service.get({ url: "/api/test", data });
请求方法：参数为axios的requestConfig对象，常用的包括url, data, params等。
Vue-cli会自动加载.env文件，把变量添加到process.env中，注意变量名要以VUE_APP开头。
# 启动端口 可以在.env.local中覆盖
VUE_APP_PORT=8080
# 网页title
VUE_APP_TITLE=XXXX管理系统
# 图片转base64的limit
VUE_APP_FILE_LIMIT=8192
# 网络请求baseURL
VUE_APP_BASE_URL=http://xxxx:8888/
现有的定义在项目中都有用到，如需修改可以直接修改，也可以创建*.env.[mode].local*文件对变量进行覆盖（.local文件最好不要上传到仓库中）
使用git-hooks对代码提交的流程做了限制，限制使用特定格式的commit message，在commit之前会对代码进行格式化。
提供了快捷的script提交代码
npm run commit
使用上面的命令进行代码提交，需要选择提交的类型，输入提交介绍等。
git clone https://gitee.com/stznsln/vue3-initialization-template.git
使用以上命令将项目克隆到本地文件夹中，删除.git文件夹
git init
在使用上面👆命令创建自己的.git文件夹
# 安装依赖
npm install
# 运行项目
npm run serve
# 打包发布
npm run build
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
