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

初始化项目

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

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

依赖

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

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文件添加

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
    // ...
  }
}

vite.config.ts文件添加

import { resolve } from 'path'

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

自动按需导入

vite.config.ts文件添加

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()],
    }),
  ],
})

Element-Plus官网

项目目录

main.ts

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

import { createRouter, createWebHistory } from 'vue-router'

const routes = []

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

store

新建index.ts

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

export default createPinia().use(piniaPluginPersist)

utils

新建request.ts封装axios请求

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 }

目录如下