后台应用 实践笔记

说明

练习搭建一个简单的后台应用

技术选型

技术栈	官网/文档	笔记	项目案例/备注
	官网中文	-	前端工具链
	官网中文	-	前端 JavaScript 框架
	官网中文	-	Vue.js 路由
	官网中文	-	Vue.js 状态管理库
	官网中文	-	基于 promise 的网络请求库
	官网中文	-	Vue.js 组件库

初期安装及配置

构建一个 Vite + Vue 项目

# npm 7+, extra double-dash is needed:
npm create vite@latest admin-vue-app -- --template vue-ts

cd admin-vue-app
npm install
npm run dev

安装其他技术栈

npm install vue-router@4  # 安装 Vue Router

npm install pinia  # 安装 Pinia

npm install axios  # 安装 Axios

npm install element-plus --save  # 安装 Element Plus

在 Vite 中配置路径别名

修改 tsconfig.json 可让 VS Code 认识 @ 符号

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

安装 node 的类型声明文件

npm i @types/node -D

修改 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 这里使用 nodejs 的模块，可能会报错，需要安装 node 的类型声明文件
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //设置别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

新建初始布局组件

新建 src/layout/index.vue 布局组件

<template>
    <h1>@/layout/index.vue</h1>
    <router-view />
</template>
<script lang="ts" setup></script>
<style scoped></style>

新建 src/views/index.vue 首页组件

<template>
  <h1>@/views/index.vue</h1>
</template>
<script setup lang="ts"></script>
<style scoped></style>

新建 src/views/login.vue 登录组件

<template>
  <h1>@/views/login.vue</h1>
</template>
<script setup lang="ts"></script>
<style scoped></style>

Vue Router 加入项目

新建 src/router/routes.ts 路由映射到组件

import Layout from '@/layout/index.vue'

const routes = [
    {
        path: '/',
        redirect: '/index',
        component: Layout,
        children: [
            {
                path: '/index',
                component: () => import('@/views/index.vue'),
            }
        ]
    },
    {
        path: '/login',
        component: () => import('@/views/login.vue'),
    }
]

export default routes

新建 src/router/index.ts 创建路由实例

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from '@/router/routes'

// 创建路由实例并传递 `routes` 配置
export const router = createRouter({
    // Hash 模式
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

修改 src/main.ts 使路由支持整个应用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { router } from './router'

// createApp(App).mount('#app')
const app = createApp(App)
app.use(router)
app.mount('#app')

修改 src/App.vue 修改应用入口添加路由出口

<template>
  <router-view />
</template>
<script setup lang="ts"></script>
<style scoped></style>

Pinia 加入项目

修改 src/main.ts 创建一个 pinia 实例 (根 store) 并将其传递给应用

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'
import { router } from './router'

// createApp(App).mount('#app')
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(router)
app.mount('#app')

（Pinia 基础示例）新建 src/stores/counter.ts 先创建一个 Store

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('Counter', () => {

    // sate
    const count = ref(0)


    // getters
    const doubleCount = computed(() => count.value * 2)


    // actions
    function reset() {
        count.value = 0
    }
    function randomizeCounter() {
        count.value = Math.round(100 * Math.random())
    }
    const increment = () => {
        count.value++
    }
    async function refresh() {
        increment()
        randomizeCounter()
    }
    

    return {
        // sate
        count,
        // getters
        doubleCount,
        // actions
        reset, randomizeCounter, increment, refresh,
    }
})

（Pinia 基础示例）在 src/views/index.vue 组件中使用该 store

<template>
    <h1>@/views/index.vue</h1>
    <div>counter.count={{ counter.count }}</div>
    <div>counter.doubleCount = computed: {{ counter.doubleCount }}</div>
    <button @click="counter.increment">counter.increment()</button>
    <button @click="counter.randomizeCounter()">counter.randomizeCounter()</button>
    <button @click="counter.reset()">counter.reset()</button>
</template>
<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.count++
counter.increment()
</script>
<style scoped></style>

Element Plus 加入项目

修改 src/main.ts 完整引入 Element Plus

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'  //[!code ++]
import 'element-plus/dist/index.css'  //[!code ++]
import App from './App.vue'
import { router } from './router' 

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
// 在引入 ElementPlus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。
// size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。
app.use(ElementPlus, { size: 'small', zIndex: 3000 })  //[!code ++]
app.use(router)
app.mount('#app')

Volar 支持
如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

修改 src/layout/index.vue 使用 Container 布局容器

<template>
    <el-container>
        <el-header><Header /></el-header>
        <el-container>
            <el-aside><Aside /></el-aside>
            <el-main><router-view /></el-main>
        </el-container>
    </el-container>
</template>
<script lang="ts" setup>
import Header from '@/layout/Header.vue'
import Aside from '@/layout/Aside.vue'
</script>
<style scoped></style>

最后也可以直接使用 Element Plus 提供的 Vite 模板，快速搭建项目 https://github.com/element-plus/element-plus-vite-starter
预览：https://vite-starter.element-plus.org

# 
git clone https://github.com/element-plus/element-plus-vite-starter
cd element-plus-vite-starter
npm i
npm run dev

待续 ……