Vite+vue3+Ts+pinia开发（二：路由、pinia、UI库安装）

首先你完成了如下：
Vite+vue3+Ts+pinia实战（一：初始、基础安装、踩坑）

初始目录：

image.png

一、先装路由、pinia、UI库

npm install vue-router@4
npm install pinia
npm install element-plus --save

此时package.json

{
  "name": "cq-function",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.2.10",
    "pinia": "^2.0.16",
    "vue": "^3.2.37",
    "vue-router": "^4.1.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vue-tsc": "^0.38.4"
  }
}

二、新建并使用router、store、UI库

2.1 在src目录下新建router\index.ts如下：

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            //  路由懒加载
            component: () => import("../components/HelloWorld.vue"),
        },
    ],
});
export default router;

2.2 在src目录下新建store\index.ts如下：

// store/index.ts
import { defineStore } from "pinia";
// defineStore(key,options) 必须传递一个唯一key作为标识
export const useCounterStore = defineStore("counterStore", {
    state: () => ({
        counter: 0,
    }),
    actions: {
        // 方法 可以是异步 async addCounter(){}
        // 在这里也可以访问其他的store
        addCounter() {
            this.counter++;
        },
    },
    getters: {
        doubleCounter(state): number {
            // 可以使用this
            // return this.counter * 2
            // 在这里也可以访问其他的store
            return state.counter * 2;
        },
    },
});

2.3 修改App.vue

2.4 修改main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入饿了么UI库以及对应的样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入路由模块
import router from './router'
// 引入Store
import { createPinia } from 'pinia'
// 链式编程.use(router).use(createPinia()).use(ElementPlus)
createApp(App).use(router).use(createPinia()).use(ElementPlus).mount('#app')

2.5 修改HelloWorld.vue

至此：路由，pinia、ui库的安装以及使用完事。当然这里只是简单的讲怎么使用，更具体的参考官方文档。再第一篇里有官方文档链接，这里就不重复复述了。