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

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

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

1. 文章引言

我主要從事java后端開發(fā)，但對(duì)前端也非常感興趣，立志成為全棧工程師。

目前已學(xué)習(xí)了web三劍客：

  • 超文本標(biāo)記語言HTML(HyperTest Markup Language)
  • 層疊樣式表CSS(Cascading Style Shets)
  • JavaScript

后端開發(fā)spring，mybatis等框架，我猜想前端也定有框架。

果不其然，上網(wǎng)一搜，前端有vue，react，angularJs等。

按照個(gè)人計(jì)劃來看，先學(xué)習(xí)vue框架。

工欲善其事，必先利其器。為了學(xué)好vue框架，先從下載和安裝它開始。

接下來，我會(huì)使用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頁面中，向下滑動(dòng)鼠標(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)目中新建一個(gè)js文件，將該腳本代碼復(fù)制到該文件中，如下圖所示：

在這里插入圖片描述

新建一個(gè)vueHtml頁面，引入新創(chuàng)建的vue.js文件，如下圖所示：

在這里插入圖片描述

運(yùn)行vueHtml頁面，如下圖所示：

在這里插入圖片描述

vueHtml的源代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測(cè)試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)目已升級(jí)到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)升級(jí)到Vue 3了，官方建議使用npm install的方式來安裝vue。

所以，接下來，我使用npm install來安裝vue。

我準(zhǔn)備把項(xiàng)目建于D:\project\test文件夾。在此文件夾的地址欄中輸入cmd，可直接打開cmd命令框，且定位到當(dāng)前目錄，如下圖所示：

在這里插入圖片描述

在這里插入圖片描述

在cmd命令框中，輸入如下命令

npm init vue@latest

這一指令將會(huì)安裝并執(zhí)行create-vue，它是Vue官方的項(xiàng)目腳手架工具，如下圖所示：

在這里插入圖片描述

如上圖所示，我寫的Project name是testApp，Package name是package.json，其余是No。

如果不確定是否要開啟某個(gè)功能，你可以直接按下回車鍵選擇No。

3.在項(xiàng)目被創(chuàng)建后，按照上圖的提示，依次執(zhí)行如下命令：

cd testVue
npm install
npm run dev

在這里插入圖片描述

打開瀏覽器，在地址欄中輸入： http://localhost:5173/，如下圖所示：

在這里插入圖片描述

出現(xiàn)這個(gè)頁面，說明項(xiàng)目已經(jīng)創(chuàng)建成功。

3.3 方法三：使用bower下載

bower是一個(gè)前端包管理工具，它能幫我們跟蹤前端包，并且保證它們是最新（或者是你指定的特定版本）。

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é)

通過以上對(duì)vue.js的安裝來看，我還是推薦大家使用npm install的方式，畢竟這也是官方推薦的安裝方式。

當(dāng)然，希望如上安裝最新的vue.js的教程，能夠幫到你。

到此這篇關(guān)于2023年最新的vue.js下載和安裝的3種方法的文章就介紹到這了,更多相關(guān)vue.js下載和安裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論