安裝使用VUE

scu醬油仔發表於2018-08-03
Vue

安裝使用VUE

如果是簡單實用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:Userswangjun>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}
ode_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，就可以避免這個錯誤。

相關文章