溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如果是簡單實用vue的話，可以直接引用js文件。
https://vuejs.org/js/vue.js
但是在構建大型項目的時候推薦使用NPM安裝，NPM能夠很好的和諸如webpack或Browserify模塊打包器配合使用，同時Vue也提供配套工具來開發單文件組件。
1. 安裝nodejs
由于npm（nodejs package manager）是nodejs的包管理器，所以要首先安裝nodejs，從官網下載相應版本安裝即可https://nodejs.org/en/download/。
安裝好后打開命令行工具，輸入node就進入nodejs的命令模式了：
C:\Users\wangjun>node
> 1+2
3
>
按兩次Ctrl+C或者輸入.exit就可以退出命令行了。
2. 安裝淘寶NPM鏡像
由于在國內npm的安裝速度太慢，因此可以使用淘寶鏡像及其命令cnpm來安裝各種包。
安裝npm淘寶鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成后，后面就可以使用cnpm命令來安裝npm包了。
cnpm install {package name}
3. 安裝VUE
# 安裝穩定版 cnpm install vue
安裝完成后默認在用戶路徑下：
C:\Users\{user_name}\node_modules
在vue包的dist/目錄下可以看到Vue.js的各種版本，其中帶min的是生產環境的版本，比開發版本vue.js壓縮了很多，并且刪除了警告。
4. 使用VUE
新建三個文件,其中vue.js需要從網上下載：
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的是安裝和簡單使用就完成了。
4.3 遇到的問題
1）報錯 Vue is not defined
Uncaught ReferenceError: Vue is not defined
at my.js:1
原因
先引用了my.js，后引用了vue.js。
解決方案
應該先引用vue.js，后引用my.js才能在my.js中使用vue的語法。
2）報錯[Vue warn]: Cannot find element: #app
[Vue warn]: Cannot find element: #app
原因
我把相關的js文件放在head里面，導致文件未加載完成就運行js文件，所以js找不到 #app 。
解決方案
把相關js文件放至尾部，保證頁面全部渲染完成才加載js，就可以避免這個錯誤。
總結
以上所述是小編給大家介紹的VUE安裝使用教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
