使用vite + vue3 + pinia + ElementPlus 搭建后台管理项目
考虑到不是所有人都会ts，本文中所有的代码都是以js为主1. 环境搭建1. 默认大家都已经搭建好vite及其相关的环境如有疑问可查看官方文档：vite中文官方文档2. 使用命令行快速初始化项目：# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init vite@latest my-vue-a
·
考虑到不是所有人都会ts，本文中所有的代码都是以js为主
1. 环境搭建
1. 默认大家都已经搭建好vite及其相关的环境
如有疑问可查看官方文档：vite中文官方文档
2. 使用命令行快速初始化项目：
# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app -- --template vue
成功后如下图所示
3. 运行项目
- 这是基本的项目结构
- 在vscode中打开终端，先
npm install安装依赖，然后运行npm run dev打开浏览器，一个基本的项目就搭建成功了
2、配置vite
到vite.config.js中，配置一下开发中常用的，比如：别名、代理啥的
import {fileURLToPath, URL} from 'url'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
// 别名
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
// 省略文件扩展名
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
server: {
// 自动打开浏览器
open: true,
// 设置 https 代理
proxy: {
'/api': {
target: 'your https address',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})
3、使用vue-router4
1. 安装
npm install vue-router@latest
2. 创建路由文件
新建src/router目录并在其下面创建 index.js
import {createRouter, createWebHashHistory} from 'vue-router'
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/about',
name: 'about',
meta: {
title: '关于'
},
component: () => import(/* webpackChunkName: "about" */ '@/views/about')
},
{
path: '/home',
name: 'home',
meta: {
title: '主页'
},
component: () => import(/* webpackChunkName: "home" */ '@/views/home')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
router.beforeEach((to, from, next) => {
document.title = to.meta.title || 'Admin'
next()
// do something
})
router.afterEach((to, from) => {
// do something
})
export default router
3. 创建测试view
新建src/views目录，并新建about.vue和home.vue
// home.vue
<template>
<div>
home
</div>
</template>
// about.vue
<template>
<div>
about
</div>
</template>
4. 在 main.js中引入并使用
import {createApp} from 'vue'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
5. 修改app.vue
<template>
<div>
<button @click="$router.push('/home')">home</button>
<button @click="$router.push('/about')">about</button>
</div>
<router-view></router-view>
</template>
4、使用scss
这里为什么使用scss呢，因为UI我们会使用element-plus，所以搭配起来使用更合适
1. 安装
npm i sass sass-loader -D
2. 创建scss文件
新建src/assets/styles用于存放公共的样式文件，在里面新建一个common.scss, 随便写点样式
3. app.vue中引入common.scss
<template>
<div>
<button class="color" @click="$router.push('/home')">home</button>
<button @click="$router.push('/about')">about</button>
</div>
<router-view></router-view>
</template>
<style lang="scss">
@import '@/assets/styles/common.scss';
</style>
5、使用pinia
1. 安装
`npm i pinia --save`
2.使用
- 新建
src/store，在里面新建index.js
registerStore()，其作用是把整个项目的store都提前注册好，最后把所有的store实例挂到appStore透传出去.这样以后，只要我们在项目任何组件要使用pinia时，只要import appStore进来，取对应的store实例就行。
import userStore from './user'
const appStore = {}
export const registerStore = () => {
appStore.userStore = userStore()
}
export default appStore
- 新建
src/store/user.js
既然用上了vue3，那就肯定用ref或者reactive啊，这样可以让结构更加扁平化，个人推荐推荐使用这种方式
import {ref} from 'vue'
import {defineStore} from 'pinia'
const userStore = defineStore('USER_INFO', () => {
const token = ref('this is a token')
const userInfo = ref({
name: 'test',
age: 18,
work: 'coder'
})
function updateUserInfo(user) {
userInfo.value = user
}
return {token, userInfo, updateUserInfo}
})
export default userStore
- 全局注册
import {createApp} from 'vue'
import {createPinia} from 'pinia'
import {registerStore} from '@/store'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.use(createPinia())
registerStore()
app.mount('#app')
- 测试store
app.vue
<template>
<div>
<button class="color" @click="$router.push('/home')">home</button>
<button @click="$router.push('/about')">about</button>
</div>
<router-view></router-view>
</template>
<script setup>
import useUserStore from '@/store/user'
const userStore = useUserStore()
console.log(userStore)
</script>
<style lang="scss">
@import '@/assets/styles/common.scss';
</style>
6、使用axios
- 安装：
npm i axios qs --save
2、简单封装axios
新建src/service/request.js
import axios from 'axios'
import router from '@/router'
axios.defaults.baseURL = httpUrl
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = '你的token' || ''
axios.defaults.headers.post['Content-Type'] = 'application/json'
// 响应拦截
axios.interceptors.response.use(res => {
if (typeof res.data !== 'object') {
alert('服务端异常！')
return Promise.reject(res)
}
if (res.data.resultCode !== 200) {
const {message, resultCode} = res.data
message && console.error(message)
if (resultCode === 416) {
// 此处应该删除本地token，removeToken()
// 需要重新登录
router.replace({path: '/login'})
}
if (res.data.data && window.location.hash == '#/login') {
const token = res.data.data
// 缓存服务端token，setToken()
axios.defaults.headers['token'] = token
}
return Promise.reject(res)
}
return res.data
}, err => {
console.log(err)
})
export default axios
- 使用
import request from '@/service/request'
request({
url: 'xxx/com/xxxx',
method: 'get/post',
data/params: {},
....
})
7、Element-Plus
1、安装
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
2、按需加载
安装相关依赖：npm i vite-plugin-style-import --save-dev
修改vite配置
...
import styleImport from 'vite-plugin-style-import'
export default defineConfig({
...
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`;
},
ensureStyleFile: true // 忽略文件是否存在, 导入不存在的CSS文件时防止错误。
}
]
})
],
...
})
3、全局注册相关组件
新建src/plugins/element-plus.js
import {
ElButton, ElInput, ElLoading, ElContainer, ElAside, ElHeader, ElMain, ElProgress, ......
} from 'element-plus'
const components = [
ElButton, ElInput, ElContainer, ElAside, ElHeader, ElMain, ElProgress, ......
]
const plugins = [ElLoading, ElDialog, ElMessage]
const ElementPlus = {
install: (App) => {
components.forEach(component => App.component(component.name, component))
plugins.forEach(plugin => App.use(plugin))
// 全局配置
App.config.globalProperties.$element = {size: 'small', zIndex: 3000}
}
}
export default ElementPlus
在main.js中注册
import {createApp} from 'vue'
import {createPinia} from 'pinia'
import {registerStore} from '@/store'
import router from './router'
import ElementPlusComp from './plugins/element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.use(createPinia())
app.use(ElementPlusComp)
registerStore()
app.mount('#app')
8、 使用 commitizen 规范git提交
- 安装
npm install -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli commitlint-config-cz cz-customizable
复制代码
- 配置
package.json
{
...
"scripts": {
"commit:comment": "引导设置规范化的提交信息",
"commit":"git-cz",
},
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
},
...
}
- 根目录新增配置
commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional', 'cz'],
rules: {
'type-enum': [
2,
'always',
[
'feature', // 新功能（feature）
'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
'fix', // 修补bug
'ui', // 更新 ui
'docs', // 文档（documentation）
'style', // 格式（不影响代码运行的变动）
'perf', // 性能优化
'release', // 发布
'deploy', // 部署
'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
'test', // 增加测试
'chore', // 构建过程或辅助工具的变动
'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
'build', // 打包
],
],
// <type> 格式 小写
'type-case': [2, 'always', 'lower-case'],
// <type> 不能为空
'type-empty': [2, 'never'],
// <scope> 范围不能为空
'scope-empty': [2, 'never'],
// <scope> 范围格式
'scope-case': [0],
// <subject> 主要 message 不能为空
'subject-empty': [2, 'never'],
// <subject> 以什么为结束标志，禁用
'subject-full-stop': [0, 'never'],
// <subject> 格式，禁用
'subject-case': [0, 'never'],
// <body> 以空行开头
'body-leading-blank': [1, 'always'],
'header-max-length': [0, 'always', 72],
},
};
- 自定义提示则添加
.cz-config.js
module.exports = {
types: [
{value: 'feature', name: 'feature: 增加新功能'},
{value: 'bug', name: 'bug: 测试反馈bug列表中的bug号'},
{value: 'fix', name: 'fix: 修复bug'},
{value: 'ui', name: 'ui: 更新UI'},
{value: 'docs', name: 'docs: 文档变更'},
{value: 'style', name: 'style: 代码格式(不影响代码运行的变动)'},
{value: 'perf', name: 'perf: 性能优化'},
{value: 'refactor', name: 'refactor: 重构(既不是增加feature，也不是修复bug)'},
{value: 'release', name: 'release: 发布'},
{value: 'deploy', name: 'deploy: 部署'},
{value: 'test', name: 'test: 增加测试'},
{value: 'chore', name: 'chore: 构建过程或辅助工具的变动(更改配置文件)'},
{value: 'revert', name: 'revert: 回退'},
{value: 'build', name: 'build: 打包'}
],
// override the messages, defaults are as follows
messages: {
type: '请选择提交类型:',
customScope: '请输入您修改的范围(可选):',
subject: '请简要描述提交 message (必填):',
body: '请输入详细描述(可选，待优化去除，跳过即可):',
footer: '请输入要关闭的issue(待优化去除，跳过即可):',
confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
},
allowCustomScopes: true,
skipQuestions: ['body', 'footer'],
subjectLimit: 72
};
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献16条内容
所有评论(0)