Vue3+elementPlus+Vite项目

[1. 项目创建](#1. 项目创建)
- [1.1. 使用pnpm创建项目](#1.1. 使用pnpm创建项目)
- [1.2. 启动项目](#1.2. 启动项目)
- [1.3. 配置项目`url`映射](#1.3. 配置项目url映射)
- [1.4. 安装依赖包](#1.4. 安装依赖包)
[2. vue3路由](#2. vue3路由)
- [2.1. 添加路由配置文件](#2.1. 添加路由配置文件)
- [2.2. 注册路由](#2.2. 注册路由)
[3. 注册elemet-plus](#3. 注册elemet-plus)
[4. Pinia](#4. Pinia)

1. 项目创建

1.1. 使用pnpm创建项目

shell 复制代码

> pnpm create vite --template=vue-ts
◇  Project name:
│  gcs # 输入项目名称

# 是否使用 npm 进行安装并立即启动
◆  Install with npm and start now?
│  ○ Yes / ● No
└

1.2. 启动项目

shell 复制代码

> cd gcs 
> pnpm install
> pnpm dev

1.3. 配置项目`url`映射

json 复制代码

// 修改tsconfig.app.json
{
    // ...
    "compilerOptions": {
				// ...
        "baseUrl": ".",          // 添加跟路径 .
        "paths": {							// url映射
            "@/*": ["src/*"]
        }
    },
	// ...
}

// 修改vite.config.ts
export default defineConfig({
    // ...
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
    },
    // ...
});

1.4. 安装依赖包

shell 复制代码

> pnpm install element-plus
> pnpm install @element-plus/icons-vue
> pnpm install vue-router

2. vue3路由

2.1. 添加路由配置文件

添加router目录，并在该目录项添加index.ts

路径：../src/route/index.ts

ts 复制代码

/*
../srt/route/index.ts
*/  
import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        path: "/",
        name: "user_info",
        component: import("../sys/UserInfo.vue"),
    },
];

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

export default router;

2.2. 注册路由

ts 复制代码

/*
../srt/main.ts
*/
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router) // 注册路由
app.mount('#app')

3. 注册elemet-plus

ts 复制代码

/*
../srt/main.ts
*/
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router) // 注册路由
app.mount('#app')
app.use(ElementPlus)  // 注册elemet-plus

4. Pinia

shell 复制代码

pnpm i pinia

注册Pinia

ts 复制代码

/*
../srt/main.ts
*/
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { createPinia } from 'pinia'

const app = createApp(App);
const pinia = createPinia()
app.use(pinia);
app.mount("#app");

Vue3+elementPlus+Vite项目

Vue3+elementPlus+Vite项目

1. 项目创建

1.1. 使用pnpm创建项目

1.2. 启动项目

1.3. 配置项目url映射

1.4. 安装依赖包

2. vue3路由

2.1. 添加路由配置文件

2.2. 注册路由

3. 注册elemet-plus

4. Pinia

1.3. 配置项目`url`映射