实战vue3 后台 一 （基础篇）

1 环境准备。

1.1 node 安装，设置镜像，创建工程项目。

安装node    (官网下载安装，设置镜像)
cmd > npm config set registry http://registry.npm.taobao.org/
npm init @vitejs/app xxx
然后按提示操作。

1.2 一些配置设置.

npm install @types/node --save-dev

import path from "path";

//vite.config.js
export default defineConfig({
  // ....
  resolve: {
    alias: {
      
      "@": path.resolve(__dirname, "src"),
      "com": path.resolve(__dirname, "src/components")
    }
  },
 // ....
 
//tsconfig.js
{
  "compilerOptions": {
    //...
    "paths": {
      "@":["./src"]
    }

  },

2 项目插件安装

2.1 vue-router 安装

//step1
npm i vue-router@next

//step2  router/index.ts
import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";

const routes:Array<RouteRecordRaw> = [
     {
        path: '/a',
        name: 'a',
        component:() => import('../page_demo/A.vue'),
     },
    {
        path: '/b',
        name: 'b',
        component:() => import('../page_demo/B.vue'),
    },
]

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

//step3 main.ts

import router from "./router"
createApp(App).use(router).mount('#app')

//简单使用
  <router-link to="/a">a.Vue</router-link>  &nbsp; &nbsp;
  <router-link to="/b">b.Vue</router-link> 
   <hr/>
  <router-view></router-view>
    

2.2 vuex 安装及使用

//step1 安装
npm i vuex@next

//step2 配置 store

//2.1  store/modules/demo.ts

export interface iDemoState {
    count:number,
    name:string,
}

export const demoStore = {
    namespaced: true,

    state:{
        count:111,
        name:'hello demo'
    },
    mutations:{
        incr(state:iDemoState) {
            state.count ++;
        }
    },
    getters:{
        countDouble: (state:iDemo) => {
            return state.count * 2;
        },
    },
}

// 2.2 store/index.ts

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

import {demoStore, iDemoState} from  "@/store/modules/demo.ts"

// 为 store state 声明类型
export interface RootState {
    demoStore:iDemoState
}

// 定义 injection key
export const key: InjectionKey<Store<RootState>> = Symbol()

export const store = createStore<RootState>({
  modules:{
    demoStore
  }
})

// 定义自己的 `useStore` 组合式函数
export function useStore () {
    return baseUseStore(key)
 }
 
 // 2.3 main.ts
//....
import {store, key} from '@/store';
createApp(App).use(store, key).mount('#app')

//step3 简单使用。

<template>A
 <br/>
 {{store.state.demoStore.name}}
 <br/>
 {{store.getters['demoStore/countDouble']}}

</template>

<script setup lang="ts">

import { useStore } from '@/store'

const store = useStore();
console.log("@@@",store)
</script>

2.3 安装 sass, 和element-plus

npm i sass-loader sass -D
npm install element-plus --save

//element 按需导入。
https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5

全局使用 icon 
npm install @element-plus/icons

//main.ts
import * as ElIcons from '@element-plus/icons'
const app =  createApp(App);

for (const name in ElIcons){
	app.component(name,(ElIcons as any)[name])
}

3 代码例子下载。

示例代码下载