vue項目中引入餓了么elementUI組件

參考官網： https://element.eleme.cn/#/zh-CN/component/installation

在開發的過程之中，我們也經常會使用到很多組件庫；vue 常用ui組件庫：
https://blog.csdn.net/qq_36538012/article/details/82146649

 

今天具體說一說比較常用的；element ui框架的按鈕組件，這款由餓了么前端開源的UI框架，一經面世，就收獲大量程序員的芳心。在github 上更是高達29.8k的star早已說明一切。用於開發PC端的頁面還是綽綽有余的。如果說你是用vue開發者，卻沒用過element UI，那你肯定不是合格的vue開發者。

 

官網地址：http://element-cn.eleme.io/#/zh-CN

 

 

圖片.png

 

1：安裝node

 

端開發框架和環境都是需要 Node.js ，先安裝node.js開發環境，vue的運行是要依賴於node的npm的管理工具來實現，下載https://nodejs.org/en/，安裝完成之后，打開cmd開始輸入命令。（我用的是win10系統，所以需要管理員權限，右鍵點擊以管理員身份運行cmd），不然會出現很多報錯。

 

 

image

 

2：查看node的版本號

 

下載好node之后，以管理員身份打開cmd管理工具，，輸入 node -v ，回車，查看node版本號，出現版本號則說明安裝成功。

 

輸入命令： node -v

 

 

image

 

3：安裝淘寶npm鏡像

 

由於npm是國外的，使用起來比較慢，我們這里使用淘寶的cnpm鏡像來安裝vue.
淘寶的cnpm命令管理工具可以代替默認的npm管理工具。

 

輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org 

 

 

image

 

4：安裝全局vue-cli腳手架

 

淘寶鏡像安裝成功之后，我們就可以全局vue-cli腳手架，輸入命令：cnpm install --global vue-cli 回車；驗證是否安裝成功，在命令輸入vue，出來vue的信息，及說明安裝成功；

 

輸入命令：cnpm install --global vue-cli 

 

 

image

 

5：開始進入主題，初始化一個vue項目

 

我這里是在d盤里面新建一個項目，先用d:的命令，回車鍵進入d盤；回車鍵默認創建項目信息。

 

vue init webpack itemname 

 

 

圖片.png

 

出現這樣的提示，初始化成功

 

 

圖片.png

 

運行初始化demo，輸入命令npm run dev；運行一下初始后的demo，彈出訪問地址，如果沒有問題則進行安裝elementUI；准備好好之后，開始引入餓了么elementUI組件。

 

6：安裝 elementUI

 

npm i element-ui -S

 

快捷鍵ctrl+c,終止批處理操 作嗎(Y/N)，在輸入命令npm i element-ui -S

 

 

圖片.png

 

注意：安裝過程中出現這樣的bug的時候，需要解決

 

 

圖片.png

解決辦法：嘗試 刪除項目中的 package-lock.json 文件 和 node_modules 文件夾，然后再嘗試 npm install.

 

成功安裝組件顯示如下

 

圖片.png

 

7：在components文件夾下面創建test.vue文件，復制一段elementUI官方文檔的代碼，進行測試

 

 

圖片.png

 

<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 href="https://www.ele.me" 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

 

 

圖片.png

 

<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

 

 

 

 

 

 

還有很重要的一部 --- main.js引入elementui

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);