利用Vite搭建Vue3+ElementUI-Plus項目的全過程

更新時間：2022年07月15日 09:56:02 作者：胡海龍Blog

vue3如今已經(jīng)成為默認版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

創(chuàng)建項目

初始化項目

使用vite創(chuàng)建一個vite+vue的項目

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

注意：npm7+后面需要多添加的雙橫杠

my-vue-app是項目的名稱，可以根據(jù)自己的需要修改，后面--template vue表示創(chuàng)建一個vue模板項目。

添加依賴并運行

然后進入到剛剛創(chuàng)建的項目目錄中安裝依賴，并運行：

cd my-vue-app
npm install
npm run dev

經(jīng)過上面幾步一個簡單的Vite+Vue項目就搭建并運行完成了。

添加路由

為了后續(xù)的使用方便，添加路由的依賴并進行配置

添加依賴

這里我們使用最新的Vue Router 版本

npm install vue-router@4

添加路由配置文件

添加完路由依賴以后需要在src目錄下創(chuàng)建一個router文件夾，以及在router文件夾內(nèi)創(chuàng)建一個它的配置文件——index.js，下面是index.js文件內(nèi)容：

// 路由文件
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中創(chuàng)建路由和使用歷史模式的方法都發(fā)生了改變，其余使用方式大致相同。

在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這個頁面，下面我們創(chuàng)建一下，在src目錄下創(chuàng)建文件夾views，然后在其添加Home.vue，內(nèi)容如下：

<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" 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框架，它已經(jīng)支持Vue3.

安裝element-plus依賴

npm install element-plus --save

引入element-plus依賴

本文使用的依賴方式為按需應(yīng)用中的自動導入，按需應(yīng)用可以減少打包后文件的大小，如果不在乎大小也可使用全局引用。
要使用按需引用中的自動導入需要安裝額外的兩個插件：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調(diào)用組件時還需要手動的引用樣式，例如我們想使用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的主題顏色

在上面的步驟中已經(jīng)添加了sass和sass-loader的依賴，因此可以直接配置主題文件，首先在src目錄下新建style.scss，然后里面添加如下內(nèi)容：

@forward 'element-plus/theme-chalk/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({
  //一下為新添加的內(nèi)容
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/style.scss" as *;`,
      },
    },
  },
  //一下為之前的配置內(nèi)容
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({
      useSource: true,
    })
  ]
})

此時我們看一下效果