Azure DevOps Server 的連線源（Artifacts）：九、vue示例和自動打包
1. 概述
Vue是一個基於Nodejs的前端框架，目前被廣泛應用於前後端分離的前端開發中。本文演示結合Azure DevOps Server，使用vue快速建立一個web前端應用，並實現自動編譯和打包。
2. 環境準備
參考前面的章節《npm 基礎》中的說明，配置npm環境，並使用淘寶映象作為包檔案的連線源
3. 建立vue示例應用
3.1 在全域性目錄中安裝vue-cli
npm install vue-cli -g
3.2 使用vue-cli初始化web應用hello-vue
vue init webpack hello-vue
如果不熟悉每個引數，一路回車使用預設值，如下圖
命令列將在當前目錄中新建一個目錄hello-vue，並將初始化的html、js和css等儲存在這個目錄中，同時將所有依賴的包下載到node_modules中
D:\temp\vue>vue init webpack hello-vue ? Project name hello-vue ? Project description A Vue.js project ? Author 張洪君 <[email protected]> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "hello-vue". # Installing project dependencies ... # ======================== （此處省略大量日誌資訊。。。。。。）added 1833 packages from 1115 contributors in 118.957s 65 packages are looking for funding run `npm fund` for details Running eslint --fix to comply with chosen preset rules... # ======================== > [email protected] lint D:\temp\vue\hello-vue > eslint --ext .js,.vue src test/unit test/e2e/specs "--fix" # Project initialization finished! # ======================== To get started: cd hello-vue npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack D:\temp\vue>
初始化的專案的資料夾結構如下圖：
3.3 執行專案：npm run dev
在命令列中，或者在vscode的終端中執行下面的命令，可以在開發環境中執行起來web應用
npm run dev
執行的頁面如下圖：
3.3 製作安裝包：npm run build
執行下面的命令，可以將開發人員編寫好的程式碼編譯、壓縮到一個檔案dist中
npm run build
注意，由於編譯後的index.html中的檔案都使用了絕對路徑，如果使用瀏覽器在本地檢視，需要刪除檔案中的根路徑字元/。
4. 使用DevOps Server實現自動打包
4.1 上傳vue專案的原始碼
將vue inti webpack 生成的檔案上傳到DevOps Server的原始碼庫中，注意不要將node_modules上傳到程式碼庫，這是新手經常容易犯的錯誤。伺服器上只需要儲存原始碼，不需要儲存原始碼依賴的的包檔案；開發人員在本地使用npm install即可將所有依賴的包檔案下載到開發目錄中。
4.2 建立流水線，實現自動打包
在DevOps Server中建立流水線，使用命令列工具執行下面的命令：
npm install npm run build
執行成功後，可以在流水線的drop中檢視到vue編譯後生成的檔案：
5. 相關文章
- Azure DevOps Server 的連線源（Artifacts）：一、概述
- Azure DevOps Server 的連線源（Artifacts）：二、nuget包管理
- Azure DevOps Server 的連線源（Artifacts）：三、從Artifacts中下載Nuget包
- Azure DevOps Server 的連線源（Artifacts）：四、python基礎（Django、Flask）
- Azure DevOps Server 的連線源（Artifacts）：五、python包管理pip和twine
- Azure DevOps Server 的連線源（Artifacts）：六、釋出python程式（Twine pip）
- Azure DevOps Server 的連線源（Artifacts）：七、NPM 基礎知識
- Azure DevOps Server 的連線源（Artifacts）：八、 npm釋出和安裝包
- Azure DevOps Server 的連線源（Artifacts）：九、vue示例和自動打包
如果需要，你還可以從微軟Azure DevOps Server 的線上文件，查詢更多的權威資料，也歡迎通過下面的聯絡方式與我溝通，相互學習，相互提高！
https://www.cnblogs.com/danzhang
Azure DevOps MVP 張洪君