利用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-componentsunplugin-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项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

    目录 一. 参考文档 二. vite搭建项目 三. 配置element-ui 四. 配置vue-router 五. 配置vuex 安装 六. 配置axios 七. 总结 一. 参考文档 vite官方文档 vue3.x官方文档 vue-router4.x官方文档 vuex4.x官方文档 element-ui3.x官方文档 Ant Design Vue2.x官方文档 axios文档 二. vite搭建项目 安装 # npm 安装 npm init vite@latest # yarn 安装 yarn

  • 基于Vite2.x的Vue 3.x项目的搭建实现

    创建 Vue 3.x 项目 npm init @vitejs/app my-vue-app --template 引入 Router 4.x npm install vue-router@4 --save 配置路由 在更目录中添加一个 router 的文件夹,新建 index.js Router 4.x 为我们提供了 createRouter 代替了 Router 3.x 中的 new VueRouter,用于创建路由. // Router 4.x import { createRouter,

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • vite+vue3+element-plus项目搭建的方法步骤

    使用vite搭建vue3项目 通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目. $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev 引入Element Plus 安装Element Plus: npm install element-plus --save main.js中完整引入 Element Plus: import { createApp

  • 利用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搭建vue3项目详解

    目录 一:npm构建 二:更改http://localhost:3000/到8080与Network路由访问 三:配置vite别名(npm install @types/node --save-dev) 四 :路由(npm install vue-router@4) 五:vuex(npm install vuex@next --save) 六:Eslint(可选)(npm install --save-dev eslint eslint-plugin-vue) 七:less/sass(可选)(n

  • 使用Vite搭建vue3+TS项目的实现步骤

    目录 vite简介 初始化项目 修改vite.config.ts 安装ts依赖和ESLint 安装Axios 配置跨域 安装Less vite简介 vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它具有快速的冷启动,不需要等待打包操作:并且官网说是下一代的前端构建工具. 初始化项目 npm init vite@latest 1.输入项目名称 2.选择Vue 3.选择TS 4.启动项目 5.项目启动成功 注意 用vscode进行开发的时候,推荐使用volar,禁用以前vue2常使用的

  • 用vite搭建vue3应用的实现方法

    一,安装 提示: VUE3.0目前还没有官方的翻译文档.但是已经有人翻译了.得到了尤雨溪大佬的点赞,这里附上网址https://v3.cn.vuejs.org/ 1.安装 cli 因为要使用 vue3 必须要求 cli 的版本比较高,必须要高于 4.5.X 所以没有安装的 cli 的就直接安装最新版就行了,已有的可以升级或者卸载后重新安装 最好是全局安装 //全局安装 npm install -g @vue/cli # OR yarn global add @vue/cli //全局卸载 npm

  • 利用docker搭建php7和nginx运行环境全过程(官方镜像)

    本文分享的是利用docker搭建php7和nginx运行环境的全过程,分享出来供大家参考学习,下面来看看详细的介绍: 环境介绍 根目录: /docker 网站根目录:/docker/www nginx相关目录:/docker/nginx/conf.d 准备工作 1.使用docker加速器 curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://68abbefd.m.daocloud.io service do

  • 利用Vite2和Vue3实现网站国际化的全过程

    目录 前言 安装vue-i18n 配置Locales 实现 getLangs.js 创建 i18n 实例 模板中使用 语言切换 关于切换后需要刷新后才生效 切换语言触发其他组件更新 总结 前言 最近有人在吐槽项目使用 Vue3 之后,出现一堆问题,填坑困难,甚至是开发中才发现某些第三方库没有推出 Vue3 的版本,因此大发吐槽,强烈建议不使用 Vue3. 做好技术预研和兼容性调查是开发前的工作之一,特别是对于新技术或者大版本的更新,除非你有十个胆,否则不要在预研不充分的情况下,在正式项目中使用.

  • Vite搭建React项目的方法步骤

    前言 日常放鸽,火钳刘明 这是一个基于 vite 搭建的 React 的项目,开发体验非常棒. 创建一个 Vite 项目 yarn create @vitejs/app 如上图,选择了 react-ts 预设模板,如果出现下图一样的工程 yarn // 安装依赖 yarn dev // 启动开发环境 打开浏览器输入http://localhost:3000/#/,如上图所示的话.那么恭喜你,你可以正常开发 React 项目了.完结撒花 如果不行的话,直接看 vite 官网,它比我写的详细 改造工

  • 一文带你从零开始搭建vue3项目

    目录 说明 开始 1. 使用 vscode 开发工具安装vue3的插件 Volar ,在vue2中我们使用的是Vetur. 2. 执行初始化及安装命令: 3. 安装vue-router 4. 全局样式及sass安装(使用@路径需要配置别名,后文有相应的说明) 5. Element plus按需引入和全局引入 6. Layout布局,创建文件src/layout/index.vue 7. axios请求封装 8. 环境变量相关 9. vite中别名配置 总结 说明 记录一次Vue3的项目搭建过程.

  • vite搭建vue2项目的实战过程

    目录 问题提出 搭建过程 1.初始化项目 1.1 创建项目 1.2 安装vite对vue2支持的插件 1.3 安装vue依赖 1.4 修改项目文件结构 1.5 运行一下项目 2.vue-router 2.1 安装 2.2 新建router目录 2.3 全局注册 3.vuex 3.1 安装 3.2 新建vuex目录 3.3 全局注册 4.组件库 4.1 安装 4.2 按需引入 4.3 在main.js全局注册 4.4 在页面中使用 5.axios 5.1 安装 5.2 封装axios 5.3 在页

随机推荐