溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

VUE安裝使用教程詳解

發(fā)布時(shí)間：2020-10-18 07:14:07 來(lái)源：腳本之家 閱讀：260 作者：王小冬 欄目：web開(kāi)發(fā)

如果是簡(jiǎn)單實(shí)用vue的話，可以直接引用js文件。

https://vuejs.org/js/vue.js

但是在構(gòu)建大型項(xiàng)目的時(shí)候推薦使用NPM安裝，NPM能夠很好的和諸如webpack或Browserify模塊打包器配合使用，同時(shí)Vue也提供配套工具來(lái)開(kāi)發(fā)單文件組件。

1. 安裝nodejs

由于npm（nodejs package manager）是nodejs的包管理器，所以要首先安裝nodejs，從官網(wǎng)下載相應(yīng)版本安裝即可https://nodejs.org/en/download/。

安裝好后打開(kāi)命令行工具，輸入node就進(jìn)入nodejs的命令模式了：

C:\Users\wangjun>node
> 1+2
3
>

按兩次Ctrl+C或者輸入.exit就可以退出命令行了。

2. 安裝淘寶NPM鏡像

由于在國(guó)內(nèi)npm的安裝速度太慢，因此可以使用淘寶鏡像及其命令cnpm來(lái)安裝各種包。

安裝npm淘寶鏡像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完成后，后面就可以使用cnpm命令來(lái)安裝npm包了。

cnpm install {package name}

3. 安裝VUE

# 安裝穩(wěn)定版
cnpm install vue

安裝完成后默認(rèn)在用戶路徑下：

C:\Users\{user_name}\node_modules

在vue包的dist/目錄下可以看到Vue.js的各種版本，其中帶min的是生產(chǎn)環(huán)境的版本，比開(kāi)發(fā)版本vue.js壓縮了很多，并且刪除了警告。

4. 使用VUE

新建三個(gè)文件,其中vue.js需要從網(wǎng)上下載：

my.html
my.js
vue.js

4.1 新建my.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>my html</title>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="my.js"></script>
</html>

4.2 新建my.js

var app1 = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

至此vue的是安裝和簡(jiǎn)單使用就完成了。

4.3 遇到的問(wèn)題

1）報(bào)錯(cuò) Vue is not defined

Uncaught ReferenceError: Vue is not defined
    at my.js:1

原因

先引用了my.js，后引用了vue.js。

解決方案

應(yīng)該先引用vue.js，后引用my.js才能在my.js中使用vue的語(yǔ)法。

2）報(bào)錯(cuò)[Vue warn]: Cannot find element: #app

[Vue warn]: Cannot find element: #app

原因

我把相關(guān)的js文件放在head里面，導(dǎo)致文件未加載完成就運(yùn)行js文件，所以js找不到 #app 。

解決方案

把相關(guān)js文件放至尾部，保證頁(yè)面全部渲染完成才加載js，就可以避免這個(gè)錯(cuò)誤。

總結(jié)

以上所述是小編給大家介紹的VUE安裝使用教程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手