0、写在前面

vue3正式版发布一年多了，elementplus也跟进了vue3版本，真是广大开发者的福音，今天就用vue3+vite+elementplus搭建一个开发框架模板。这里全程使用 yarn 命令，不太熟悉的童鞋请参考文章 yarn和npm常用开发命令对比。

由于这篇文章开发框架功能和思路沿用的之前文章，并且之前vue2+elementUI的教程从起步到权限控制说的比较详细，所以这里着重说一下vue3和vue2搭建形式和方法运用不一样的地方，即 vue-router路由 部分和 element-plus组件 的新式使用方式，剩下部分童鞋们可以自己动手丰衣足食，哈哈。。另外vue3的语法用法请直接参考官网 Vue.js (vuejs.org)

闲话不多说，下面正式开始。

1、新建项目

● 新建项目 vue3-elementplus

yarn create vite vue3-elementplus --template vue

新建vue3-elementplus项目

● 启动

yarn dev

2、路由 vue-router

这里可以新打开一个terminal窗口
● 安装

yarn add vue-router -S

● 编写页面，新建 src>views>Index.vue

<template>
  <h1>首页</h1>
  <p>Index</p>
</template>

● 新建 src>views>List.vue

<template>
  <h1>列表</h1>
  <p>List</p>
</template>

● 新建 src>views>404.vue

<template>
  <p>404</p>
</template>

● 路由文件，新建 src>router>index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/",
            redirect: '/index'
        },
        {
            path: "/index",
            component: () => import('../views/Index.vue')
        },
        {
            path: "/list",
            component: () => import('../views/List.vue')
        },
        {
            path: "/404",
            component: () => import('../views/404.vue')
        },
        {
            path: "/:pathMatch(.*)*",
            redirect: '/404'
        }
    ]
})
export default router

● 修改 App.vue文件

<template>
  <router-view />
</template>

● main.js 中引入路由文件

import { createApp } from 'vue'
import App from './App.vue'
+ import router from './router/index'


- createApp(App).mount('#app')
+ const app = createApp(App).use(router)
+ app.mount('#app')

如果刚刚是打开新的terminal安装的vue-router，现在直接在地址栏中访问 http://localhost:3000/#/ 和 http://localhost:3000/#/list 即可，也不用重启了，快活呀。。这就是vite Home | Vite中文网 (vitejs.cn)

2、安装 element-plus

这里我们使用官网推荐的自动导入的方式

yarn add element-plus

yarn add unplugin-vue-components unplugin-auto-import -D

修改vite配置文件vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+ import AutoImport from 'unplugin-auto-import/vite'
+ import Components from 'unplugin-vue-components/vite'
+ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
-   plugins: [ vue()]
+   plugins: [
+     vue(),
+     AutoImport({
+       resolvers: [ElementPlusResolver()],
+     }),
+     Components({
+       resolvers: [ElementPlusResolver()],
+     })
+   ]
})

使用element-plus 组件，修改文件 src/views/Index.vue

<template>
  <h1>首页</h1>
  <p>Index</p>
 + <div>
 +    <el-button type="primary" icon="edit">Primary</el-button>
 +    <el-button type="success">Success</el-button>
 +    <el-button type="info">Info</el-button>
 +    <el-button type="warning">Warning</el-button>
 +    <el-button type="danger">Danger</el-button>
 +    <el-button>中文</el-button>
 +  </div>
</template>

这里全部保存直接生效，真是太方便了！截图如下：

element-plus组件使用