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

做者：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
複製代碼

以後會讓咱們選擇採用默認模式（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模式、環境變量以及構建方法等，並會帶你們開發一個簡易的閱讀器，敬請期待。