[Vue 牛刀小試]：第十六章 - 針對傳統後端開發人員的前端項目框架搭建

 1、前言

　　在以前學習 Vue 基礎知識點的文章中，咱們仍是採用傳統的方式，經過在 html 頁面上引用 vue.js 這個文件，從而將 Vue 引入到咱們的項目開發中。伴隨着 Node.js 的出現，以及 React、Angular、Vue 這類的前端 MVVM 框架的發展，前端愈來愈像後端靠攏，前端工程化的思想開始出現。如今的前端開發，已經再也不只是一個 html 頁面，上面引用各類 js、css 文件就能夠完成開發的了。

　　與後端相似，前端開始出現各類已經很完善的框架模板、開始出現針對前端組件包的管理工具、各類各樣的單元測試庫，以及針對前端所特有的 js、css、image...這種靜態資源文件的模塊打包器。那麼，從本篇文章開始，咱們就從零開始，結合以前學習的 Vue 相關的基礎知識，經過 Vue CLI 和 Element UI 去搭建一個基於 Vue 的 SPA 前端項目框架模板。

　　系列目錄地址：http://www.javashuo.com/article/p-bzzucmub-ba.html

　　倉儲地址：https://github.com/Lanesra712/Grapefruit.VuCore/tree/master/app/grapefruit.ui

 2、乾貨合集

　　Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統框架，它是一個框架生成腳手架工具，能夠幫助咱們生成基於 Vue 的前端框架模板，咱們能夠在這個基礎上進行基於 Vue 的前端開發。你能夠把它理解爲咱們 .NET 平臺中微軟所提供的各類基礎的開發框架模板，就像 ASP.NET Core Web API 或者是 ASP.NET Core MVC 這一類的基礎框架，咱們能夠在這個框架模板上進行開發，從而開發出具備統一標準、規範化的項目。

　　 Element UI 則是餓了麼基於 Vue.js 所作的一套前端組件庫，你能夠把它理解成相似於 Boostrap 或是 EasyUI 這種前端的 UI 庫基於 Vue 中組件的思想所實現的前端庫。經過使用這套組件庫，咱們就能夠更好地統一整個項目的前端樣式以及更加方便的進行開發。固然，你也能夠採用別的組件庫或是本身手寫一套。

　　一、安裝

　　在使用 Vue CLI 以前，咱們首先須要安裝這個組件包，你能夠經過 npm 或是 yarn 的方式進行安裝，固然，前提是你須要在你的電腦上安裝好 Node.js。整個安裝的過程很簡單，你能夠從我以前寫的 ASP.NET Core 實戰：使用 ASP.NET Core Web API 和 Vue.js，搭建先後端分離框架 這篇文章中來查看如何安裝 Node.js 和 Vue CLI。

　　若是你安裝已經完成，咱們就能夠經過命令行或是腳手架自帶的項目管理頁面去搭建一個屬於你的 Vue 前端項目框架模板，這裏我就選擇命令行的方式進行建立項目。固然，在建立項目前咱們須要經過命令來查看組件包的安裝是否正確。你能夠經過下面的命令去檢查安裝是否正確，當控制檯輸出版本信息後，則表明你的組件包已經成功安裝了。

vue --version ## 查看安裝的 vue cli 版本信息

　　二、初始化項目

　　當咱們安裝完成後，咱們就能夠經過命令行去建立一個前端項目模板。首先，進入你須要建立項目的路徑下，打開終端，而後使用下面的命令來建立咱們的項目。由於某些緣由，鏈接 npm 源的速度可能會比較慢，因此在建立項目時，Vue CLI 會提示咱們是否將淘寶的鏡像源添加 npm 中，從而加快咱們訪問的速度，你能夠自由選擇。

# vue create 項目名稱
vue create grapefruit.ui

　　此時，從控制檯中能夠看到給出了兩個選項，第一項爲系統預設的項目模板配置，而第二項則是咱們能夠本身選擇咱們的項目模板須要加載什麼前端組件。這裏，咱們選擇第二項，本身來決定加載什麼組件。

　　在選擇前端組件時，咱們能夠經過上下方向鍵進行切換，經過空格鍵進行選擇，當決定好項目加載的組件後，咱們能夠經過 Enter 鍵來進行肯定。在這個模板項目中，我添加了上圖所示的五個組件，你能夠根據本身的需求進行按需加載。每一個組件的基本功能介紹以下。

　　Babel：這是一個 JavaScript 轉碼器，當咱們使用新的語法時，舊版本的瀏覽器可能就沒法支持這種新的語法，經過 Babel，咱們就能夠添加不一樣的轉換規則，從而就能夠自動的將新版本的語法糖轉換成傳統的 JavaScript 語法。

　　TypeScript：它提供了一些 JavaScript 不支持的強語言特性，例如，類、接口、參數類型約束等等，它使 JavaScript 寫起來更像咱們的 C# 或是 Java 這種強類型語言，固然最終仍是會編譯成 js 文件從而讓瀏覽器識別出。

　　PWA：漸進式的 Web 應用，主要是利用提供的標準化框架，在網頁應用中實現和原生應用相近的用戶體驗，讓用戶覺得本身正在使用的是原生應用，微信的小程序其實就能夠當作是一種 PWA 應用的載體。

　　Router：這個你們應該很熟悉了，在前面的文章中咱們也有介紹過，是 Vue 官方的路由管理組件。

　　Vuex：一個 Vue.js 中的狀態管理模式，這裏的狀態能夠簡單理解爲數據。由於在使用 Vue 的開發中，咱們會編寫各類組件，有些時候，多個組件之間須要共享相同的數據，以及，各個組件之間的數據傳遞也比較複雜，因此咱們須要一個集中式的狀態管理器從而更好的管理數據，方便組件之間的通訊。

　　CSS Pre-processors：CSS 的預處理器，可讓咱們以一種編程的方式來寫 CSS 文件，固然最終它們都會被編譯器編譯成標準 css 文件。

　　Linter / Foramtter：代碼格式檢查和格式化工具，主要是爲了讓咱們的項目中寫的代碼能夠更好的採用統一的風格。

　　Unit Testing / E2E Testing：單元測試工具

 

　　當咱們選擇好須要加載的組件後，就能夠繼續了。由於咱們加載了 Vue Router，因此這裏咱們須要對前端路由的模式進行設定，這裏咱們繼續使用 history 路由模式。

　　以後，咱們須要選擇一個 CSS 的預處理器，根據你本身的使用習慣選擇便可。

　　由於以前有加載 ESLint 代碼格式化組件，因此這裏咱們須要加載格式化和代碼風格的規則，這裏我選擇的是 Airbnb 的規範，你能夠本身選擇其餘的，固然你也能夠編寫出屬於你本身的代碼規範。

　　執行 ESLint 檢查的時間節點，這裏我所有勾選上。同時，若是你和我同樣使用的是 VS Code 進行開發的話，你能夠安裝 ESLint 插件，這樣在編寫代碼時，就會自動提示出不符合規範的代碼。

　　加載的這些組件，須要一個配置文件進行配置，你能夠選擇所有放到 package.json 中，也能夠選擇將每一個組件的配置單獨放到一個配置文件中。這裏我選擇一個組件一個配置文件。

　　最後一步，是否保存此次的設置，若是保存的話，下次在建立項目時就能夠直接使用了。

　　而後，慢慢等待項目依賴的組件加載完成，這一步的快慢，取決你的網速和人品，請坐和放寬。

　　當全部的依賴加載完成後，系統提示咱們進入到項目路徑，而後執行 npm run serve 命令。

　　當咱們執行 npm 命令後，能夠看到項目已經運行起來了，咱們能夠打開瀏覽器進行查看，當出現下面的頁面時，恭喜你，項目的基礎模板已經搭建的差很少了。

　　項目的基礎模板已經能夠正常運行了，如今咱們就能夠將 Element UI 添加到咱們的項目中。餓了麼爲 Vue CLI 3 準備了相應的模板插件，因此這裏咱們就能夠直接經過命令來加載 Element 插件到咱們的項目中。

vue add element

　　由於整個項目會基於 Element 的組件進行搭建，因此這裏咱們直接選擇全局引入；對於默認的樣式，這裏咱們不作任何的修改，以後選擇簡體中文。當插件安裝完成後，咱們能夠從新運行咱們的項目進行查看。能夠看到，頁面上已經添加了一個 Element UI 中的按鈕組件。

　　當 Element UI 安裝完成後，餓了麼官方也有針對 VS Code 的插件，因此這裏咱們也能夠安裝，從而更便捷在項目開發中使用到 Element 中的組件。

　　同時，做爲一個完整的項目，咱們須要與採用 ASP.NET Core Web API 開發的後端進行數據交互，因此咱們須要添加 axios 這個組件庫，這裏咱們使用 npm 安裝便可。至此，咱們的項目的基礎框架模板就已經建立完成了。

npm install axios

 3、總結

　　  這一章主要是學習如何經過 Vue CLI 3 和 Element UI 去搭建一個基礎的前端項目。在下一篇文章中，我將參考文章最後列出的參考文章和 vue-admin-template 這個模板對咱們的項目進行調整，從而適應咱們本身的開發習慣。

 4、參考

　　一、從0到1搭建Element的後臺框架

　　二、vue-cli3 項目從搭建優化到docker部署

　　三、一張圖教你快速玩轉vue-cli3

　　四、手摸手，帶你用vue擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)