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了，如下圖所示：

在這里插入圖片描述