在開發(fā)的過程之中蹬屹，我們也經(jīng)常會使用到很多組件庫吕嘀；vue 常用ui組件庫：
https://blog.csdn.net/qq_36538012/article/details/82146649
今天具體說一說比較常用的；element ui框架的按鈕組件捆昏，這款由餓了么前端開源的UI框架，一經(jīng)面世，就收獲大量程序員的芳心藤肢。在github 上更是高達29.8k的star早已說明一切。用于開發(fā)PC端的頁面還是綽綽有余的糯景。如果說你是用vue開發(fā)者嘁圈，卻沒用過element UI，那你肯定不是合格的vue開發(fā)者蟀淮。
官網(wǎng)地址：http://element-cn.eleme.io/#/zh-CN
1：安裝node
端開發(fā)框架和環(huán)境都是需要 Node.js 最住，先安裝node.js開發(fā)環(huán)境，vue的運行是要依賴于node的npm的管理工具來實現(xiàn)怠惶，下載https://nodejs.org/en/涨缚，安裝完成之后，打開cmd開始輸入命令甚疟。（我用的是win10系統(tǒng)仗岖，所以需要管理員權(quán)限逃延，右鍵點擊以管理員身份運行cmd），不然會出現(xiàn)很多報錯轧拄。
2：查看node的版本號
下載好node之后揽祥，以管理員身份打開cmd管理工具，檩电，輸入 node -v 拄丰，回車，查看node版本號俐末，出現(xiàn)版本號則說明安裝成功料按。
輸入命令： node -v
3：安裝淘寶npm鏡像
由于npm是國外的，使用起來比較慢卓箫，我們這里使用淘寶的cnpm鏡像來安裝vue.
淘寶的cnpm命令管理工具可以代替默認的npm管理工具载矿。
輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
4：安裝全局vue-cli腳手架
淘寶鏡像安裝成功之后，我們就可以全局vue-cli腳手架烹卒，輸入命令：cnpm install --global vue-cli 回車闷盔；驗證是否安裝成功，在命令輸入vue旅急，出來vue的信息逢勾，及說明安裝成功；
輸入命令：cnpm install --global vue-cli
5：開始進入主題藐吮，初始化一個vue項目
我這里是在d盤里面新建一個項目溺拱，先用d:的命令，回車鍵進入d盤谣辞；回車鍵默認創(chuàng)建項目信息迫摔。
vue init webpack itemname
出現(xiàn)這樣的提示，初始化成功
運行初始化demo潦闲，輸入命令npm run dev攒菠；運行一下初始后的demo，彈出訪問地址歉闰，如果沒有問題則進行安裝elementUI；準備好好之后卓起，開始引入餓了么elementUI組件和敬。
6：安裝 elementUI
npm i element-ui -S
快捷鍵ctrl+c,終止批處理操 作嗎(Y/N)，在輸入命令npm i element-ui -S
注意：安裝過程中出現(xiàn)這樣的bug的時候戏阅，需要解決
解決辦法：嘗試 刪除項目中的 package-lock.json 文件 和 node_modules 文件夾昼弟，然后再嘗試 npm install.
成功安裝組件顯示如下
7：在components文件夾下面創(chuàng)建test.vue文件，復制一段elementUI官方文檔的代碼奕筐，進行測試
<template>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="1">處理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作臺</template>
<el-menu-item index="2-1">選項1</el-menu-item>
<el-menu-item index="2-2">選項2</el-menu-item>
<el-menu-item index="2-3">選項3</el-menu-item>
</el-submenu>
<el-menu-item index="3">
<a target="_blank">訂單管理</a>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
8：在App.vue中引入test.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<Test></Test>
</div>
</template>
<script>
import Test from './components/test.vue'
export default {
components:{
Test,
},
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
9：打開main.js,加入element-ui的js和css
import ElementUI from 'element-ui' //element-ui的全部組件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
10：再次運行舱痘，組件中的效果如下：
輸入命令：
npm run dev
原文作者：祈澈姑娘
技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子变骡，愛編程，愛運營芭逝，愛折騰塌碌。
堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見旬盯，歡迎大家一起探討交流台妆。
關注「編程微刊」公眾號 ，后臺回復「領取資源」胖翰，獲取IT資源和小程序500G干貨大全接剩。
