vue結(jié)合element-ui使用示例
這一篇主要是創(chuàng)建一個vue項目并結(jié)合餓了么框架element-ui。
1.先創(chuàng)建vue項目，我準(zhǔn)備把項目放在e盤下：E:\Work\RegisterProject；
命令行進入這個目錄：
創(chuàng)建一個基于 webpack 模板的新項目
（1）vue init webpack register(項目名)
需要yes按Enter健就可以了，不需要輸入n,然后按Enter健。
創(chuàng)建完成：在目錄中可看到
運行：命令行進入到剛創(chuàng)建好的目錄：cd register
運行：npm run dev
成功：
在瀏覽器輸入：http://localhost:8080/ 我的是http://localhost:8081/（那是因為我已經(jīng)打開另一個vue項目，80端口已經(jīng)被占用，第一次的一般不會被占用，輸入http://localhost:8080/ 就可以了）。
出現(xiàn)這個界面說明vue項目創(chuàng)建成功：
現(xiàn)在vue引入Element
1.打開cmd，進入到當(dāng)前剛創(chuàng)建的vue項目目錄
在當(dāng)前目錄中運行：npm i element-ui -S
我使用webstrom打開剛創(chuàng)建的項目；file-open
如圖所示：
改變項目目錄中的main.js文件；
初始main.js文件：
改成：
import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI)
如圖所示：
3.然后在.vue文件里就直接可以用了
例如：在src/components/Hello.vue做一下修改
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<el-button>默認(rèn)按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>
<el-button type="text">文字按鈕</el-button>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
運行：npm run dev（webstrom可以按Alt+F12鍵，輸入npm run dev)
你將看到如下頁面：
成功的引入了Element!!
注意以下幾個坑：
1.是否引入js與css文件
css文件是靜態(tài)文件地址，安裝教程安裝地址不會出錯
2.檢查node的版本，是否node版本過低
3.檢查以下你的npm版本 npm版本是否過低
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決Vue2.x父組件與子組件之間的雙向綁定問題,需要的朋友可以參考下2018-03-03
vue中this.$router.go(-1)失效(路由改變了，界面未刷新)
本文主要介紹了vue中this.$router.go(-1)失效(路由改變了,界面未刷新),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
這篇文章主要介紹了淺談vue權(quán)限管理實現(xiàn)及流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue 驗證兩次輸入的密碼是否一致的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue watch關(guān)于對象內(nèi)的屬性監(jiān)聽
這篇文章主要介紹了vue watch關(guān)于對象內(nèi)的屬性監(jiān)聽的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
平時在獲取真實DOM的時候獲取不到最新的DOM元素，使用$nextTick就可以，那為什么$nextTick就可以獲取到最新的DOM元素呢，本文就來帶著這兩個問題來解析一下nextTick的原理2023-05-05
本篇文章主要介紹了詳解用vue-cli來搭建vue項目和webpack，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue簡單封裝axios網(wǎng)絡(luò)請求的方法
這篇文章主要介紹了Vue簡單封裝axios網(wǎng)絡(luò)請求,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，對Vue封裝axios網(wǎng)絡(luò)請求相關(guān)知識感興趣的朋友一起看看吧2022-11-11
關(guān)于vue項目中搜索節(jié)流的實現(xiàn)代碼
這篇文章主要介紹了關(guān)于vue項目中搜索節(jié)流的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue使用layui框架，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05