從零開始搭建一個規範的vue-cli 3.0項目

在這一集咱們將講到如何從安裝vue-cli開始，到新建一個本地項目，再到vscode中關於eslint的配置，以及本地項目關聯公司遠程項目的基本操做。

 

一，初始化本地項目

1，首先，全局安裝vue-cli 3.0

 

2.檢查vue-cli的版本,肯定是3.0以上

 

3，新建一個叫question-editor的本地項目，注意這裏的配置，預設置選擇手動，勾選必要的Babel,Router,CSS預處理器,Linter格式化工具。不選擇歷史模式，CSS預處理器的選擇看我的喜愛，SCSS和Less其實語法區別不大，而ESLint的配置選擇airbnb（在eslint的官方地址中star數高居第一，遠超prettier和standard的存在），選擇在保存時自動lint，獨立放置配置文件，便可等待其初始化完成。

  (順便吐槽一下，在windows系統中的git bash方向鍵有問題，因此這裏才用回自帶的powershell來建項目)

　　說一下歷史模式這個問題，關於歷史模式和哈希模式的區別不單單是有沒有#號這麼簡單，歷史模式還帶來了關於二級菜單刷新出現404，重定向等問題，而哈希模式在url中僅僅是多了一個#號，就能夠避免歷史模式的全部缺陷，以及提供低版本瀏覽器甚至是ie的支持！因此在此牆裂不推薦使用歷史模式。

 

二，在vscode中配置eslint

1，首先，個人vscode一開始在插件方面以及設置方面以下，能夠看到是很是簡單的，插件只有一個漢化工具、代碼提交者追查工具、代碼特效工具、.vue文件語法高亮工具。而在setting.json中，僅僅是配了顏色主題、shell終端、代碼煙花特效而已。

 

2.拋棄vetur格式化功能。

　　在這個時候，若是咱們在一個vue文件中，書寫一些代碼以下，會發現是能夠格式化的。

　　          

　　若是你對eslint的airbnb有所瞭解，那麼你必定知道它有兩條大名鼎鼎的規矩：第一，字符串必須爲單引號；第二，函數語句沒必要加分號。

　　而在咱們執行完格式化後（快捷鍵Alt+Ctrl+F），這兩個規矩都被破壞了，產生這種現象的緣由是vscode默認是不支持vue文件的格式化，而Vetur插件自帶了格式化工具。因此在vue文件中執行格式化操做的時候 ，先在vscode自身找格式化工具，找不到就到插件中找，而後在Vetur裏面找到了，而後執行Vetur自帶的格式化標準。

　　而Vetur的格式化標準叫作prettier,這玩意跟airbnb標準是不太同樣的。能夠在設置中驗證這一點。

　　

　　雖然是不同，可是呢，Vetur自帶的超多種格式化標準能夠美化HTML，CSS甚至是LESS、SCSS。因此，除了Vetur除了做爲一個語法高亮工具，能給vue文件上點顏色，還能夠在正式格式化前進行一次美化操做，雖然同時伴隨的eslint prettier效應不可避免，但會在稍後的ctrl+s正式格式化時被覆蓋掉。

　　因此個人建議是：先Alt+Shift+F預格式化，再Ctrl+S正式格式化。

3.把正式格式化工做交給eslint插件去完成。

　　而後就能夠安裝eslint插件，安裝這承載着全項目正式格式化但願的關鍵插件。

　　

　　安裝完成後，咱們須要配置一下eslint的validate(也就是eslint在哪兒生效)，setting.json更改以下：

       

　　如今來試試效果：

　　                   

　　哦對了，在windows還會遇到Expected linebreaks to be 'LF' but found 'CRLF'這個問題，這是由於不一樣的操做系統對於換行符的定義不一樣，windows是回車換行（CR+LF）,而在Linux和Unix中是簡單換行(LF),默認爲LF。至於換行這件事情，不止和操做系統有關，有時候不一樣的編輯器也可能致使換行符的問題，而這些所謂的「換行問題」並不會反映到代碼中，你根本看不着這東西，因此在eslintrc.js中，把換行檢測關閉就能夠了。

　　

 

三，線上對接項目（GitLab）

　　1，在GitLab中新建一個項目，這時候會發現，項目名稱會帶有我的用戶名前綴：

　　

　　這固然是不科學的，由於我在新建的是一個公司的項目，而不是我的項目，出現這種尷尬的現象是由於在GitLab羣組中，分爲三個角色：

　　Owner(羣主，擁有全部權限) -->Maintainer（管理員，能夠新建組內項目）--> Developer(開發者，只負責開發)；

　　好吧，我是Developer,因此我去找了個Maintainer同事來幫我建項目

　　

　　如今項目已經被同事建好了，我如今要作的就是把本地倉庫和遠程倉庫進行關聯。

　　複製一下項目的ssh key，回到本地項目看看本地的狀態。

　　

　　把遠程倉庫與本地倉庫相關聯的命令是git remote add origin <一個項目的ssh地址>,而第一次推的時候加上-u參數是爲了把本地master分支與遠程master分支相關聯，有關git的更多內容請移步至廖大大的官網，這裏不詳細講各類git操做了，附上地址：廖雪峯git教程。

　　

　　打開GitLab，發現已經推上去了。

　　固然，要讓這個項目真正在線上運行，根據咱們的每次代碼提交能夠看到最新的線上內容，咱們還要搞一下CI，這個下一集在講如何手擼CI。