vite创建Vue3项目:router+pinia+element-plus or antd + sass + ts

创建一个Vue3项目

npm create vite@latest 'project-name'

cd project-name-folder

npm install

npm run dev

安装常用的包

sass

npm install sass

router

npm install vue-router@4

1. 新建router目录

2. router下创建index.ts

//引入路由对象
import { createRouter,createWebHistory } from 'vue-router'
import Welcome from '../pages/welcome/Welcome.vue'
import MainChat from '../pages/main-chat/MainChat.vue'
​
const router = createRouter({
    history:createWebHistory(import.meta.env.BASE_URL),
    routes:[
        {
            name:'welcome',
            path:'/welcome',
            component:Welcome
        },
        {
            name:'main',
            path:'/main',
            component:MainChat
        },
        {
            path:'/',
            redirect:'/main'
        }
    ]
})
​
export default router

1. 在main中引用

import router from './router';
​
const app = createApp(App)
​
app.use(router).mount("#app")

1. 使用路由

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

Antd

npm i --save ant-design-vue@4.x

1. main.tx中使用

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
app.use(Antd).mount("#app")

Element-plus

npm install element-plus --save

1. main.ts中引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
​
app.use(ElementPlus)
app.mount('#app')

pinia

npm install pinias

pinia持久化

npm i pinia-plugin-persistedstate

1. 新建store目录

2. store下新建 index.ts

import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //引入持久化插件
​
 
// 创建
const pinia = createPinia();
​
pinia.use(piniaPluginPersistedstate)
​
// 导出
export default pinia;

1. main.ts中使用pinia

import pinia from './store/index';
const app = createApp(App)
​
app.use(pinia)
.mount("#app")

1. 建立具体的store

import { defineStore } from "pinia";
​
export const useUserStore = defineStore("user", {
    
    //状态
    state: () => {
        return {
​
        };
    },
    //获取器
    getters: {
​
    },
    //修改方法
    actions: {
​
    },
    persist:{
        key:'user',
        storage:localStorage,
        //paths:['user'] 需要持久化的状态
    }
});