🔵Vue博客[3](后台初始化搭建)

本文最后更新于:2022年5月3日 下午

初始化项目

pnpm create vite创建vue3项目,选择vue-ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
pnpm create vite
Packages: +6
++++++
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: xxxxxxxxxxxxxxxxxxxx
Virtual store is at: node_modules/.pnpm

xxxxxxxxxxxxxxxxxxxxxxx:
+ create-vite 2.9.2

Progress: resolved 6, reused 6, downloaded 0, added 6, done
√ Project name: ... vue3BlogBackstage
√ Package name: ... vue3blogbackstage
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in F:\xxxxx\vue3BlogBackstage...

Done. Now run:

cd vue3BlogBackstage
pnpm install
pnpm run dev

依赖

1
2
3
4
5
6
7
8
pnpm i pinia
# pinia持久化
pnpm i pinia-plugin-persist
pnpm i vue-router
pnpm i sass
pnpm i axios
# 配置路径别名所需
pnpm i @types/node -D

ui框架

使用element-plus

1
2
3
4
5
6
pnpm i element-plus
# element-plus
pnpm i @element-plus/icons-vue
# ui图标
pnpm i unplugin-vue-components unplugin-auto-import -D
# 按需导入ui组件

vite.config.ts

路径别名

tsconfig.json文件添加

1
2
3
4
5
6
7
8
9
10
11
12
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
// ...
}
}

vite.config.ts文件添加

1
2
3
4
5
6
7
8
9
10
11
import { resolve } from 'path'

export default defineConfig({
// ...
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
}
// ...
})

自动按需导入

vite.config.ts文件添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})

项目目录

main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { createApp } from 'vue'
import { router } from '@/router'
import App from '@/App.vue'
import pinia from '@/store'
import ElementPlus from 'element-plus'
import '@element-plus/icons-vue'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.use(pinia)

app.mount('#app')

routes

新建index.ts

1
2
3
4
5
6
7
8
9
import { createRouter, createWebHistory } from 'vue-router'

const routes = []

export const router = createRouter({
history: createWebHistory(),
routes
})

store

新建index.ts

1
2
3
4
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

export default createPinia().use(piniaPluginPersist)

utils

新建request.ts封装axios请求

1
2
3
4
5
6
7
8
9
10
11
12
13
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8080'

const ApiGet = (url: string, params?: any, config?: any) => {
return axios.get(url, { params, ...config })
}

const ApiPost = (url: string, data?: any, config?: any) => {
return axios.post(url, data, config)
}

export { ApiGet, ApiPost }

目录如下


🔵Vue博客[3](后台初始化搭建)
https://qingshaner.com/Vue博客[3](后台初始化搭建)/
作者
清山
发布于
2022年4月25日
许可协议