# 安装依赖
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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。