最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

1. 前言

本小節(jié)將帶領(lǐng)大家學(xué)習(xí)一下如何安裝 Vue。包括獨(dú)立版本、CDN、NPM、CLI 工具四種不同的安裝方法。

2. 獨(dú)立版本

我們可以在 Vue.js 的官網(wǎng)上直接下載 vue.min.js 并用<script>標(biāo)簽引入。

安裝步驟:

  1. 打開(kāi)Vue.js下載地址并拷貝所有代碼。
  2. 創(chuàng)建vue.min.js文件,并將拷貝的源碼粘貼進(jìn)去。
  3. 創(chuàng)建index.html并通過(guò)<script>標(biāo)簽引入。
  4. 打印Vue驗(yàn)證是否成功。
//文件結(jié)構(gòu)
└─ lession
   ├─ index.html
   └─ vue.min.js
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功!
<!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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
## 打印結(jié)果
? wn(e){this._init(e)}

3. 使用 CDN 方法

使用 CDN 的方式引入Vue更加方便、快捷。以下推薦幾個(gè)比較穩(wěn)定的 CDN。

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功!
<!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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

4. 使用NPM的方法

使用NPM的方法進(jìn)行安裝需要先在本地安裝Node環(huán)境。

3.1、Windows 上安裝 Node.js

32 位安裝包下載地址
64 位安裝包下載地址
下載對(duì)應(yīng)的安裝包后,雙擊安裝包,傻瓜式下一步安裝就好了。

3.2、Mac 上安裝 Node.js

1、在官方下載網(wǎng)站下載 pkg 安裝包,直接點(diǎn)擊安裝即可。
2、使用 brew 命令來(lái)安裝:brew install node

brew install node
# 查看本地node環(huán)境
$ node -v
v10.16.0

在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝。當(dāng)然,僅僅使用npm install是不能完整搭建Vue開(kāi)發(fā)環(huán)境的。還需要webpackBrowserify 等模塊打包器配合使用。

# 創(chuàng)建項(xiàng)目目錄
$ mkdir demo

# 進(jìn)入項(xiàng)目文件夾
$ cd demo
$ npm init -y

# 最新穩(wěn)定版
$ npm install vue

# 安裝指定版本Vue
$ npm install vue@2.6.3

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

5. 命令行工具(CLI)

當(dāng)然,看過(guò) Vue 官網(wǎng)的同學(xué)肯定都知道 Vue 提供了一個(gè)官方的 CLI,為我們快速搭建大型單頁(yè)應(yīng)用。我們并不建議同學(xué)們?cè)谝婚_(kāi)始就使用 Vue-cli 來(lái)構(gòu)建項(xiàng)目,因?yàn)檫@需要同學(xué)們對(duì) Node.js、Webpack 等技術(shù)有所了解。在熟悉了 Vue 的語(yǔ)法之后,我們將有一個(gè)完整的章節(jié)來(lái)學(xué)習(xí)和使用 Vue-cli。

6. 小結(jié)

本小節(jié)我們介紹了 Vue 安裝的幾種方式。作為初學(xué)者,我們建議同學(xué)們先使用第一、第二種方式進(jìn)行學(xué)習(xí)。在對(duì) Vue 有一定的了解之后再學(xué)習(xí)腳手架工具 Vue-Cli 的使用。在接下來(lái) Vue 基礎(chǔ)的章節(jié)中我們都將使用 <script src="https://unpkg.com/vue/dist/vue.js"></script> 的方式進(jìn)行代碼演示。關(guān)于腳手架工具 Vue-Cli 的學(xué)習(xí),我們將在最后一個(gè)章節(jié)中一起探討。