vue3-project-template 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.env ADDED
File without changes
package/.env.dev ADDED
@@ -0,0 +1,2 @@
1
+ VITE_HTTP_BASE_URL=http://192.168.1.191:8088
2
+ # VITE_APP_USERINFO_ACCOUNT=P00024071
File without changes
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
package/README.md ADDED
@@ -0,0 +1,5 @@
1
+ # Vue 3 + TypeScript + Vite
2
+
3
+ This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4
+
5
+ Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + Vue + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.js"></script>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "name": "vue3-project-template",
3
+ "version": "1.0.0",
4
+ "type": "module",
5
+ "description": "Vue 3 project template",
6
+ "author": "zhanghao",
7
+ "license": "MIT",
8
+ "keywords": [
9
+ "vue3",
10
+ "component",
11
+ "library",
12
+ "project",
13
+ "template"
14
+ ],
15
+ "scripts": {
16
+ "dev": "vite",
17
+ "build": "vite build",
18
+ "preview": "vite preview"
19
+ },
20
+ "dependencies": {
21
+ "@vitejs/plugin-vue-jsx": "^5.0.1",
22
+ "axios": "^1.10.0",
23
+ "element-plus": "^2.10.3",
24
+ "pinia": "^3.0.3",
25
+ "pinia-plugin-persistedstate": "^4.4.1",
26
+ "vue": "^3.5.17",
27
+ "vue-router": "^4.5.1"
28
+ },
29
+ "devDependencies": {
30
+ "@vitejs/plugin-legacy": "^7.0.0",
31
+ "@vitejs/plugin-vue": "^6.0.0",
32
+ "@vue/tsconfig": "^0.7.0",
33
+ "sass": "^1.89.2",
34
+ "unplugin-auto-import": "^19.3.0",
35
+ "unplugin-vue-components": "^28.8.0",
36
+ "vite": "^7.0.0"
37
+ }
38
+ }
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/src/App.vue ADDED
@@ -0,0 +1,5 @@
1
+ <template>
2
+ <div>
3
+ <RouterView />
4
+ </div>
5
+ </template>
@@ -0,0 +1,8 @@
1
+ // api/user.ts
2
+
3
+ import {post } from '@/utils/request';
4
+ const url = ''
5
+ //登录
6
+ export const login = (params) => {
7
+ return post(url, params)
8
+ }
@@ -0,0 +1,25 @@
1
+ @forward "element-plus/theme-chalk/src/common/var.scss" with (
2
+ $colors: (
3
+ "primary": (//主题色
4
+ "base": #fd33c7,
5
+ ),
6
+ "success": (//成功色
7
+ "base": #67C23A,
8
+ ),
9
+ "warning": (//警告色
10
+ "base": #E6A23C,
11
+ ),
12
+ "danger": (//危险色
13
+ "base": #F56C6C,
14
+ ),
15
+ "error": (//错误色
16
+ "base": #F56C6C,
17
+ ),
18
+ "info": (//信息色
19
+ "base": #909399,
20
+ ),
21
+ ),
22
+ $border-color: (
23
+ '': #f00000,
24
+ )
25
+ );
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
package/src/main.js ADDED
@@ -0,0 +1,11 @@
1
+ import { createApp } from 'vue'
2
+ import './style.css'
3
+ import App from './App.vue'
4
+ import { installStore } from './stores'
5
+ import { installRouter } from './router'
6
+
7
+ const app = createApp(App)
8
+ installStore(app)
9
+ installRouter(app)
10
+
11
+ app.mount('#app')
@@ -0,0 +1,16 @@
1
+ export const setupRouterGuard = (router) => {
2
+ // const authStore = useAuthStore()
3
+
4
+ router.beforeEach(async (to, from, next) => {
5
+ // if (!authStore.isLogin) {
6
+ // // 未登录返回登录页
7
+ // if (to.path.includes('login')) next()
8
+ // if (!to?.name?.includes('login')) {
9
+ // next({ path: '/login' })
10
+ // }
11
+ // return false
12
+ // }
13
+
14
+ next()
15
+ })
16
+ }
@@ -0,0 +1,19 @@
1
+ import { createWebHashHistory, createRouter } from 'vue-router'
2
+ import routes from './routes'
3
+ import { setupRouterGuard } from './guard'
4
+ const router = createRouter({
5
+ history: createWebHashHistory(),
6
+ routes,
7
+ })
8
+ // 安装vue路由
9
+ export async function installRouter(app) {
10
+ // 添加路由守卫
11
+ setupRouterGuard(router)
12
+
13
+ app.use(router)
14
+
15
+ // 初始化路由和路由守卫完成解析
16
+ await router.isReady() // https://router.vuejs.org/zh/api/interfaces/Router.html#Methods-isReady
17
+
18
+ console.log('install router success.')
19
+ }
@@ -0,0 +1,10 @@
1
+ export default [
2
+ {
3
+ path: '/',
4
+ component: () => import('@/views/home/index.vue')
5
+ },
6
+ {
7
+ path: '/about',
8
+ component: () => import('@/views/about/index.vue')
9
+ },
10
+ ]
@@ -0,0 +1,10 @@
1
+ import { createPinia } from 'pinia'
2
+ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
3
+
4
+
5
+ export const installStore = (app) => {
6
+ const pinia = createPinia()
7
+ pinia.use(piniaPluginPersistedstate)
8
+ app.use(pinia)
9
+
10
+ }
@@ -0,0 +1,13 @@
1
+ import { defineStore } from 'pinia';
2
+
3
+ export const useUserStore = defineStore('user', {
4
+ state: () => ({
5
+ token: '123456789'
6
+ }),
7
+ actions: {
8
+ setToken(token) {
9
+ this.token = token
10
+ }
11
+ },
12
+ persist: true
13
+ });
package/src/style.css ADDED
@@ -0,0 +1,79 @@
1
+ :root {
2
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ button {
39
+ border-radius: 8px;
40
+ border: 1px solid transparent;
41
+ padding: 0.6em 1.2em;
42
+ font-size: 1em;
43
+ font-weight: 500;
44
+ font-family: inherit;
45
+ background-color: #1a1a1a;
46
+ cursor: pointer;
47
+ transition: border-color 0.25s;
48
+ }
49
+ button:hover {
50
+ border-color: #646cff;
51
+ }
52
+ button:focus,
53
+ button:focus-visible {
54
+ outline: 4px auto -webkit-focus-ring-color;
55
+ }
56
+
57
+ .card {
58
+ padding: 2em;
59
+ }
60
+
61
+ #app {
62
+ max-width: 1280px;
63
+ margin: 0 auto;
64
+ padding: 2rem;
65
+ text-align: center;
66
+ }
67
+
68
+ @media (prefers-color-scheme: light) {
69
+ :root {
70
+ color: #213547;
71
+ background-color: #ffffff;
72
+ }
73
+ a:hover {
74
+ color: #747bff;
75
+ }
76
+ button {
77
+ background-color: #f9f9f9;
78
+ }
79
+ }
@@ -0,0 +1,97 @@
1
+ // utils/request.ts
2
+
3
+ import axios from "axios";
4
+ const env = import.meta.env
5
+ import { ElMessage } from 'element-plus'
6
+ //创建一个axios实例
7
+ const request = axios.create({
8
+ baseURL: env.MODE != 'dev' ? env.VITE_HTTP_BASE_URL : '/api',//设置请求的基地址
9
+ timeout: 20000,
10
+ headers:{
11
+ 'Content-Type': 'application/json',
12
+ }
13
+
14
+ });
15
+
16
+
17
+ // 添加请求拦截器
18
+ request.interceptors.request.use(
19
+ function (config) {
20
+ const userStore = useUserStore()
21
+ if (userStore.token) {
22
+ config.headers['Authorization'] = `Bearer ${userStore.token}`
23
+ }
24
+ return config;
25
+ },
26
+ function (error) {
27
+ // 对请求错误做些什么
28
+ return Promise.reject(error);
29
+ }
30
+ );
31
+
32
+ // 添加响应拦截器
33
+ request.interceptors.response.use(
34
+ function (response) {
35
+ // 对响应数据做点什么
36
+ // console.log('我接收到响应数据啦------')
37
+ // console.log(response, '响应配置')
38
+ if (response.status === 200) {
39
+ return Promise.resolve(response.data)
40
+ } else {
41
+ ElMessage.error(response.message || 'Error')
42
+ return Promise.reject(response)
43
+ }
44
+ },
45
+ function (error) {
46
+ // 对响应错误做点什么
47
+ ElMessage.error(error.message || '网络错误')
48
+ return Promise.reject(error);
49
+ }
50
+ );
51
+
52
+
53
+ /*
54
+ * get请求:从服务器端获取数据
55
+ * url:请求地址
56
+ * params:参数
57
+ * */
58
+ export function get(url, params = {},config={}) {
59
+ return new Promise((resolve, reject) => {
60
+ request({
61
+ url: url,
62
+ method: 'get',
63
+ params: params,
64
+ ...config
65
+ }).then(response => {
66
+ resolve(response);
67
+ }).catch(error => {
68
+ reject(error);
69
+ });
70
+ });
71
+ }
72
+
73
+ /*
74
+ * post请求:向服务器端提交数据
75
+ * url:请求地址
76
+ * params:参数
77
+ * */
78
+ export function post(url, params = {},config ={}) {
79
+ return new Promise((resolve, reject) => {
80
+ request({
81
+ url: url,
82
+ method: 'post',
83
+ data: params,
84
+ ...config
85
+ }).then(response => {
86
+ resolve(response);
87
+ }).catch(error => {
88
+ reject(error);
89
+ })
90
+ });
91
+ }
92
+
93
+ // 对外暴露请求方法
94
+ export default {
95
+ get,
96
+ post
97
+ }
@@ -0,0 +1,12 @@
1
+ <script setup>
2
+ </script>
3
+
4
+ <template>
5
+ <div>这是关于页面</div>
6
+ <router-link to="/">跳转首页</router-link>
7
+ </template>
8
+
9
+
10
+ <style lang="scss" scoped>
11
+
12
+ </style>
@@ -0,0 +1,38 @@
1
+ <script setup>
2
+ const userStore = useUserStore(); // 无需手动导入
3
+ </script>
4
+
5
+ <template>
6
+ <div>
7
+ 这是首页
8
+ </div>
9
+
10
+ <div>
11
+ <router-link to="/about">跳转关于页面</router-link>
12
+
13
+ </div>
14
+ <el-button>Default</el-button>
15
+ <el-button type="primary">Primary</el-button>
16
+ <el-button type="success">Success</el-button>
17
+ <el-button type="info">Info</el-button>
18
+ <el-button type="warning">Warning</el-button>
19
+ <el-button type="danger">Danger</el-button>
20
+ </template>
21
+
22
+
23
+ <style lang="scss" scoped>
24
+ .demo-border .text {
25
+ width: 15%;
26
+ }
27
+ .demo-border .line {
28
+ width: 70%;
29
+ }
30
+ .demo-border .line div {
31
+ width: 100%;
32
+ height: 0;
33
+ border-top: 1px solid var(--el-border-color);
34
+ }
35
+ .demo-border .line .dashed {
36
+ border-top: 2px dashed var(--el-border-color);
37
+ }
38
+ </style>
package/vite.config.js ADDED
@@ -0,0 +1,89 @@
1
+ import { fileURLToPath, URL } from 'node:url'
2
+
3
+ import { defineConfig, loadEnv } from 'vite'
4
+ import vue from '@vitejs/plugin-vue'
5
+ import AutoImport from 'unplugin-auto-import/vite'
6
+ import Components from 'unplugin-vue-components/vite'
7
+ import vueJsx from '@vitejs/plugin-vue-jsx'
8
+ import legacy from '@vitejs/plugin-legacy'
9
+ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
10
+ // https://vite.dev/config/
11
+ export default defineConfig(({ mode }) => {
12
+ //设置第三个参数为 '' 来加载所有环境变量,而不管是否有`VITE_` 前缀。
13
+ const env = loadEnv(mode, process.cwd(), '')
14
+ return {
15
+ base: './',
16
+ plugins: [
17
+ vue(),
18
+ vueJsx(),
19
+ AutoImport({
20
+ resolvers: [ElementPlusResolver(
21
+ {
22
+ importStyle: "sass",
23
+ }
24
+ )],
25
+ imports: ['vue', 'vue-router', "pinia"],
26
+ dirs: [
27
+ // 自动导入 `src/composables` 下的组合式函数
28
+ "./src/compponents/**",
29
+ // 自动导入 `src/utils` 下的工具函数(但避免和第三方库冲突)
30
+ "./src/utils/**",
31
+ // 自动导入 `src/stores` 下的 Pinia store
32
+ "./src/stores/**",
33
+ ],
34
+ // **生成自动导入的声明文件**(解决 TypeScript 类型提示)
35
+ dts: "./auto-imports.d.ts",
36
+ // **解决 ESLint 报错**(让 ESLint 知道这些是自动导入的)
37
+
38
+ }),
39
+ Components({
40
+ resolvers: [ElementPlusResolver(
41
+ {
42
+ importStyle: "sass",
43
+ }
44
+ )],// 解析器:如果需要自动导入 UI 库(如 Element Plus、Ant Design Vue)
45
+ dts: true,
46
+ directoryAsNamespace: true,//例如src/components/ui/Button.vue-》UiButton
47
+ }),
48
+ legacy({
49
+ targets: ['chrome 74'],
50
+ renderModernChunks: false
51
+ })
52
+ ],
53
+ resolve: {
54
+ alias: {
55
+ '@': fileURLToPath(new URL('./src', import.meta.url))
56
+ },
57
+ },
58
+ server: {
59
+ host: '0.0.0.0',
60
+ port: 5174,
61
+ proxy: {
62
+ '/api': {
63
+ target: env.VITE_HTTP_BASE_URL,
64
+ changeOrigin: true,
65
+ rewrite: (path) => path.replace(/^\/api/, '')
66
+ }
67
+ }
68
+ },
69
+ build: {
70
+ // rollupOptions: {
71
+ // external: ['wx'] // 将 wx 视为外部依赖
72
+ // },
73
+ terserOptions: {
74
+ compress: {
75
+ drop_console: false,//移除 console.log
76
+ drop_debugger: true// 移除 debugger
77
+ }
78
+ }
79
+ },
80
+ css: {
81
+ preprocessorOptions: {
82
+ scss: {
83
+ additionalData: `@use "@/assets/style/mixin.scss" as *;`
84
+ }
85
+ }
86
+ }
87
+ }
88
+
89
+ })