spring boot 整合vue,支持 element-ui , 開發(fā)工具: IDEA
前端早已經(jīng)不是之前人們口中的“摳圖仔”伐弹，只是寫寫簡單的HTML然低，CSS和腳本動畫鹿蜀。前端技術(shù)在最近十年的時間里飛速發(fā)展庵佣，一方面是移動互聯(lián)網(wǎng)的興起，帶動移動端瀏覽器用戶需求的飛速增加，另一方面是Angular,React,Vue等框架和Node.js劝篷，ES6等新技術(shù)的出現(xiàn)和發(fā)展哨鸭，帶動了前端技術(shù)的飛速提升。那么我們怎么整合呢娇妓？
現(xiàn)在開始:
前提需安裝Node.js,并配置好環(huán)境變量,不會配置的同學(xué)可自己百度!!!也可以看我的一篇文章安裝和解決Node.js
然后在IDEA中的自帶Terminal里,運行腳本以驗證是否安裝成功;
也可以用快捷鍵WIN+R彈出運行框,然后輸入cmd,以打開cmd終端命令:
IDEA終端Terminal打開方法:在IDEA中點擊view→tool window→Terminal即可開啟,或按住ALT+F12（如果是筆記本按不出來的話再加個Fn鍵）
我們在cmd或者IDEA終端Terminal中.分別輸入 node -v 和 npm -v , 如果出現(xiàn)了相應(yīng)的版本號,那么恭喜你安裝成功,如果過沒成功,請自行百度,查找原因!!!
1. 在Terminal中輸入 : npm install -g cnpm --registry=https://registry.npm.taobao.org,? 然后回車鍵,安裝淘寶鏡像
2.? 在Terminal中輸入 :cnpm install -g webpack? 然后回車鍵,稍等片刻,安裝會運行一段時間
3. 在Terminal中輸入 :cnpm install -g vue-cli ? 然后回車鍵,安裝VUE腳手架? 同樣會下載安裝一會,別急
4.? 在Terminal中輸入 : vue init webpack + 項目名? 因為我已經(jīng)在項目目錄中了,我就直接輸入的vue init webpack,回車然后出現(xiàn)如下圖,按照我的操作即可:
有的你就回車確認,有的你就選擇yes或者no
5.? 在Terminal中輸入 : cnpm install? 回車鍵, 安裝依賴
6. 在Terminal中輸入 : npm run dev 回車鍵,啟動項目
這時像鸡，打開瀏覽器，訪問http://localhost:8080,出現(xiàn)vue的大V即成功了!!!
①. 我們的App.vue就是我們默認的主頁面,HelloWorld.vue是在主頁面中顯示的內(nèi)容,首頁內(nèi)容的儀表盤
②. 在router下面的index.js是我們路由.作用是配置你添加的頁面,和頁面跳轉(zhuǎn)的URL的.
③. 在config下面的Index.js是我們的配置文件,可以配置我們和后臺交互,可以更改vue的啟動端口號:
這里告訴大家命令里的-g 是全局安裝的意思,如果你只是想安裝在本項目中,即npm install package-name --save?
cnpm與npm的區(qū)別:
CNPM跟NPM用法完全一致,只是cnpm指的是國內(nèi)的npm鏡像源哈恰，npm是使用的國外的鏡像源
7.安裝Element-ui
Element-ui官方文檔:?Element
安裝方式:??在Terminal中輸入 :?npm i element-ui -S??回車等待安裝?
推薦使用 npm 的方式安裝只估，它能更好地和?webpack?打包工具配合使用。
** 安裝好之后,我們需要在main.js里引入Element
import ElementUIfrom 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
注意: 如果不引入,你就無法在vue頁面里使用Element組件,index.css是樣式.
# 另外一種方式是:? CDN
目前可以通過?unpkg.com/element-ui?獲取到最新版本的資源着绷，在頁面上引入 js 和 css 文件即可開始使用蛔钙。
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
我們建議使用 CDN 引入 Element 的用戶在鏈接地址上鎖定版本，以免將來 Element 升級時受到非兼容性更新的影響
8. 在Terminal中按CTRL + C 即可關(guān)閉vue
另外需要注意的是:? 如果你安裝或者是運行出現(xiàn)了問題,請仔細看看你運行Terminal命令的時候是在哪個目錄下的,是不是目錄錯了.
我們是需要在package.json所在的目錄下輸入命令的,這點請注意.
