Vite搭建Vue3工程

---

前言

使用Vite搭建Vue3工程

---

一、创建空项目

npm init vite 项目名

输出：

二、集成Element UI

1.Install Element UI

npm install element-plus --save

输出：

2.Volar 支持

修改内容：

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

3.安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

输出：

修改配置：

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

三、安装Router

npm install vue-router@4

输出：


添加routes.ts

import Login from './views/Login.vue'
import Main from './views/Main.vue'

const routes = [
    {
        name: 'login',
        path: '/login',
        component:Login
    },
    {
        name: 'b',
        path: '/b',
        component: Main
    },
    
];

export default routes

修改main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

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

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

App.vue添加显示路由 页面

      <keep-alive>
      <router-view></router-view>
    </keep-alive>

结果：

结论