vue結(jié)合element-ui使用示例
這一篇主要是創(chuàng)建一個(gè)vue項(xiàng)目并結(jié)合餓了么框架element-ui。
1.先創(chuàng)建vue項(xiàng)目，我準(zhǔn)備把項(xiàng)目放在e盤下：E:\Work\RegisterProject；
命令行進(jìn)入這個(gè)目錄：
創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
（1）vue init webpack register(項(xiàng)目名)
需要yes按Enter健就可以了，不需要輸入n,然后按Enter健。
創(chuàng)建完成：在目錄中可看到
運(yùn)行：命令行進(jìn)入到剛創(chuàng)建好的目錄：cd register
運(yùn)行：npm run dev
成功：
在瀏覽器輸入：http://localhost:8080/ 我的是http://localhost:8081/（那是因?yàn)槲乙呀?jīng)打開另一個(gè)vue項(xiàng)目，80端口已經(jīng)被占用，第一次的一般不會(huì)被占用，輸入http://localhost:8080/ 就可以了）。
出現(xiàn)這個(gè)界面說(shuō)明vue項(xiàng)目創(chuàng)建成功：
現(xiàn)在vue引入Element
1.打開cmd，進(jìn)入到當(dāng)前剛創(chuàng)建的vue項(xiàng)目目錄
在當(dāng)前目錄中運(yùn)行：npm i element-ui -S
我使用webstrom打開剛創(chuàng)建的項(xiàng)目；file-open
如圖所示：
改變項(xiàng)目目錄中的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>
運(yùn)行：npm run dev（webstrom可以按Alt+F12鍵，輸入npm run dev)
你將看到如下頁(yè)面：
成功的引入了Element!!
注意以下幾個(gè)坑：
1.是否引入js與css文件
css文件是靜態(tài)文件地址，安裝教程安裝地址不會(huì)出錯(cuò)
2.檢查node的版本，是否node版本過(guò)低
3.檢查以下你的npm版本 npm版本是否過(guò)低
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決Vue2.x父組件與子組件之間的雙向綁定問題,需要的朋友可以參考下2018-03-03
vue中this.$router.go(-1)失效(路由改變了，界面未刷新)
本文主要介紹了vue中this.$router.go(-1)失效(路由改變了,界面未刷新),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
淺談vue權(quán)限管理實(shí)現(xiàn)及流程
這篇文章主要介紹了淺談vue權(quán)限管理實(shí)現(xiàn)及流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue 驗(yàn)證兩次輸入的密碼是否一致的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue watch關(guān)于對(duì)象內(nèi)的屬性監(jiān)聽
這篇文章主要介紹了vue watch關(guān)于對(duì)象內(nèi)的屬性監(jiān)聽的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
平時(shí)在獲取真實(shí)DOM的時(shí)候獲取不到最新的DOM元素，使用$nextTick就可以，那為什么$nextTick就可以獲取到最新的DOM元素呢，本文就來(lái)帶著這兩個(gè)問題來(lái)解析一下nextTick的原理2023-05-05
詳解用vue-cli來(lái)搭建vue項(xiàng)目和webpack
本篇文章主要介紹了詳解用vue-cli來(lái)搭建vue項(xiàng)目和webpack，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Vue簡(jiǎn)單封裝axios網(wǎng)絡(luò)請(qǐng)求的方法
這篇文章主要介紹了Vue簡(jiǎn)單封裝axios網(wǎng)絡(luò)請(qǐng)求,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，對(duì)Vue封裝axios網(wǎng)絡(luò)請(qǐng)求相關(guān)知識(shí)感興趣的朋友一起看看吧2022-11-11
關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼
這篇文章主要介紹了關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
詳解如何在vue項(xiàng)目中使用layui框架及采坑
這篇文章主要介紹了vue使用layui框架，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05