2023年最新的vue.js下載和安裝的3種方法詳解
1. 文章引言
我主要從事java
后端開發(fā),但對前端也非常感興趣,立志成為全棧工程師。
目前已學(xué)習(xí)了web
三劍客:
- 超文本標(biāo)記語言
HTML(HyperTest Markup Language)
- 層疊樣式表
CSS(Cascading Style Shets)
JavaScript
后端開發(fā)spring
,mybatis
等框架,我猜想前端也定有框架。
果不其然,上網(wǎng)一搜,前端有vue
,react
,angularJs
等。
按照個人計劃來看,先學(xué)習(xí)vue
框架。
工欲善其事,必先利其器。為了學(xué)好vue
框架,先從下載和安裝它開始。
接下來,我會使用3
種方法下載和安裝vue.js
。
2. 環(huán)境搭建
但在安裝vue.js
之前,你需要安裝node.js
。
如何安裝node.js
,可以參考博文:2023年Node.js全網(wǎng)詳細(xì)下載安裝的最新教程
3. 安裝vue.js
我使用如下3
種方法來安裝vue.js
,但我推薦使用npm install
的方式安裝vue.js
。
3.1 方法一:官網(wǎng)下載vue.js源代碼
我們點(diǎn)擊右側(cè)鏈接,前往vue.js
的官網(wǎng),vue.js
的官網(wǎng)鏈接地址:https://cn.vuejs.org
進(jìn)入官網(wǎng)后,選擇文檔vue 2 文檔
,如下圖所示:
或者點(diǎn)擊該鏈接,直接跳轉(zhuǎn)到Vue 2
首頁:https://v2.cn.vuejs.org
進(jìn)入Vue 2
首頁后,點(diǎn)擊起步
按鈕,如下圖所示:
在vue 2
頁面中,向下滑動鼠標(biāo),直至看到<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
,如下圖所示:
打開新的瀏覽器窗口,將src
中的js
文件(比如https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
),復(fù)制到窗口的地址欄中,如下圖所示:
先后使用Ctrl + A
和Ctrl + C
, 復(fù)制上圖中的vue.js
的腳本代碼后。在你的項(xiàng)目中新建一個js文件
,將該腳本代碼復(fù)制到該文件中,如下圖所示:
新建一個vueHtml
頁面,引入新創(chuàng)建的vue.js
文件,如下圖所示:
運(yùn)行vueHtml
頁面,如下圖所示:
vueHtml
的源代碼如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試vue.js腳本</title> </head> <body> <div id="vm"> <p>Hello, {{name}}!</p> <p>You are {{age}} years old!</p> </div> </body> <script src="vue.js"></script> <script type="text/javascript"> new Vue({ el: '#vm', data: { name: 'super先生', age: 18 } }); </script> </html>
目前,除了少量項(xiàng)目使用Vue 2
,很多項(xiàng)目已升級到Vue 3
了,而且官網(wǎng)在2023 年 12 月 31 日停止維護(hù)Vue 2
了,如下圖所示:
為了防止后期無法下載Vue 2
的代碼,我特地將其上傳到我的云盤,點(diǎn)擊如下鏈接可以訪問:
http://xiazai.jb51.net/202305/yuanma/vueym_283884.rar
3.2 方法二:使用npm install創(chuàng)建
由于,目前vue
已經(jīng)升級到Vue 3
了,官方建議使用npm install
的方式來安裝vue
。
所以,接下來,我使用npm install
來安裝vue
。
我準(zhǔn)備把項(xiàng)目建于D:\project\test
文件夾。在此文件夾的地址欄中輸入cmd
,可直接打開cmd命令框
,且定位到當(dāng)前目錄,如下圖所示:
在cmd
命令框中,輸入如下命令
npm init vue@latest
這一指令將會安裝并執(zhí)行create-vue
,它是Vue
官方的項(xiàng)目腳手架工具,如下圖所示:
如上圖所示,我寫的Project name
是testApp
,Package name
是package.json
,其余是No
。
如果不確定是否要開啟某個功能,你可以直接按下回車鍵選擇No
。
3.在項(xiàng)目被創(chuàng)建后,按照上圖的提示,依次執(zhí)行如下命令:
cd testVue npm install npm run dev
打開瀏覽器,在地址欄中輸入: http://localhost:5173/,如下圖所示:
出現(xiàn)這個頁面,說明項(xiàng)目已經(jīng)創(chuàng)建成功。
3.3 方法三:使用bower下載
bower
是一個前端包管理工具,它能幫我們跟蹤前端包,并且保證它們是最新(或者是你指定的特定版本)。
1.安裝bower
bower
需要node
、npm
和git
環(huán)境,在配置好這些環(huán)境之后,通過npm
的方式安裝bower
,如下指令所示
npm install bower -g
我使用Windows powershell
,如果你還沒有安裝,可以點(diǎn)擊該鏈接安裝:安裝Windows powershell
2.查看bower
版本
安裝成功后,輸入如下指令查看bower
的版本:
bower -v
3.安裝vue
輸入如下指令安裝vue:
bower i vue -g
4. 總結(jié)
通過以上對vue.js
的安裝來看,我還是推薦大家使用npm install
的方式,畢竟這也是官方推薦的安裝方式。
當(dāng)然,希望如上安裝最新的vue.js
的教程,能夠幫到你。
到此這篇關(guān)于2023年最新的vue.js下載和安裝的3種方法的文章就介紹到這了,更多相關(guān)vue.js下載和安裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue?perfect-scrollbar(特定框架里使用非該框架定制庫/插件)
這篇文章主要為大家介紹了vue?perfect-scrollbar在特定框架里使用一款并非為該框架定制的庫/插件如何實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-05-05詳解在vue-cli項(xiàng)目中使用mockjs(請求數(shù)據(jù)刪除數(shù)據(jù))
本篇文章主要介紹了在vue-cli項(xiàng)目中使用mockjs(請求數(shù)據(jù)刪除數(shù)據(jù)),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10Vue.js做select下拉列表的實(shí)例(ul-li標(biāo)簽仿select標(biāo)簽)
下面小編就為大家分享一篇Vue.js做select下拉列表的實(shí)例(ul-li標(biāo)簽仿select標(biāo)簽),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue使用vue-i18n實(shí)現(xiàn)國際化的實(shí)現(xiàn)代碼
本篇文章主要介紹了vue使用vue-i18n實(shí)現(xiàn)國際化的實(shí)現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼
這篇文章主要介紹了Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue3的setup語法如何自定義v-model為公用hooks
這篇文章主要介紹了vue3的setup語法如何自定義v-model為公用hooks,文章分為兩個部分介紹,簡單介紹vue3的setup語法如何自定義v-model和如何提取v-model語法作為一個公用hooks2022-07-07Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn)
本文通過實(shí)例代碼介紹了Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友跟隨小編一起看看吧2023-10-10vue?cli2?和?cli3去掉eslint檢查器報錯的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04