利用Vite搭建Vue3+ElementUI-Plus项目的全过程

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

创建项目

初始化项目

使用vite创建一个vite+vue的项目

npm init vite@latest my-vue-app -- --template vue

注意：npm7+后面需要多添加的双横杠

my-vue-app是项目的名称，可以根据自己的需要修改，后面--template vue表示创建一个vue模板项目。

添加依赖并运行

然后进入到刚刚创建的项目目录中安装依赖，并运行：

cd my-vue-app
npm install
npm run dev

经过上面几步一个简单的Vite+Vue项目就搭建并运行完成了。

添加路由

为了后续的使用方便，添加路由的依赖并进行配置

添加依赖

这里我们使用最新的Vue Router 版本

npm install vue-router@4

添加路由配置文件

添加完路由依赖以后需要在class="lazy" data-src目录下创建一个router文件夹，以及在router文件夹内创建一个它的配置文件——index.js，下面是index.js文件内容：

// 路由文件
import { createRouter, createWebHistory } from "vue-router";

import Home from '../views/Home.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    }
]

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


router.beforeEach((to,from)=>{
    // if(to.meta.requireAuth) {
    //     let token = localStorage.getItem('auth-system-token');
    //     let isLogin = localStorage.getItem('auth-system-login');
    //     if(!token||!isLogin){
    //         return {
    //             path: '/login'
    //         }
    //     }
    // }
})

export default router;

需要注意的是在最新的Vue Router中创建路由和使用历史模式的方法都发生了改变，其余使用方式大致相同。

在main.js中添加路由

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

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

添加Home页面进行测试

在上面的index.js文件中配置了Home这个页面，下面我们创建一下，在class="lazy" data-src目录下创建文件夹views，然后在其添加Home.vue，内容如下：

<template>
    <div class="home">
        <h1>Home Page</h1>
    </div>
</template>
<script>
export default {
    data(){
        return{}
    }
}
</script>

然后在App.vue中使用router-view进行路由，让其显示

//App.vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>

<template>
  <img alt="Vue logo" class="lazy" data-src="./assets/logo.png" />
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

此时运行页面如下

添加ElementUI-Plus

为了更方便快速的做出整齐美观的页面我们这里使用ElementUI-Plus作为UI框架，它已经支持Vue3.

安装element-plus依赖

npm install element-plus --save

引入element-plus依赖

本文使用的依赖方式为按需应用中的自动导入，按需应用可以减少打包后文件的大小，如果不在乎大小也可使用全局引用。
要使用按需引用中的自动导入需要安装额外的两个插件：unplugin-vue-components和unplugin-auto-import

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

安装完成后我们需要配置一下项目根目录的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(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

配置完上面的这些以后基本上就可以使用了，但是当使用ElementUI的API调用组件时还需要手动的引用样式，例如我们想使用ElMessage这个组件，需要引入组件并引入它的样式文件：

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

如果不喜欢这样每次配置样式也可以使用插件unplugin-element-plus来导入样式，安装它前需要添加sass和sass-loader依赖

npm install sass sass-loader  unplugin-element-plus

然后在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'
import ElementPlus from 'unplugin-element-plus/vite'


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

修改Home.vue进行测试：

<template>
    <div class="home">
        <h1>Home Page</h1>
        <el-button @click="showMessage" type="primary">ElementUI-Plus</el-button>
    </div>
</template>
<script>
import {ElMessage} from 'element-plus'
export default {
    data(){
        return{}
    },
    methods:{
        showMessage(){
            ElMessage({type: 'success',message:'测试成功'})
        }
    }
}
</script>

运行效果

引入Element Icon

添加依赖

npm install @element-plus/icons-vue

将icon在main.js进行全局注册

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index.js'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
app.use(Router).use(JsonViewer).mount('#app');
//全局注册Element Icon
for (let iconName in ElementPlusIconsVue) {
    app.component(iconName, ElementPlusIconsVue[iconName])
}

给Home.vue中的按钮添加图标测试

<el-button @click="showMessage" type="primary" icon="Check">ElementUI-Plus</el-button>

运行效果

修改element的主题颜色

在上面的步骤中已经添加了sass和sass-loader的依赖，因此可以直接配置主题文件，首先在class="lazy" data-src目录下新建style.scss，然后里面添加如下内容：

@forward 'element-plus/theme-chalk/class="lazy" data-src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #333333,
    ),
  ),
);

例如我们修改primary颜色为#333333颜色，然后在vite.config.js中添加配置：

import { defineConfig } from 'vite'
import path from 'path'
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'
import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
  //一下为新添加的内容
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'class="lazy" data-src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/style.scss" as *;`,
      },
    },
  },
  //一下为之前的配置内容
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({
      useSource: true,
    })
  ]
})

此时我们看一下效果