從17年就開始關注vue相關技術棧隆箩，但基于項目技術選型，一直沒有在正式項目中使用琼梆，我也沒有真正用vue框架寫過項目。這次疫情在家遠程辦公窿吩，正好有個項目歸我負責茎杂，就想趁此機會把vue應用到實戰(zhàn)。
為了更好更快的走上正軌纫雁，今日特意邀請表弟來我家向他學習（他已經(jīng)有過好幾個相關項目經(jīng)驗煌往，還獲得了鵝廠的offer，這種資源必須好好利用，哈哈）刽脖。
先簡要介紹下自身前端知識情況：
①有html和css基礎羞海，能獨自完成c#傳統(tǒng)模式web前端開發(fā)（包括pc端和移動端）；
②有js及jquery工具使用經(jīng)驗曲管；
為了使用vue框架却邓，斷斷續(xù)續(xù)進行了一些知識補充：
①學習es6基礎知識；
②學習vue基礎知識院水；
③學習vscode開發(fā)工具及相關插件腊徙；
下面介紹下今天如何通過vue和elementui搭建我的項目：
①安裝vscode、nodejs檬某；
②在磁盤中新建項目文件夾撬腾，并拖入到vscode中；
③在vscode的控制臺使用npm方式安裝vue恢恼、vue-router民傻、element-ui、axios场斑；這一步默認會生成app.vue漓踢、main.js、package.json和簸、components等文件彭雾。其中app.vue是項目主入口，main.js進行各種插件引用控制锁保、package.json主要是項目的各種依賴庫配置文件薯酝。（這里有個小知識點：^代表使用插件最新版本，～代表使用插件最合適的版本爽柒，其中vue插件我們需要去掉^吴菠，使用固定版本，升級最新版本可能導致不兼容浩村。）
④在根目錄下新建vue.config.js文件做葵，里面配置訪問服務器接口相關內(nèi)容（代理、跨域心墅、地址轉(zhuǎn)換等）酿矢；
⑤在component文件夾下建立**.vue頁面，拖入elementui組件怎燥；
⑥在根目錄下新建router文件夾瘫筐，并新建index.js文件，用來控制路由铐姚，導入**.vue頁面策肝，并設置好名字和路徑；
⑦app.vue中通過elementui簡單畫出上中下結(jié)構(gòu)頁面，其中上之众、下部分不變拙毫，中間部分通過路由加載進來（使用<routerview/>作為接收器）；
⑧在main.js中配置vue棺禾、vue--router缀蹄、element-ui、axios引用帘睦，axios需要特殊處理袍患；
⑨新建server文件，與項目同級竣付，使用nodejs編寫簡易接口返回json數(shù)據(jù)诡延；
⑩在app.vue中編寫點擊事件，通過axios請求接口數(shù)據(jù)并打印古胆，如果成功輸出肆良，則初步上手完成。
