vue2+element-ui從頭開始建構一個管理背景通用模闆(1) 超級無敵詳細小白版本
從事前端行業也将近兩年的時間了，做了很多背景管理的項目，最近抽空自己寫一個通用的模闆,友善以後工作使用。
有需要的小夥伴可以直接白嫖。有寫的不好的地方希望大家能指出，我們共同進步。
（本來是想用vue3.0搞一個的，但是害怕坑太多，自己搞不定，就先搞一個2.x的版本。待我再學習學習，把坑先踩一踩，再搞個3.0的）
文章目錄
- vue2+element-ui從頭開始建構一個管理背景通用模闆(1) 超級無敵詳細小白版本
- 前言
- 一、工具準備（安裝過的小夥伴可以直接跳過）
-
- 1.編輯器
- 2.node環境安裝
- 二、環境搭建
-
- 1.安裝vue
- 總結
前言
建構一個通用模闆，需要以下的技術棧 1、熟練JS基礎以及ES6及以上的文法 2、對vue有一定的了解，最好寫過實際的項目 如果以上兩個技術棧還沒有掌握的同學，可以先學習一下，再來搭建我們自己的通用模闆
一、工具準備（安裝過的小夥伴可以直接跳過）
俗話說：工欲善其事，必先利其器
雖然我們是CV（CTRL+C CTRL+V）工程師，但是有一個好的工具，能使我們的開發效率大大提升（增加了我們摸魚的時間）
話不多說，直接進入主題
良仔作為一個走在時尚前沿的前端開發工程師，肯定是選擇最花裡胡哨，啊不，最輕便、最實用、插件多、界面好看的編輯器。是以呢vsCode就是最适合我的編輯器，沒有之一（有我也不承認）。
1.編輯器
連結: 點選跳轉官網下載下傳位址.
安裝大家都會吧，我60歲的老爹都會，你要是不會，我讓我爹去你家裡手把手教你（把車票和住宿報一下就行）
根據你電腦的系統安裝對應的版本就行。
下載下傳完安裝，根據提示安裝就可以。沒有什麼難度。
安裝完打開編輯器，大概就張這個樣子
下載下傳完之後，需要安裝幾個插件，來提高我們的工作效率。
首先呢，肯定是漢化包，對于我這種英語菜鳥來說，肯定是中文啊，不可能用用英文的，這輩子都不可能用英文（要是英文好，誰不用英文版的裝逼啊）。
然後關于vue的插件，會檢查和提示關于vue的文法，強烈建議一定要裝。
還有一個很小衆，但是我覺得超級好用的插件，号稱人工智能補全（确實挺智能的），會根據你寫代碼的習慣，補全後面的代碼。用了它讓你體驗一個Tab鍵一行代碼的快感。
其他的插件呢，大家可以在百度搜一下，關于前端的好用插件，包括好看的主題、字型什麼的，會有很多推薦，大家自行安裝。
2.node環境安裝
安裝完編輯器，我們需要安裝一個node環境，肯定會有人問，為什麼要安裝node呢？不要問，問就是必須安裝，不安裝你就沒有不能下載下傳vue需要的一些包。
首先打開官網
連結: 點選跳轉node官網下載下傳位址.
進入之後你會看到這樣的頁面，英語不好的小夥伴可能就有點頭疼了，應該怎麼下載下傳，不要急，聽我細細道來。
首先呢，chrome浏覽器會自帶一個翻譯功能，小夥伴們可以直接翻譯下載下傳
但是有時候這個翻譯會來大姨媽，翻譯不過來。翻譯不過來也不要慌，良仔告訴你怎麼搞。
LTS: 代表長期穩定版本（下載下傳這個就可以），穩的一匹。具體的英文單詞忘了，有興趣的大家可以去百度搜一下。
Current： 代表目前最新版，可以用，但是保不準會不會出現問題，如果喜歡踩坑的小夥伴可以下載下傳這個版本。
剩下的操作就跟普通的下載下傳一樣。安裝的時候就是無限下一步就可以了（因為都是英文，我也看不懂，看的懂的老鐵們可以根據自己需要安裝）。
安裝完node之後呢 要檢查一下是不是安裝成功。
再桌面點金win+r鍵，輸入cmd，然後回車，會出現這樣一個對話框。（蘋果的老鐵們自行查一下如何打開，窮人實在是買不起蘋果）
就是這個玩意，打開之後，輸入node -v 回車（小寫的v）
如果出現了版本号，恭喜你，你的node就安裝成功了。
如果沒有出現，怎麼辦呢，别着急，重新安裝node就可以了，直到出現node版本号。
二、環境搭建
1.安裝vue
既然我們是vue+element-ui，那肯定是要先安裝一下vue的
根據vue官網的步驟
我們打開cmd（跟檢視node版本一樣）
$ npm install vue
輸入或者複制這個代碼 然後回車
等待安裝完之後我們檢視vue的版本vue -V（大寫V）
這裡出現了@vue/cli 4.3.1，為什麼會出現cli呢？官網給出了我們解釋
cli是vue的腳手架工具，可以讓我們友善快捷的建構vue項目。（我們的項目也是用cli搭建的）
有興趣的老鐵們，可以浏覽一下vue的官網。
總結
到這裡我們環境搭建已經完成了，下一步就要開始建構項目，如果想自己搭建一個自己的背景管理模闆，别猶豫了，趕快開始把。
各位大神手下留情，寫的不好的地方歡迎大家指出，我會虛心接受并改正。