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

目录

• 创建项目
• 初始化项目
• 添加依赖并运行
• 添加路由
• 添加依赖
• 添加路由配置文件
• 在main.js中添加路由
• 添加Home页面进行测试
• 添加ElementUI-Plus
• 安装element-plus依赖
• 引入element-plus依赖
• 引入Element Icon
• 添加依赖
• 修改element的主题颜色
• 总结

本文主要记录使用Vite搭建一个Vue3+ElementUI-Plus，以及集成Vue Router的过程。本次搭建过程的Nodejs版本为 V16.14.2

创建项目

初始化项目

使用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

添加路由配置文件

添加完路由依赖以后需要在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这个页面，下面我们创建一下，在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" 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的依赖，因此可以直接配置主题文件，首先在src目录下新建style.scss，然后里面添加如下内容：

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

此时我们看一下效果

注意事项：

• Vite默认不能使用IP地址进行访问调试，如果需要使用IP地址进行访问调试可以在vite.config.js中配置server的host指定IP地址
• Vite打包后需要放到服务器中运行

以上就是Vite+Vue+ElementUI-Plus项目的大致搭建过程，详细配置内容可以查看官方文档。

Element-Plus 官方文档
Vite官方文档

总结

到此这篇关于利用Vite搭建Vue3+ElementUI-Plus项目的文章就介绍到这了,更多相关Vite搭建Vue3 ElementUI-Plus项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！