欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

2023年最新的vue.js下載和安裝的3種方法詳解

 更新時間:2023年05月10日 11:13:37   作者:互聯(lián)網(wǎng)全棧開發(fā)實(shí)戰(zhàn)  
這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

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 + ACtrl + 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 nametestApp,Package namepackage.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需要nodenpmgit環(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)文章

最新評論