VUE安裝使用教程詳解
如果是簡(jiǎn)單實(shí)用vue的話，可以直接引用js文件。
但是在構(gòu)建大型項(xiàng)目的時(shí)候推薦使用NPM安裝，NPM能夠很好的和諸如webpack或Browserify模塊打包器配合使用，同時(shí)Vue也提供配套工具來開發(fā)單文件組件。
1. 安裝nodejs
由于npm（nodejs package manager）是nodejs的包管理器，所以要首先安裝nodejs，從官網(wǎng)下載相應(yīng)版本安裝即可https://nodejs.org/en/download/。
安裝好后打開命令行工具，輸入node就進(jìn)入nodejs的命令模式了：
C:\Users\wangjun>node
> 1+2
3
>
按兩次Ctrl+C或者輸入.exit就可以退出命令行了。
2. 安裝淘寶NPM鏡像
由于在國(guó)內(nèi)npm的安裝速度太慢，因此可以使用淘寶鏡像及其命令cnpm來安裝各種包。
安裝npm淘寶鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成后，后面就可以使用cnpm命令來安裝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)境的版本，比開發(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 遇到的問題
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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
有時(shí)在頁(yè)面刷新或者返回等操作時(shí),想監(jiān)聽路由變化進(jìn)行數(shù)據(jù)更新等操作,下面這篇文章主要給大家介紹了關(guān)于vue路由監(jiān)聽的一些常用方式,需要的朋友可以參考下2023-10-10
Vuex 使用及簡(jiǎn)單實(shí)例(計(jì)數(shù)器)
這篇文章主要介紹了Vuex 使用及簡(jiǎn)單實(shí)例(計(jì)數(shù)器)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
webpack vue項(xiàng)目開發(fā)環(huán)境局域網(wǎng)訪問方法
下面小編就為大家分享一篇webpack vue項(xiàng)目開發(fā)環(huán)境局域網(wǎng)訪問方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，一起跟隨小編過來看看吧2018-03-03
Vue2.0 vue-source jsonp 跨域請(qǐng)求
這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請(qǐng)求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
vue3?hook重構(gòu)DataV的全屏容器組件詳解
這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家介紹了Yarn與Lerna管理monorepo的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue3中的響應(yīng)式原理-effect，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
解決vue.js 數(shù)據(jù)渲染成功仍報(bào)錯(cuò)的問題
今天小編就為大家分享一篇解決vue.js 數(shù)據(jù)渲染成功仍報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08