vue-cli

參考：https://cli.vuejs.org/zh/guide/

本文只記錄Vue CLI裏關於npm的一些使用（vue-cli 3.x）

1、基礎

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。Vue CLI 的包名稱由 vue-cli 改爲了 @vue/cli。 若是你已經全局安裝了舊版本的 vue-cli(1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

一、安裝@vue/cli：npm install -g @vue/cli

安裝以後，你就能夠在命令行中訪問 vue 命令。你能夠經過簡單運行 vue，看看是否展現出了一份全部可用命令的幫助信息，來驗證它是否安裝成功。

查看Vue CLI版本：vue -V或vue --version

二、使用vue腳手架（Vue CLI）建立一個項目

vue create hello-vue

三、 插件

每一個 CLI 插件都會包含一個 (用來建立文件的) 生成器和一個 (用來調整 webpack 核心配置和注入命令的) 運行時插件。當你使用 vue create 來建立一個新項目的時候，有些插件會根據你選擇的特性被預安裝好。若是你想在一個已經被建立好的項目中安裝一個插件，可使用 vue add 命令。

vue-router 和 vuex 的狀況比較特殊——它們並無本身的插件，可是你仍然能夠這樣添加它們

四、CLI 服務

CLI 服務 (@vue/cli-service) 是一個開發環境依賴。它是一個 npm 包，局部安裝在每一個 @vue/cli 建立的項目中。

CLI 服務是構建於 webpack 和 webpack-dev-server 之上的。它包含了：加載其它 CLI 插件的核心服務；一個針對絕大部分應用優化過的內部的 webpack 配置；項目內部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

在一個 Vue CLI 項目中，@vue/cli-service 安裝了一個名爲 vue-cli-service 的命令。你能夠在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令。

package.json：

 

• vue-cli-service serve

vue-cli-service serve 命令會啓動一個開發服務器 (基於 webpack-dev-server) 並附帶開箱即用的模塊熱重載。除了經過命令行參數，你也可使用 vue.config.js 裏的 devServer 字段配置開發服務器。

• vue-cli-service build

vue-cli-service build 會在 dist/ 目錄產生一個可用於生產環境的包，帶有 JS/CSS/HTML 的壓縮，和爲更好的緩存而作的自動的 vendor chunk splitting。

• vue-cli-service inspect

可使用 vue-cli-service inspect 來審查一個 Vue CLI 項目的 webpack config。 

• 查看可用命令

有些 CLI 插件會向 vue-cli-service 注入額外的命令。例如 @vue/cli-plugin-eslint 會注入 vue-cli-service lint 命令。

查看全部注入的命令：npx vue-cli-service help

學習每一個命令可用的選項：npx vue-cli-service help [command]

 

2、開發

一、webpack相關

由於 @vue/cli-service 對 webpack 配置進行了抽象，因此理解配置中包含的東西會比較困難，尤爲是當你打算自行對其調整的時候。vue-cli-service 暴露了 inspect 命令用於審查解析好的 webpack 配置。那個全局的 vue 可執行程序一樣提供了 inspect 命令，這個命令只是簡單的把 vue-cli-service inspect 代理到了你的項目中。該命令會將解析出來的 webpack 配置、包括鏈式訪問規則和插件的提示打印到 stdout。

 你能夠將其輸出重定向到一個文件以便進行查閱：vue inspect > output.js。注意它輸出的並非一個有效的 webpack 配置文件，而是一個用於審查的被序列化的格式。

 vue.config.js 是一個可選的配置文件，若是項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個對象。對象將會被 webpack-merge 合併入最終的 webpack 配置。

有些 webpack 選項是基於 vue.config.js 中的值設置的，因此不能直接修改。例如你應該修改 vue.config.js 中的 outputDir 選項而不是修改 output.path；你應該修改 vue.config.js 中的 publicPath 選項而不是修改 output.publicPath。這樣作是由於 vue.config.js 中的值會被用在配置裏的多個地方，以確保全部的部分都能正常工做在一塊兒。

// vue.config.js
module.exports = {
  // 選項...
}

二、部署

 若是你用 Vue CLI 處理靜態資源並和後端框架一塊兒做爲部署的一部分，那麼你須要的僅僅是確保 Vue CLI 生成的構建文件在正確的位置，並遵循後端框架的發佈方式便可。若是你獨立於後端部署前端應用——也就是說後端暴露一個前端可訪問的 API，而後前端其實是純靜態應用。那麼你能夠將 dist 目錄裏構建的內容部署到任何靜態文件服務器中，但要確保正確的 publicPath。

dist 目錄須要啓動一個 HTTP 服務器來訪問 (除非你已經將 publicPath 配置爲了一個相對的值)，因此以 file:// 協議直接打開 dist/index.html 是不會工做的。在本地預覽生產環境構建最簡單的方式就是使用一個 Node.js 靜態文件服務器，例如 serve。

 

3、擴展

一、NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：

• 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
• 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
• 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

因爲新版的nodejs已經集成了npm，因此以前npm也一併安裝好了。一樣能夠經過輸入 "npm -v" 來測試是否成功安裝。

yarn是另外一種包管理工具

二、package.json

• dependencies字段，devDependencies字段

參考：https://blog.csdn.net/wangguoyu1996/article/details/80443861

dependencies字段指定了項目運行所依賴的模塊，devDependencies指定項目開發所須要的模塊。devDependencies  裏面的插件只用於開發環境，不用於生產環境，而 dependencies  是須要發佈到生產環境的。

好比咱們寫一個項目要依賴於jQuery，沒有這個包的依賴運行就會報錯，這時候就把這個依賴寫入dependencies ；而咱們使用的一些構建工具好比glup、webpack這些只是在開發中使用的包，上線之後就和他們不要緊了，因此將它寫入devDependencies。

npm install -d/D 就是npm install --save-dev（--save-dev表示將該模塊寫入devDependencies屬性，即下文提到的「項目內部安裝的模塊」）

npm insatll -s/S 就是npm install --save（--save參數表示將該模塊寫入dependencies屬性）

• scripts字段

參考：http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

npm 容許在package.json文件裏面，使用scripts字段定義腳本命令。

上面代碼是package.json文件的一個片斷，裏面的scripts字段是一個對象。它的每個屬性，對應一段腳本。好比，build命令對應的腳本是node build.js。命令行下使用npm run命令，就能夠執行這段腳本。

npm 腳本的原理：每當執行npm run，就會自動新建一個 Shell，在這個 Shell 裏面執行指定的腳本命令。比較特別的是，npm run新建的這個 Shell，會將當前目錄的node_modules/.bin子目錄加入PATH變量，執行結束後，再將PATH變量恢復原樣。這意味着，當前目錄的node_modules/.bin子目錄裏面的全部腳本，均可以直接用腳本名調用，而沒必要加上路徑。

三、npx

參考：http://www.ruanyifeng.com/blog/2019/02/npx.html

npm 從5.2版開始，增長了 npx 命令。Node 自帶 npm 模塊，因此能夠直接使用 npx 命令。萬一不能用，就要手動安裝一下：npm install -g npx

npx 想要解決的主要問題，就是調用項目內部安裝的模塊。

package.json部分代碼：

   

通常來講，調用項目內部安裝的模塊如vue-cli-service ，能夠藉助 package.json 的scripts字段，

也能夠像下面這樣（項目的根目錄下執行）

  

若是藉助npx，就能夠

npx 的原理很簡單，就是運行的時候，會到node_modules/.bin路徑和環境變量$PATH裏面，檢查命令是否存在。

四、webpack

1）代碼分離是 webpack 中最引人注目的特性之一。此特性可以把代碼分離到不一樣的 bundle 中，而後能夠按需加載或並行加載這些文件。代碼分離能夠用於獲取更小的 bundle，以及控制資源加載優先級，若是使用合理，會極大影響加載時間。

2）DefinePlugin

DefinePlugin 容許建立一個在編譯時能夠配置的全局常量。這可能會對開發模式和發佈模式的構建容許不一樣的行爲很是有用。若是在開發構建中，而不在發佈構建中執行日誌記錄，則可使用全局常量來決定是否記錄日誌。

每一個傳進 DefinePlugin 的鍵值都是一個標誌符或者多個用 . 鏈接起來的標誌符。

注意，由於這個插件直接執行文本替換，給定的值必須包含字符串自己內的實際引號。一般，有兩種方式來達到這個效果，使用 '"production"', 或者使用 JSON.stringify('production')。

// config/prod.env.js
module.exports = {
  NODE_ENV: '"production"'
}

// webpack.prod.conf.js
const env = require('../config/prod.env')
//...
new webpack.DefinePlugin({
  'process.env': env
})

五、nodejs

1）process對象是 Node 的一個全局對象，提供當前 Node 進程的信息。它能夠在腳本的任意位置使用，沒必要經過require命令加載。

process對象提供一系列屬性，用於返回系統信息。

process.env屬性返回一個對象，包含了當前Shell的全部環境變量。好比，process.env.HOME返回用戶的主目錄。

一般的作法是，新建一個環境變量NODE_ENV，用它肯定當前所處的開發階段，生產階段設爲production，開發階段設爲develop或staging，而後在腳本中讀取process.env.NODE_ENV便可。

六、vue-router

1）HTML5 History 模式

參考：https://router.vuejs.org/zh/guide/essentials/history-mode.html

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。（如：http://localhost:5000/#/about）

若是不想要很醜的 hash，咱們能夠用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id。不過這種模式要玩好，還須要後臺配置支持。由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404。因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

這麼作之後，你的服務器就再也不返回 404 錯誤頁面，由於對於全部路徑都會返回 index.html 文件。爲了不這種狀況，你應該在 Vue 應用裏面覆蓋全部的路由狀況，而後在給出一個 404 頁面。或者，若是你使用 Node.js 服務器，你能夠用服務端路由匹配到來的 URL，並在沒有匹配到路由的時候返回 404，以實現回退。