手把手教你用VUE開發後臺管理系統（一）：搭建VUE環境

1、VUE是什麼

      【官方介紹】Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

       具體請參考VUE官網： https://cn.vuejs.org/v2/guide/#     如今官網還有視頻教學

2、爲何要學習VUE

        以往，開發企業管理程序都是用的MVC架構，前端V通常只管展現，強依賴後端的控制端，開發人員開發一個需求要麼是從前端一直開發到後端，又或者是前端、後端分開開發，但先後端是緊耦合的，先後端開發人員常常得互相等待，應用程序也不能分開佈署，沒有彈性，因此爲了解決這些問題，漸漸發展成了先後端分離的方式，先後端定義好接口後就互不依賴，能夠先分開開發，調試，很是方便，也很容易分開佈署，提高彈性。固然VUE也能夠在之前的開發方式中直接嵌入使用，但通常不推薦。

        我計劃寫一系列博文來帶你們開發一個基於VUE+SpringBoot+SpringSecurity+Mybatis+Mysql的先後端分離的管理系統，本系列博文就是前臺部份。

3、搭建VUE環境

       一、安裝Node

            vue的運行是要依賴於node的npm的管理工具來實現，因此第一步須要安裝Node，進入到http://nodejs.cn/download/官網，根據自已的windows操做系統是32位的仍是64位的選擇相應的版本，以下圖，我習慣於下載zip的，下載後直接解壓到一個目錄，而後把該目錄的路徑加到windows的環境變量path中便可，此時在windows中運行cmd，進入到命令行，輸入node -v，顯示node的版本即表示安裝成功，以下圖：

 

 

        二、安裝VUE-CLI

             VUE-CLI是一相基於Webpack的vue模板項目，咱們的項目基於此模板項目開發，因此建第一個項目前須要先安裝VUE-CLI，後面再新建項目就不須要了。

             在Windows命令行執行以下命令：npm install vue-cli -g 便可。

        三、新建項目

              先在windows上新建一個項目文件夾，在windows命令行上進入到此目錄，執行以下命令：vue init webpack，而後根據提示輸入項目名等，以下圖：

 

     四、安裝項目依賴

          繼續在windows命令行上執行（項目目錄下）：npm install    注：如今新的node版本已不須要執行此命令了，若是是用的node老版本則須要執行。

     五、運行項目

          繼續在windows命令行上執行（項目目錄下）： npm run dev    ，運行成功後以下圖一，打開IE輸入： http://localhost:8080便可打開項目，見下圖二: 

            注：因爲我已打開一個vue項目，因此下面圖中的圖口號自動變爲了8081，具體是哪個端口，你們能夠看下圖中的紅框部份

             

 

                                                                                                                    圖一

                                                                                                    圖二

4、安裝開發工具

      理論上建好vue能夠用任何文本文件開發工具來開發，但一個好的工具能夠事半功倍，這裏我推薦用VSCode，在瀏覽器中輸入https://code.visualstudio.com/ ,選擇相應的版本下載安裝便可。安裝後打開vscode，在文件菜單中選擇打開文件夾，選擇自已的項目文件夾，打開便可看到該項目的全部源代碼。