亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

此間少年_ · 更新于 2020-11-26

1. 前言

本小節將帶領大家學習一下如何安裝 Vue。包括獨立版本、CDN、NPM、CLI 工具四種不同的安裝方法。

2. 獨立版本

我們可以在 Vue.js 的官網上直接下載 vue.min.js 并用<script>標簽引入。

安裝步驟：

  1. 打開Vue.js下載地址并拷貝所有代碼。
  2. 創建vue.min.js文件，并將拷貝的源碼粘貼進去。
  3. 創建index.html并通過<script>標簽引入。
  4. 打印Vue驗證是否成功。
//文件結構
└─ 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>
運行案例 點擊 "運行案例" 可查看在線運行效果
## 打印結果
? wn(e){this._init(e)}

3. 使用 CDN 方法

使用 CDN 的方式引入Vue更加方便、快捷。以下推薦幾個比較穩定的 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環境。

3.1、Windows 上安裝 Node.js

32 位安裝包下載地址
64 位安裝包下載地址
下載對應的安裝包后，雙擊安裝包，傻瓜式下一步安裝就好了。

3.2、Mac 上安裝 Node.js

1、在官方下載網站下載 pkg 安裝包，直接點擊安裝即可。
2、使用 brew 命令來安裝：brew install node

brew install node

# 查看本地node環境
$ node -v
v10.16.0

在用 Vue 構建大型應用時推薦使用 NPM 安裝。當然，僅僅使用npm install是不能完整搭建Vue開發環境的。還需要webpack或 Browserify 等模塊打包器配合使用。

# 創建項目目錄
$ mkdir demo

# 進入項目文件夾
$ cd demo
$ npm init -y

# 最新穩定版
$ npm install vue

# 安裝指定版本Vue
$ npm install [email protected]

安裝完成后可以查看到demo目錄下多了 node_module/vue 文件夾。說明Vue成功安裝。

5. 命令行工具（CLI）

當然，看過 Vue 官網的同學肯定都知道 Vue 提供了一個官方的 CLI，為我們快速搭建大型單頁應用。我們并不建議同學們在一開始就使用 Vue-cli 來構建項目，因為這需要同學們對 Node.js、Webpack 等技術有所了解。在熟悉了 Vue 的語法之后，我們將有一個完整的章節來學習和使用 Vue-cli。

6. 小結

本小節我們介紹了 Vue 安裝的幾種方式。作為初學者，我們建議同學們先使用第一、第二種方式進行學習。在對 Vue 有一定的了解之后再學習腳手架工具 Vue-Cli 的使用。在接下來 Vue 基礎的章節中我們都將使用 <script src="https://unpkg.com/vue/dist/vue.js"></script> 的方式進行代碼演示。關于腳手架工具 Vue-Cli 的學習，我們將在最后一個章節中一起探討。