526互联

Vite + Vue3 + Element-Plus

发布时间 2023-08-23 17:04:01作者: 别苦了颗脑袋

搭建 Vite 项目

注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用 NPM: 

npm create vite@latest

使用 Yarn:

yarn create vite

使用 PNPM:

pnpm create vite

输入项目名称后选择 vue 选择 ts 后 cd 进入目录 npm install 安装依赖后，npm run dev 运行。

配置Router

1、安装 Vue Router：

npm install vue-router@next

 2、在 src/router 目录下创建一个新的文件 index.ts，并在其中配置路由：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'index',
        component: () => import('../views/index.vue'),
    },
];

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

export default router;

3、在 src/main.ts 中导入并使用路由：

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

 

配置 Element-Plus

1、安装Element-Plus

npm install element-plus --save

2、在main.ts中引入element-plus

import ElementPlus from 'element-plus' // element-plus
import 'element-plus/dist/index.css' // element-plus

createApp(App).use(router).use(ElementPlus).mount('#app')

 

配置 Pinia

1、安装Pinia

npm install pinia

2、在 src/store 目录下创建一个新的文件index.ts，用于配置和创建 Pinia

import { defineStore } from 'pinia';

// 创建 Pinia Store
export const dataStore = defineStore('dataStore', {
    state: () => {
        return {
            msg: 'hello pinia',
            num: 0
        }
    },
    getters: {
        addNum(): number {
            return this.num + 10
        },
        addNum2() {
            return (number: number) => this.num + number
        }

    },
    actions: {
        actionFun() {
            console.log("我是store中actions的方法")
        }
    }

});

3、在 src/main.ts 中导入并使用 Pinia：

createApp(App).use(router).use(ElementPlus).use(pinia).mount('#app')