项目由 Vue3 + Pina + JavaScript + Ant Design Vue
创建项目
1
2
3
4
5
| # 直接创建
npm create vite@latest my-vue-app -- --template vue
# 如果要创建ts或者自定义配置的项目就用这个
npm create vite
|
引入Ant Design Vue
mian.js
删掉自带的style.css文件
1
2
3
4
5
6
7
8
| import {createApp} from 'vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import App from './App.vue'
const app = createApp(App);
app.use(Antd)
app.mount('#app');
|
安装router
1
| npm install vue-router@4
|
创建src/router/index.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| import { createWebHistory, createRouter } from 'vue-router'
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login'),
hidden: true
},
]
const router = createRouter({
history: createWebHistory(),
routes: constantRoutes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
},
});
export default router;
|
配置开发环境
编辑vite.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ mode, command }) => {
return {
plugins: [vue()],
resolve: {
alias: {
'~': path.resolve(__dirname, './'),
'@': path.resolve(__dirname, './src')
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}
}
})
|
项目根目录创建环境配置文件
.env.development
.env.prod
1
2
3
4
5
6
7
8
| # 页面标题
VITE_APP_TITLE = 若依管理系统
# 开发环境配置
VITE_APP_ENV = 'development'
# 若依管理系统/开发环境
VITE_APP_BASE_API = '/dev-api'
|
安装sass
1
2
3
4
5
| npm install -D sass
# 直接使用就可以
<style lang="scss" scoped>
</style>
|
全局样式
创建src/style/index.scss文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| @import './demo.scss';
html {
height: 100vh;
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0;
}
#app {
height: 100vh;
}
|
创建src/style/demo.scss文件
导入scss,编辑main.js
1
| import './style/index.scss'
|
Ant Design Vue Icon的使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <template>
<a-form class="login-from">
<a-form-item size>
<a-input placeholder="请输入用户名" size="large">
<template #prefix>
<UserOutlined/>
</template>
</a-input>
</a-form-item>
</a-form>
</template>
<script setup>
import {UserOutlined, LockOutlined} from '@ant-design/icons-vue'
</script>
|
安装Axios
创建 src/utils/request.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| import axios from 'axios'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 10000
})
service.interceptors.request.use(config => {
return config
}, error => {
console.log(error)
Promise.reject(error)
})
service.interceptors.response.use(res => {
const code = res.data.code || 200;
if (code === 401) {
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
} else if (code === 500) {
ElMessage({ message: msg, type: 'error' })
return Promise.reject(new Error(msg))
} else if (code === 601) {
ElMessage({ message: msg, type: 'warning' })
return Promise.reject(new Error(msg))
} else if (code !== 200) {
ElNotification.error({ title: msg })
return Promise.reject('error')
} else {
return Promise.resolve(res.data)
}
},
error => {
console.log('err' + error)
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
return Promise.reject(error)
}
)
export default service
|
main.js
1
| import router from './router'
|
