lauym/vue3-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore:更新相关库版本，优化项目目录结构等

Browse Source
This commit is contained in:
LAPTOP-MI\Lau-mi 2024-06-12 17:47:25 +08:00
commit ae0ebde1e3
32 changed files with 566 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env.development Normal file
View File

@ -0,0 +1,3 @@
VITE_APP_TITLE = DEV标题
VITE_BASE_URL = /
VITE_API_BASE_URL = /api

3
.env.production Normal file
View File

@ -0,0 +1,3 @@
VITE_APP_TITLE = PROD标题
VITE_BASE_URL = ./
VITE_API_BASE_URL = /api

17
.eslintrc.cjs Normal file
View File

@ -0,0 +1,17 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
'vue/multi-word-component-names': 'off'
}
}

28
.gitignore vendored Normal file
View File

@ -0,0 +1,28 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
package-lock.json
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

8
.prettierrc.json Normal file
View File

@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}

8
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,8 @@
{
"recommendations": [
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}

60
README.md Normal file
View File

@ -0,0 +1,60 @@
# vue3-template
使用vite构建的vue3项目基础模板
vue3：3.4.27
vue-router：4.3.2
pinia：2.1.7
element-plus：2.7.5
store持久化存储：[pinia-plugin-persistedstate](https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html)：3.2.1
mitt：3.0.1
## Customize configuration
vite配置 [Vite Configuration Reference](https://vitejs.dev/config/).
## 安装依赖
```sh
npm install
```
### 运行dev服务
```sh
npm run dev
```
### 构建项目
```sh
npm run build
```
### [ESLint](https://eslint.org/)
```sh
npm run lint
```
## Git提交规范
- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
- `feat` 增加新功能
- `fix` 修复问题/BUG
- `style` 代码风格相关无影响运行结果的
- `perf` 优化/性能提升
- `refactor` 重构
- `revert` 撤销修改
- `test` 测试相关
- `docs` 文档/注释
- `chore` 依赖更新/脚手架配置修改等
- `workflow` 工作流改进
- `ci` 持续集成
- `types` 类型定义文件更改

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

10
jsconfig.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"],
"@v/*": ["./src/views/*"],
"@c/*": ["./src/components/*"]
}
},
"exclude": ["node_modules", "dist"]
}

41
package.json Normal file
View File

@ -0,0 +1,41 @@
{
"name": "vue3-template",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite --mode development",
"serve": "vite --mode development",
"build": "vite build --mode production",
"preview": "vite preview --mode development",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"axios": "1.7.2",
"element-plus": "2.7.5",
"mitt": "3.0.1",
"pinia": "2.1.7",
"pinia-plugin-persistedstate": "3.2.1",
"qs": "6.11.2",
"vue": "3.4.27",
"vue-router": "4.3.2"
},
"devDependencies": {
"@rushstack/eslint-patch": "~1.3.3",
"@vitejs/plugin-vue": "~4.5.2",
"@vue/eslint-config-prettier": "~8.0.0",
"eslint": "~8.49.0",
"eslint-plugin-vue": "~9.17.0",
"prettier": "~3.0.3",
"rollup-plugin-visualizer": "~5.12.0",
"sass": "~1.69.5",
"unplugin-auto-import": "~0.17.2",
"unplugin-vue-components": "~0.26.0",
"vite": "~5.2.0"
},
"engines": {
"node": ">=18.0.0",
"npm": ">=10.0.0"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

7
src/App.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup></script>
<template>
<RouterView />
</template>
<style scoped></style>

23
src/api/login.js Normal file
View File

@ -0,0 +1,23 @@
import http from '@/utils/request'
/** 登录接口
* @function login 登录接口
* @param {Object} data 登录数据
* @param {String} data.account 账号
* @param {String} data.password 密码
* */
export const login = (data) => {
return http({
url: '/login',
method: 'post',
data
})
}
export const test = () => {
return http({
url: '/test',
method: 'post',
data: { uname: 'tom' }
})
}

0
src/assets/base.css Normal file
View File

18
src/assets/reset.css Normal file
View File

@ -0,0 +1,18 @@
html,
body,
ul,
ol,
li,
img,
h1,
h2,
h3,
h4,
h5,
h6,
p,
div {
margin: 0;
padding: 0;
}

6
src/directives/index.js Normal file
View File

@ -0,0 +1,6 @@
import { setupPermissionDirective } from './perm'
const setupGlobDirectives = (app) => {
setupPermissionDirective(app)
}
export { setupGlobDirectives }

12
src/directives/perm.js Normal file
View File

@ -0,0 +1,12 @@
const setupPermissionDirective = (app) => {
app.directive('perm', {
mounted(el, binding) {
const { value } = binding
if (value.includes(1)) {
el.hidden = true
}
}
})
}
export { setupPermissionDirective }

5
src/locales/index.js Normal file
View File

@ -0,0 +1,5 @@
const setupLocales = (app) => {
// app.use(i18n)
}
export { setupLocales }

33
src/main.js Normal file
View File

@ -0,0 +1,33 @@
import './assets/reset.css'
import './assets/base.css'
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
//router
import { setupRouter } from './router'
// store
import { setupStore } from './store'
// 全局指令
import { setupGlobDirectives } from './directives'
// 多语言
import { setupLocales } from './locales'
const app = createApp(App)
const bootstrap = async () => {
// store
setupStore(app)
// 全局自定义指令
setupGlobDirectives(app)
// 多语言
setupLocales(app)
// router
setupRouter(app)
app.mount('#app')
}
bootstrap()

8
src/router/guard/index.js Normal file
View File

@ -0,0 +1,8 @@
export const useGuard = (router) => {
// 路由守卫
router.beforeEach(() => {})
router.afterEach((to) => {
document.title = import.meta.env.VITE_APP_TITLE + ` | ${to.meta.title || ''}`
})
}

20
src/router/index.js Normal file
View File

@ -0,0 +1,20 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useGuard } from './guard'
import routes from './routes'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: routes,
scrollBehavior: () => ({ left: 0, top: 0, behavior: 'smooth' })
})
// 路由守卫
useGuard(router)
// 挂载路由模块
const setupRouter = (app) => {
app.use(router)
}
export { router, setupRouter }

14
src/router/routes/basic.js Normal file
View File

@ -0,0 +1,14 @@
import { Home } from '@/views/Home'
const homeRoute = {
path: '/',
name: 'home',
meta: {
title: '首页'
},
component: Home
}
const basicRoute = [homeRoute]
export { basicRoute }

5
src/router/routes/index.js Normal file
View File

@ -0,0 +1,5 @@
import { basicRoute } from './basic'
const routes = [...basicRoute]
export default routes

0
src/router/routes/module/whiteList.js Normal file
View File

11
src/store/index.js Normal file
View File

@ -0,0 +1,11 @@
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const store = createPinia()
store.use(piniaPluginPersistedstate)
const setupStore = (app) => {
app.use(store)
}
export { store, setupStore }

17
src/store/module/user.js Normal file
View File

@ -0,0 +1,17 @@
import { defineStore } from 'pinia'
const useUserStore = defineStore('user', {
state: () => {
return {
userInfo: {
account: 'test'
}
}
},
// 持久化存储
persist: {
storage: window.localStorage
}
})
export { useUserStore }

23
src/utils/ls.js Normal file
View File

@ -0,0 +1,23 @@
const getItem = (itemName) => {
return window.localStorage.getItem(itemName)
}
const setItem = (itemName, itemValue) => {
return window.localStorage.setItem(itemName, itemValue)
}
const removeItem = (itemName) => {
return window.localStorage.removeItem(itemName)
}
const clear = () => {
return window.localStorage.clear()
}
export const getToken = () => getItem('token')
export const setToken = (token) => setItem('token', token)
export const clearToken = () => removeItem('token')
export const clearAll = () => clear()

5
src/utils/px2vw.scss Normal file
View File

@ -0,0 +1,5 @@
$vw: 1900px; // 设计图宽度
@function px2vw($px, $vw: $vw) {
@return calc(($px / $vw) * 100vw);
}

67
src/utils/request/index.js Normal file
View File

@ -0,0 +1,67 @@
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ElMessage, ElNotification } from 'element-plus'
const router = useRouter()
const API_URL = import.meta.env.VITE_API_BASE_URL
// console.log(API_URL)
const $http = axios.create({
baseURL: API_URL,
timeout: 30 * 1000,
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
// 表示跨域请求时是否需要使用凭证
withCredentials: false,
// 服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json'
})
// 请求拦截
$http.interceptors.request.use(
(config) => {
config.headers.Authorization = localStorage.getItem('token')
? `Bearer ${localStorage.getItem('token')}`
: 'NO TOKEN'
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截
$http.interceptors.response.use(
(res) => {
if (res.status === 200) {
const code = res.data.code || 0
// 根据返回的自定义code来做不同的处理
if (code === 401) {
ElMessage({
type: 'warning',
message: '登录已过期 或 未登录，请重新登录',
duration: 2000
})
router.push({ path: '/login' })
}
} else {
ElNotification({
title: '错误',
message: res.data.message,
type: 'error',
duration: 2000
})
}
return res.data
},
(error) => {
return Promise.reject(error)
}
)
export default $http

3
src/views/Home/index.js Normal file
View File

@ -0,0 +1,3 @@
import Home from './src/Home.vue'
export { Home }

17
src/views/Home/src/Home.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup>
import { test } from '@/api/login'
test()
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
</script>
<template>
<div class="home">home</div>
</template>
<style lang="scss" scoped></style>

81
vite.config.js Normal file
View File

@ -0,0 +1,81 @@
import { defineConfig, loadEnv } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import process from 'node:process'
import vue from '@vitejs/plugin-vue'
// 按需导入 Element-plus 模块
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 打包文件可视化分析
import { visualizer } from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
return {
base: loadEnv(mode, process.cwd()).VITE_BASE_URL,
define: {
// 启用生产环境构建下激活不匹配的详细警告
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true' // vue 3.4+
},
plugins: [
vue(),
// Element-plus 按需导入模块
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
}),
visualizer({
open: true,
filename: 'stats.html',
gzipSize: true,
brotliSize: true
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'@v': fileURLToPath(new URL('./src/views', import.meta.url)),
'@c': fileURLToPath(new URL('./src/components', import.meta.url))
}
},
server: {
host: '0.0.0.0',
port: 3002,
proxy: {
/* '/api': {
target: 'http://localhost:8081/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
} */
}
},
esbuild: {
drop: ['console', 'debugger'] //去除生产环境下的console.xxxx和debugger
},
build: {
// chunkSize 限制和警告
chunkSizeWarningLimit: 500 * 1024, // 设置为500KB，超过此大小的chunk会发出警告
// rollup配置
rollupOptions: {
output: {
entryFileNames: 'js/[name]-[hash].js',
chunkFileNames: 'js/[name]-chunk-[hash].js',
assetFileNames: (assetInfo) => {
if (assetInfo.name.endsWith('.css')) {
return 'css/[name]-[hash].css'
}
const imgExts = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.svg', '.ico']
if (imgExts.some((ext) => assetInfo.name.endsWith(ext))) {
return 'img/[name]-[hash].[ext]'
}
return 'assets/[name]-[hash].[ext]'
}
}
}
}
}
})