1. 前言
本小節(jié)將帶領(lǐng)大家學習一下如何安裝 Vue
。包括獨立版本、CDN、NPM、CLI 工具四種不同的安裝方法。
2. 獨立版本
我們可以在 Vue.js 的官網(wǎng)上直接下載 vue.min.js 并用<script>
標簽引入。
安裝步驟:
- 打開Vue.js下載地址并拷貝所有代碼。
- 創(chuàng)建
vue.min.js
文件,并將拷貝的源碼粘貼進去。 - 創(chuàng)建
index.html
并通過<script>
標簽引入。 - 打印
Vue
驗證是否成功。
//文件結(jié)構(gòu)
└─ lession
├─ index.html
└─ vue.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
Hello Imooc !
</div>
</body>
<script src="./vue.min.js"></script>
<script type="text/javascript">
console.log(Vue)
</script>
</html>
## 打印結(jié)果
? wn(e){this._init(e)}
3. 使用 CDN 方法
使用 CDN 的方式引入Vue
更加方便、快捷。以下推薦幾個比較穩(wěn)定的 CDN。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
Hello Imooc !
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script type="text/javascript">
console.log(Vue)
</script>
</html>
4. 使用NPM的方法
使用NPM
的方法進行安裝需要先在本地安裝Node
環(huán)境。
3.1、Windows 上安裝 Node.js
32 位安裝包下載地址
64 位安裝包下載地址
下載對應(yīng)的安裝包后,雙擊安裝包,傻瓜式下一步安裝就好了。
3.2、Mac 上安裝 Node.js
1、在官方下載網(wǎng)站下載 pkg 安裝包,直接點擊安裝即可。
2、使用 brew 命令來安裝:brew install node
brew install node
# 查看本地node環(huán)境
$ node -v
v10.16.0
在用 Vue
構(gòu)建大型應(yīng)用時推薦使用 NPM
安裝。當然,僅僅使用npm install
是不能完整搭建Vue
開發(fā)環(huán)境的。還需要webpack或 Browserify 等模塊打包器配合使用。
# 創(chuàng)建項目目錄
$ mkdir demo
# 進入項目文件夾
$ cd demo
$ npm init -y
# 最新穩(wěn)定版
$ npm install vue
# 安裝指定版本Vue
$ npm install vue@2.6.3
安裝完成后可以查看到demo目錄下多了 node_module/vue 文件夾。說明Vue
成功安裝。
5. 命令行工具(CLI)
當然,看過 Vue
官網(wǎng)的同學肯定都知道 Vue
提供了一個官方的 CLI,為我們快速搭建大型單頁應(yīng)用。我們并不建議同學們在一開始就使用 Vue-cli
來構(gòu)建項目,因為這需要同學們對 Node.js
、Webpack
等技術(shù)有所了解。在熟悉了 Vue
的語法之后,我們將有一個完整的章節(jié)來學習和使用 Vue-cli
。
6. 小結(jié)
本小節(jié)我們介紹了 Vue
安裝的幾種方式。作為初學者,我們建議同學們先使用第一、第二種方式進行學習。在對 Vue
有一定的了解之后再學習腳手架工具 Vue-Cli
的使用。在接下來 Vue
基礎(chǔ)的章節(jié)中我們都將使用 <script src="https://unpkg.com/vue/dist/vue.js"></script>
的方式進行代碼演示。關(guān)于腳手架工具 Vue-Cli
的學習,我們將在最后一個章節(jié)中一起探討。