vite+element-plus项目基础搭建的全过程

 更新时间:2022年07月19日 10:13:42   作者:凌空暗羽  
最近看完Vue3和Vite文档之后,就写了个小demo,整体感觉下来还是很丝滑的,下面这篇文章主要给大家介绍了关于vite+element-plus项目基础搭建的全过程,需要的朋友可以参考下

1.引言

其实本来不应该写这种CSDN比较多的博文的,主要是因为比较多,然后想解决问题的时候有很多各种各样的文章,然后这些文章有各自的解决思路,甚至拿过来又不能解决问题,本着分享和方便以后使用的目的,记录这次使用过程。

2.为什么是Vite?

其实我最开始用的是vue-cli,但是使用的时候发现这个每次运行的时候都需要打包,导致运行的比较慢,得等个10几秒。加上看到Element-plus官网在配置教程里面甚至都没有放vue-cli的配置教程。在使用vue-cli引入的时候我又希望不是全部引入,因为很多组件是没必要的,也许正是因为这个Element-plus比较大,所以打包的时间平时使用的时候大更多。基于上述原因,我查了一下vite和vue-cli的区别:

(1)vite打包速度快,能够利用浏览器对JavaScript 模块的原生支持,而vue-cli在打包上更像是webpack的一个超集,本身基于webpack来打包,又在webpack的基础上增加了很多脚手架,由于webpack将项目的各种依赖利用js串联起来,工作量相对较大,时间慢也是正常的;

(2)由于Vite打包之后还是依赖于浏览器,所以对于低版本的浏览器支持的不是很好。

3.为什么是Element-plus?

因为之前没有使用过这个UI库,自己一个个组件的写太慢了。而且Element-plus热度也比较高。Element-plus本质是Element-UI对Vue3的支持更新,用来配合Vue3开发非常合适,相比之下,有很多UI框架还没能转到Vue3,不得不感叹前端发展实在是太快了,各种UI组件库,各种生态,这种来自于社区的依赖。

4.项目搭建

好了不多说了,直接开始吧:

npm init vite@latest <app name> -- --template vue-ts

安装依赖、测试运行什么的就不说了,配置vite.config.ts(含修改端口方式):

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [
    vue()
  ],
  server: {
    port: 8080,
  },
});

安装element-plus依赖:npm i element-plus (使用-D主要是我们一般只是用生成的dist文件,用于生产环境);安装 sass和sass-loader,方便之后使用element中提供的颜色主题和自己写sass一些样式。

修改tsconfig.json,关闭打包时候的ts校验(否则打包的时候会因为ts校验不通过而导致打包失败):"skipLibCheck": true,为了方便编译器提示加上:"types": ["element-plus/global"],

入口文件:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(router);
app.mount('#app');

按需引入,安装官网提到的unplugin-auto-importunplugin-vue-components依赖(-D就行),调整vite.config.ts文件:

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';
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    port: 8080,
  },
});

实践测试,如果使用这种方法,那么每次会由这两个自动导入的依赖为我们引入我们自己写的components组件

如果全部引入那么文件大小1.4MB左右,如果按需引入只有400KB,所以还是按需引入比较香。

5.参考文献

本次项目搭建看了很多文章,对我帮助比较大的是这三篇文章:

(1)搭建vite项目并配置路由和element-plus

(2)Element官网配置教程

(3)Vite和Vue CLI的优劣

总结

到此这篇关于vite+element-plus项目基础搭建的文章就介绍到这了,更多相关vite+element-plus项目搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 前端项目中如何使用百度地图api(含实例)

    前端项目中如何使用百度地图api(含实例)

    当我们遇到定位展示的时候会出现使用地图展示的需求,下面这篇文章主要给大家介绍了关于前端项目中如何使用百度地图api(含实例)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue自定义组件实现 v-model 的几种方式

    Vue自定义组件实现 v-model 的几种方式

    在 Vue 中,v-model 是一个常用的指令,用于实现表单元素和组件之间的双向绑定,当我们使用原生的表单元素时,直接使用 v-model 是很方便的,本文给大家介绍了Vue自定义组件实现 v-model 的几种方式,需要的朋友可以参考下
    2024-02-02
  • Vue实现Tab选项卡切换

    Vue实现Tab选项卡切换

    这篇文章主要为大家详细介绍了Vue实现Tab选项卡切换,点击不同标题显示对应图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • elementUI select组件value值注意事项详解

    elementUI select组件value值注意事项详解

    这篇文章主要介绍了elementUI select组件value值注意事项详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 代码分析vue中如何配置less

    代码分析vue中如何配置less

    在本篇文章中,我们给大家详细讲述了vue中如何配置less的详细代码和步骤,有需要的朋友跟着学习下。
    2018-09-09
  • vue使用window.open()跳转页面的代码案例

    vue使用window.open()跳转页面的代码案例

    这篇文章主要介绍了vue中对window.openner的使用,vue使用window.open()跳转页面的代码案例,本文通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • Vue uni-app以H5模式引入Jquery配置教程

    Vue uni-app以H5模式引入Jquery配置教程

    这篇文章主要为大家介绍了Vue uni-app以H5模式引入Jquery配置教程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue.js与element-ui实现菜单树形结构的解决方法

    vue.js与element-ui实现菜单树形结构的解决方法

    本文通过实例给大家介绍了vue.js与element-ui实现菜单树形结构,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置

    vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置

    这篇文章主要介绍了vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置,本文通过实例代码效果图展示给大家介绍的非常详细,需要的朋友可以参考下
    2019-11-11
  • vue + el-tree 实现插入节点自定义名称数据的代码

    vue + el-tree 实现插入节点自定义名称数据的代码

    这篇文章主要介绍了vue + el-tree 实现插入节点自定义名称数据的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12

最新评论