目錄
vue開發工具
首頁 web前端 前端問答 vue開發使用什麼工具

vue開發使用什麼工具

Dec 23, 2022 pm 02:25 PM
vue3

vue開發工具有:1、BootstrapVue,是用於為Vue建構Bootstrap介面的開源函式庫;2、VueX,是Vue應用程式的狀態管理函式庫;3、Vue Devtools;4、Vue CLI; 5、Vue Router;6、Vuetifyjs;7、Nuxt Js;8、Vue Element Admin;9、Vue Apollo;10、Element UI;11、Quasar等等。

vue開發使用什麼工具

本教學操作環境:windows7系統、vue3版,DELL G3電腦。

vue開發工具

#1、BootstrapVue

用於為Vuejs 建構Bootstrap 介面的開源庫。

vue開發使用什麼工具

連結https://bootstrap-vue.org/

#2、VueX

Vue.js應用程式的狀態管理庫。

vue開發使用什麼工具

連結 https://vuex.vuejs.org/

3、Vue Devtools

此擴充功能使調試vuejs項目變得快速又簡單。

vue開發使用什麼工具

連結https://devtools.vuejs.org/

4、Vue CLI

讓Vuejs 開發人員更簡單的標準工具。

vue開發使用什麼工具

連結 https://cli.vuejs.org/

#5、Vue Router

使用直覺且強大的語法定義靜態和動態路由。

vue開發使用什麼工具

連結 https://router.vuejs.org/

6、Vuetifyjs

開源函式庫,協助為Vuejs 建立材質設計接口。

vue開發使用什麼工具

連結 https://vuetifyjs.com/en/

7、Nuxt Js##一個開源框架,讓Web開發變得簡單而強大。

vue開發使用什麼工具

連結 https://nuxtjs.org/


#8、Vue Element Admin幫助建立一個簡單的管理介面,其中包含管理網站所需的許多功能。

vue開發使用什麼工具

連結https://github.com/PanJiaChen/vue-element-admin

9、Vue Apollo使您的vuejs 專案設定GraphQL 變得容易。

vue開發使用什麼工具

連結https://vue-apollo.netlify.app/

10、Element UI##用於Vue 專案介面開發的UI 庫。

vue開發使用什麼工具連結 https://element.eleme.io/#/en-US


11、Quasar

Quasar是一個開源的vuejs框架,可以幫助建立SPA(單頁應用程式),SSR(伺服器端渲染應用程式),PWA(漸進式Web應用程式)

1vue開發使用什麼工具連結 https://quasar.dev/


12、Language Vue

支援Vuejs 開發Atom 的實用程式。

1vue開發使用什麼工具連結https://atom.io/packages/language-vue

13、VuePress

VuePress 是一個Vue 驅動的靜態網站產生器

1vue開發使用什麼工具連結https://v2.vuepress.vuejs.org/

14、Vuejs Guide

Vuejs開發人員最完整,最詳細的指南。

1vue開發使用什麼工具連結https://vuejs.org/guide/introduction.html

15、Vue Select

幫助您建立元件選擇,並為vuejs開發人員提供有用的功能。

1vue開發使用什麼工具連結 https://vue-select.org/


#16、Vueuse

收集Vue 2 和Vue 3組件的必要實用程式。

1vue開發使用什麼工具連結 https://vueuse.org/

#17、VeeValidate

用於在 Vuejs 中進行表單驗證的工具。

1vue開發使用什麼工具

連結https://vee-validate.logaretm.com/v4/

18、Vant

行動UI 的介面生成器庫。

1vue開發使用什麼工具

連結https://vant-contrib.gitee.io/vant/#/en-US

19、Vue Native

Javascript 框架有助於建立跨平台的原生行動應用程式。

1vue開發使用什麼工具

連結 https://vue-native.io/

#20、Vue-meta

Vuejs專案的Cmeta標籤管理器。

vue開發使用什麼工具

連結https://vue-meta.nuxtjs.org/

21、Vue I18n

外掛程式有助於向項目新增國際功能。

2vue開發使用什麼工具

連結https://kazupon.github.io/vue-i18n/

22、Vue infinite loading

#為網站創建無限的滾動功能。

2vue開發使用什麼工具

連結https://peachscript.github.io/vue-infinite-loading/

23、Gridsome

該工具使建立靜態網站和應用程式變得快速又簡單。

2vue開發使用什麼工具

連結 https://gridsome.org/

#24、Vite

Vite 是建置工具,旨在為現代Web 專案提供更快、更精簡的開發體驗。

2vue開發使用什麼工具

連結 https://vitejs.dev/

#25、Vue-multiselect

開源函式庫,協助網站建構多選功能。

2vue開發使用什麼工具

連結https://vue-multiselect.js.org/

26、Vetur

用於在VS Code 中更好地進行vuejs 開發和調試的擴展。

2vue開發使用什麼工具

連結https://marketplace.visualstudio.com/items?itemName=octref.vetur

27、Vuejs Examples

Vuejs介面開發中的範例集合。

2vue開發使用什麼工具

連結https://vuejsexamples.com/

#28、Visual Studio Code編輯器

Visual Studio Code(VS Code)是由微軟公司推出的一款免費、開源的編輯器,推出後很快就流行起來,深受開發者的青睞。身為前端開發人員來說,一個強大的編輯器可以讓開發變得簡單、方便、有效率。本書選擇以VS Code編輯器為基礎來講解。

VS Code編輯器具有以下特點:

(1)輕巧極速,佔用系統資源較少。

(2)具備語法高亮顯示、智慧程式碼補全、自訂快速鍵和程式碼匹配等功能。

(3)跨平台。不同的開發人員為了工作需要,會選擇不同平台來進行專案開發工作,這樣就一定程度上限制了編輯器的使用範圍。 VSCode編輯器不僅跨平台(支援Mac、Windows以及Linux),使用起來也非常簡單。

(4)主題介面的設計比較人性化。例如,可以快速找到檔案直接進行開發,可以透過分割畫面顯示程式碼,主題顏色可以進行自訂設定(預設為黑色),也可以快速檢視最近開啟的專案檔案並檢視專案檔案結構。

(5)提供了豐富的插件。 VSCode提供了插件擴充功能,使用者根據需要自行下載安裝,只需在安裝配置成功之後,重新啟動編輯器,就可以使用此插件提供的功能。

29、git-bash命令列工具

在進行Vue開發時,我們常常會使用一些指令,如npm(套件管理器)、vue-cli (腳手架),這些命令需要在命令列下使用。 git-bash是git(版本管理器)中提供的命令列工具,外觀類似Windows系統內建的cmd命令列工具,但使用者體驗更友善。在實際開發中,常會使用git-bash工具來取代cmd。下面我們就來講解git-bash的安裝步驟。

(1)開啟git for windows官網,下載git安裝包,如下圖

vue開發使用什麼工具

(2)雙擊下載後的安裝程序,進行安裝,如下圖

vue開發使用什麼工具

(3)點擊“Next”按鈕,根據提示進行安裝,全部使用預設值即可。

(4)安裝成功後,啟動git-bash。

vue開發使用什麼工具

30、WebStorm

WebStorm 是JetBrains公司旗下一款JavaScript 開發工具。已被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最聰明的JavaScript IDE」等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強大的JS部分的功能。

31、Node.js

Node.js是一個基於Chrome V8引擎的JavaScript運行環境,它可以讓JavaScript在伺服器端運作。

【相關推薦:vuejs影片教學web前端開發

以上是vue開發使用什麼工具的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue3+vite:src使用require動態匯入圖片報錯怎麼解決 vue3+vite:src使用require動態匯入圖片報錯怎麼解決 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require動態導入圖片報錯和解決方法vue3+vite動態的導入多張圖片vue3如果使用的是typescript開發,就會出現require引入圖片報錯,requireisnotdefined不能像使用vue2這樣imgUrl:require(' …/assets/test.png')導入,是因為typescript不支援require所以用import導入,下面介紹如何解決:使用awaitimport

vue3專案中怎麼使用tinymce vue3專案中怎麼使用tinymce May 19, 2023 pm 08:40 PM

tinymce是一個功能齊全的富文本編輯器插件,但在vue中引入tinymce並不像別的Vue富文本插件一樣那麼順利,tinymce本身並不適配Vue,還需要引入@tinymce/tinymce-vue,並且它是國外的富文本插件,沒有透過中文版本,需要在其官網下載翻譯包(可能需要翻牆)。 1.安裝相關依賴npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下載中文包3.引入皮膚和漢化包在項目public資料夾下新建tinymce資料夾,將下載的

Vue3怎麼解析markdown並實現程式碼高亮顯示 Vue3怎麼解析markdown並實現程式碼高亮顯示 May 20, 2023 pm 04:16 PM

Vue實作部落格前端,需要實作markdown的解析,如果有程式碼則需要實作程式碼的高亮。 Vue的markdown解析函式庫很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。這些庫都大同小異。這裡選用的是marked,程式碼高亮的函式庫選用的是highlight.js。具體實現步驟如下:一、安裝依賴庫在vue專案下開啟命令窗口,並輸入以下命令npminstallmarked-save//marked用於將markdown轉換成htmlnpmins

Vue3如何實作刷新頁面局部內容 Vue3如何實作刷新頁面局部內容 May 26, 2023 pm 05:31 PM

想要實現頁面的局部刷新,我們只需要實現局部元件(dom)的重新渲染。在Vue中,想要實現這效果最簡單的方式方法就是使用v-if指令。在Vue2中我們除了使用v-if指令讓局部dom的重新渲染,也可以新建一個空白元件,需要刷新局部頁面時跳轉至這個空白元件頁面,然後在空白元件內的beforeRouteEnter守衛中又跳轉回原來的頁面。如下圖所示,如何在Vue3.X中實現點擊刷新按鈕實現紅框範圍內的dom重新加載,並展示對應的加載狀態。由於Vue3.X中scriptsetup語法中組件內守衛只有o

vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決 vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決 May 17, 2023 am 08:19 AM

vue3專案打包發佈到伺服器後存取頁面顯示空白1、處理vue.config.js檔案中的publicPath處理如下:const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

Vue3復用元件怎麼使用 Vue3復用元件怎麼使用 May 20, 2023 pm 07:25 PM

前言無論是vue還是react,當我們遇到多處重複程式碼的時候,我們都會想著如何重複使用這些程式碼,而不是一個檔案裡充斥著一堆冗餘程式碼。實際上,vue和react都可以透過抽組件的方式來達到復用,但如果遇到一些很小的程式碼片段,你又不想抽到另外一個檔案的情況下,相比而言,react可以在相同文件裡面宣告對應的小元件,或透過renderfunction來實現,如:constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Vue3中怎麼實現選取頭像並裁剪 Vue3中怎麼實現選取頭像並裁剪 May 29, 2023 am 10:22 AM

最終效果安裝VueCropper組件yarnaddvue-cropper@next上面的安裝值針對Vue3的,如果時Vue2或想使用其他的方式引用,請訪問它的npm官方地址:官方教程。在元件中引用使用時也很簡單,只需要引入對應的元件和它的樣式文件,我這裡沒有在全域引用,只在我的元件檔案中引入import{userInfoByRequest}from'../js/api' import{VueCropper}from'vue-cropper&

怎麼使用vue3+ts+axios+pinia實現無感刷新 怎麼使用vue3+ts+axios+pinia實現無感刷新 May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia實作無感刷新1.先在專案中下載aiXos和pinianpmipinia--savenpminstallaxios--save2.封裝axios請求-----下載js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfigig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

See all articles