快捷導(dǎo)航

Vue3+Vite+ElementPlus構(gòu)建學(xué)習(xí)筆記

更新時(shí)間：2024年12月09日 10:11:13 作者：PieroPc

這篇文章主要介紹了Vue3+Vite+ElementPlus構(gòu)建的相關(guān)資料,文中還介紹如何在Vue3項(xiàng)目中加入ElementPlus庫(kù),并提供了完整引入的示例,需要的朋友可以參考下

1、Node.js 查看

node -v

2、如果你的網(wǎng)絡(luò)環(huán)境不佳，推薦使用換源

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

3、Vue 3 編碼規(guī)范使用

1.編碼語(yǔ)言：TypeScript

2.代碼風(fēng)格：組合式API

3.簡(jiǎn)寫形式：setup語(yǔ)法糖

4、所需網(wǎng)址

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、構(gòu)建指令

vue

npm create vue@latest

vite

npm create vite@latest

6、在 Vue 3 加入 Element Plus 庫(kù)

安裝

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"]
  }
}

總結(jié)

到此這篇關(guān)于Vue3+Vite+ElementPlus構(gòu)建的文章就介紹到這了,更多相關(guān)Vue3+Vite+ElementPlus構(gòu)建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

基于vue實(shí)現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方
這篇文章主要為大家詳細(xì)介紹了如何基于vue實(shí)現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-10-10
Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
使用vux實(shí)現(xiàn)上拉刷新功能遇到的坑
最近公司在研發(fā)app,選擇了基于Vue框架的vux組件庫(kù)，現(xiàn)總結(jié)在實(shí)現(xiàn)上拉刷新功能遇到的坑,感興趣的朋友參考下吧
2018-02-02
Vue 表單輸入綁定v-model
這篇文章主要介紹了Vue 表單輸入綁定v-model，v-model指定可以實(shí)現(xiàn)表單值與屬性的雙向綁定。即表單元素中更改了值會(huì)自動(dòng)的更新屬性中的值，屬性中的值更新了會(huì)自動(dòng)更新表單中的值，下面一起進(jìn)入文章來哦姐文章詳情內(nèi)容
2021-10-10
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue腳手架編寫試卷頁(yè)面功能
腳手架是一種用于快速開發(fā)Vue項(xiàng)目的系統(tǒng)架構(gòu)，這篇文章主要介紹了Vue腳手架實(shí)現(xiàn)試卷頁(yè)面功能，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03
vue h5移動(dòng)端禁止縮放代碼
今天小編就為大家分享一篇vue h5移動(dòng)端禁止縮放代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue3切換路由時(shí)頁(yè)面空白問題解決辦法
在使用Vue3時(shí),有時(shí)頁(yè)面修改后會(huì)出現(xiàn)空白,這篇文章主要介紹了vue3切換路由時(shí)頁(yè)面空白問題解決辦法,文中介紹的步驟可以有效解決頁(yè)面空白問題,需要的朋友可以參考下
2024-09-09
vue2.0中g(shù)oods選購(gòu)欄滾動(dòng)算法的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue2.0中g(shù)oods選購(gòu)欄滾動(dòng)算法的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2017-05-05