Web閱讀器開發系列教程（Vue環境篇）

sam9831發表於2018-10-29
WebVue

作者：Sam

前言

上一篇手記中我向大家介紹了ePub標準，沒有讀過的小夥伴可以點選這裡瞭解一下。瞭解ePub標準的原理後，我們就可以正式進入電子書閱讀器的開發環節，本文將帶大家一起了解如何搭建Vue的開發環境。希望快速上手的同學，可以通過下面的連結找到我的課程進行學習。

Vue入門高分課程《快速入門Web閱讀器開發》，已經有6800+小夥伴學習過了，趕快加入吧（立即學習）

免費課DEMO，Web電子書閱讀器（立即體驗）

免費課原始碼（立即下載）

Vue快速進階課程《Vue2.5 實戰微信讀書 媲美原生App的企業級web書城》（立即學習）

實戰課DEMO，高效能的Web閱讀器（立即體驗）

Node.js安裝

nvm介紹

開發Vue專案需要安裝Node.js，我們可以直接到Node.js的官網下載安裝包，下載連結點選這裡，但這樣管理Node.js版本比較麻煩。比如我們安裝了Node 10.10.0版本，現在希望降級到Node 8.9.0版本，我們得尋找Node 8.9.0的安裝包，安裝後還得處理環境變數以及各種相容性問題。nvm（Node.js Version Management）可以解決這個問題，它可以非常有效地管理Node.js版本，nvm原始碼地址：github.com/creationix/…。

nvm安裝方法（以macOS和Linux系統為例）

windows的同學點選這裡下載nvm-windows

安裝nvm前建議先將之前安裝的Node.js解除安裝，macOS解除安裝方法如下：

brew uninstall node
複製程式碼

解除安裝後就可以進行安裝，安裝nvm指令如下：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
複製程式碼

或

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
複製程式碼

安裝時當前使用者根路徑下必須存在.bash_profile檔案（該檔案的用途是在當使用者登入作業系統後，載入相應的環境變數），如果不存在該檔案，可以手動建立一個，再重新執行上述安裝指令碼

touch ~/.bash_profile
複製程式碼

安裝成功後會在.bash_profile檔案中寫入以下內容，以便我們可以直接使用nvm指令

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This l    oads nvm bash_completion
複製程式碼

我們可以重新開啟終端令環境變數生效，或使用如下指令使環境變數立即生效

source ~/.bash_profile
複製程式碼

nvm解除安裝方法很簡單，只需要執行如下指令就可以了：

$ rm -rf "$NVM_DIR"
複製程式碼

因為我們在.bash_profile中定義了：

export NVM_DIR="$HOME/.nvm"
複製程式碼

環境變數$NVM_DIR指向$HOME/.nvm，$HOME指向使用者根目錄，$HOME/.nvm則對應使用者根目錄下的.nvm資料夾，這是nvm的安裝路徑，所以直接刪除即可。執行上述指令後，還要將.bash_profile檔案中安裝nvm時寫入的內容刪除即可（清除nvm指令）。

安裝Node.js和npm

安裝nvm後我們就可以很愉快地管理Node.js版本了，安裝最新的Node.js版本（同時會安裝npm）：

nvm install node
複製程式碼

安裝指定版本Node.js（如安裝10.10.0版本）：

nvm install 10.10.0
複製程式碼

檢視本地已經安裝的Node.js版本

nvm ls
複製程式碼

檢視所有可用的Node.js版本

nvm ls-remote
複製程式碼

切換到最新的Node.js版本

nvm use node
複製程式碼

切換到指定版本的Node.js（如切換到10.10.0版本）

nvm use 10.10.0
複製程式碼

驗證Node.js安裝是否成功

$ node -v

v10.10.0
複製程式碼

驗證npm安裝是否成功

$ npm -v

6.4.1
複製程式碼

Vue CLI 3.0安裝

安裝vue

Vue CLI是Vue的腳手架，可以幫助我們快速搭建Vue專案。Vue CLI 3.0官網地址點選這裡，注意安裝Vue CLI 3.0必須安裝Node.js 8.9.或更高版本，通過以下指令安裝：

npm install -g @vue/cli
複製程式碼

檢查Vue CLI 3.0是否安裝成功

$ vue --version

3.0.5
複製程式碼

vue指令的安裝路徑如下：

$ which vue
/usr/local/bin/vue

$ ll /usr/local/bin/vue 
lrwxr-xr-x  1 root  root  46  9 20 14:16 /usr/local/bin/vue@ -> /Users/sam/.nvm/versions/node/v10.10.0/bin/vue
複製程式碼

由此可見nvm安裝路徑是使用者根目錄下的.nvm資料夾，node版本存放在.nvm/version/node目錄下，按照版本號進行區分，我們下載的@vue/cli包真實存放的路徑為：

/Users/sam/.nvm/versions/node/v10.10.0/lib/node_modules/@vue/cli
複製程式碼

可以推斷出，我們後續通過Node.js v10.10.0安裝的全域性擴充套件都將存放在~/.nvm/versions/node/v10.10.0/lib/node_modules這個目錄下。同理如果我們安裝的是Node.js v8.9.0版本，則擴充套件存放路徑為~/.nvm/versions/node/v8.9.0/lib/node_modules

Vue CLI 3.0原型模式介紹

Vue CLI 3.0增加了原型模式，它可以幫忙我們快速執行獨立的vue檔案，非常適合產品原型實現。使用原型模型需要安裝全域性擴充套件，安裝指令如下：

npm install -g @vue/cli-service-global
複製程式碼

之後，我們手動建立一個App.vue檔案，寫入以下內容

<template>
  <h1>Welcome to {{website}}!</h1>
</template>

<script>
  export default {
    data() {
      return {
        website: 'imooc.com'
      }
    }
  }
</script>

<style scoped>
  h1 {
    background: gray;
    color: white;
  }
</style>
複製程式碼

我們在App.vue的根目錄下執行以下指令：

vue serve
複製程式碼

或

vue serve App.vue
複製程式碼

成功後，會啟動一個web服務

 DONE  Compiled successfully in 1123ms                                  16:15:43

 
  App running at:
  - Local:   http://localhost:8083/ 
  - Network: http://192.168.31.243:8083/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
複製程式碼

此時我們就可以通過http://192.168.31.243:8083/訪問到我們的頁面了，是不是很方便呢？

Vue CLI 3.0腳手架

建立Vue腳手架

Vue CLI 3.0建立腳手架過程更加友好，使用如下指令開始搭建：

vue create my-project
複製程式碼

建立Vue腳手架
之後會讓我們選擇採用預設模式（default）或手動模式（Manually）：

  • 預設模式下，我們無需進行額外選擇，vue會直接按照預設配置進行安裝，整個過程非常迅速；
    腳手架搭建成功
    值得一提的是Vue CLI 3.0會自動檢查我們的網路連線，如果發現npm速度很慢時，會提示是否自動轉為淘寶映象，非常人性：
    自動切換淘寶映象
  • 手動模式下，我們可以獲得更多自主選擇權，下面詳細介紹。

手動模式配置

選擇手動模式後，第一步是選擇需要載入哪些功能，這個根據專案的實際需求來確定：

選擇功能
針對我們選擇的功能，vue會詢問與功能相關的基本配置，這些配置後續可以手動在配置檔案中進行修改，如：

  • vue-router是否啟用history模式
  • 採用哪種css預處理：sass/scss、less和stylus
  • eslint模式：Standard、Airbnb

等等

功能配置
這裡有一個非常重要的配置項：
配置模式
這個配置項會讓我們選擇：是否將所選功能的配置一併放入package.json，或是獨立生成配置檔案。預設模式選擇的是In package.json，選擇這種模式，所有配置檔案都會寫入到package.json中，如果選擇In dedicated config files，則還會和2.0一樣，針對每個功能都生成獨立的配置檔案，如何選擇看個人喜好以及是否需要頻繁改動配置，如果改動配置頻繁，或者配置項較多時，分開管理會更加便利。

預設模式

完成配置後，會提示我們是否儲存配置為預設模式（preset）：

生成預設
如果選擇Yes，則需要我們給預設模式起個名字，之後就可以在下次建立專案時，直接選擇我們設定好的模式了，這個功能非常贊！
選擇預設
如果我們希望修改或刪除自己建立的預設，可以開啟使用者根目錄下的.vuerc檔案進行修改

vim ~/.vuerc
複製程式碼

如果想刪除自定義的預設模式，直接刪除.vuerc檔案即可

rm -f ~/.vuerc
複製程式碼

合併或覆蓋模式

當我們建立專案時，如果vue檢查到該專案已經存在，則會提醒我們是否需要進行合併或更新：

合併或覆蓋

關閉git初始化

Vue CLI 3.0初始化專案時預設會初始化git，因為現在不需要管理和協作的專案越來越少了，但是如果不希望由Vue來初始化git，而希望由手動來進行，可以通過如下方式進行專案初始化：

vue create my-project -n
複製程式碼

或

vue create my-project --no-git
複製程式碼

執行專案

執行專案與2.0並沒有什麼區別，只是預設的執行指令變成了npm run serve

$ cd my-project/
$ npm run serve
複製程式碼

總結

本次向大家詳細介紹了Node.js的安裝方法和Vue CLI 3.0的基本用法，在下一教程中，將進一步向大家介紹Vue CLI 3.0的新特性：UI模式、環境變數以及構建方法等，並會帶大家開發一個簡易的閱讀器，敬請期待。

相關文章