Vue3+Vite+ElementPlus构建学习笔记

 更新时间:2024年12月09日 10:11:13   作者:PieroPc  
这篇文章主要介绍了Vue3+Vite+ElementPlus构建的相关资料,文中还介绍如何在Vue3项目中加入ElementPlus库,并提供了完整引入的示例,需要的朋友可以参考下

1、Node.js 查看

node -v

2、如果你的网络环境不佳,推荐使用  换源

npm config set registry https://registry.npmmirror.com

3、Vue 3 编码规范 使用

1.编码语言:TypeScript

2.代码风格:组合式API

3.简写形式:setup语法糖

4、所需网址 

https://cn.vuejs.org/guide/quick-start

https://vitejs.cn/vite5-cn/

https://element-plus.org/zh-CN/

Windi CSS

 Vue Router | Vue.js 的官方路由

5、 构建 指令

vue

npm create vue@latest

vite

npm create vite@latest

6、 在 Vue 3 加入 Element Plus 库

安装

npm install element-plus --save

完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

总结

到此这篇关于Vue3+Vite+ElementPlus构建的文章就介绍到这了,更多相关Vue3+Vite+ElementPlus构建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于vue实现图片预览功能并显示在弹窗的最上方

    基于vue实现图片预览功能并显示在弹窗的最上方

    这篇文章主要为大家详细介绍了如何基于vue实现图片预览功能并显示在弹窗的最上方,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-10-10
  • Vue3中进行二维码的生成与解码实现详解

    Vue3中进行二维码的生成与解码实现详解

    这篇文章主要为大家介绍了Vue3中进行二维码的生成与解码实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Ant Design_Form表单上传文件组件实现详解

    Ant Design_Form表单上传文件组件实现详解

    这篇文章主要为大家介绍了Ant Design_Form表单上传文件组件实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 使用vux实现上拉刷新功能遇到的坑

    使用vux实现上拉刷新功能遇到的坑

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑,感兴趣的朋友参考下吧
    2018-02-02
  • Vue 表单输入绑定v-model

    Vue 表单输入绑定v-model

    这篇文章主要介绍了Vue 表单输入绑定v-model,v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 ,下面一起进入文章来哦姐文章详情内容
    2021-10-10
  • vue关于重置表单数据出现undefined的解决

    vue关于重置表单数据出现undefined的解决

    这篇文章主要介绍了vue关于重置表单数据出现undefined的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue脚手架编写试卷页面功能

    Vue脚手架编写试卷页面功能

    脚手架是一种用于快速开发Vue项目的系统架构,这篇文章主要介绍了Vue脚手架实现试卷页面功能,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • vue h5移动端禁止缩放代码

    vue h5移动端禁止缩放代码

    今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue3切换路由时页面空白问题解决办法

    vue3切换路由时页面空白问题解决办法

    在使用Vue3时,有时页面修改后会出现空白,这篇文章主要介绍了vue3切换路由时页面空白问题解决办法,文中介绍的步骤可以有效解决页面空白问题,需要的朋友可以参考下
    2024-09-09
  • vue2.0中goods选购栏滚动算法的实现代码

    vue2.0中goods选购栏滚动算法的实现代码

    这篇文章主要介绍了vue2.0中goods选购栏滚动算法的实现代码,需要的朋友可以参考下
    2017-05-05

最新评论