詳解從新建vue項(xiàng)目到引入組件Element的方法
本文介紹了從新建vue項(xiàng)目到引入組件Element以及Error when rendering component報(bào)錯(cuò)解決，分享給大家
一、新建項(xiàng)目
1.打開(kāi)cmd，運(yùn)行：vue init webpack Vue-Demo
2.運(yùn)行：cd Vue-Demo進(jìn)入這一級(jí)
3.運(yùn)行：npm install4.運(yùn)行：
npm run dev
如果瀏覽器打開(kāi)之后，沒(méi)有加載出頁(yè)面，說(shuō)明本地的8080 端口被占用，需要修改一下配置文件 config/index.js
解釋?zhuān)?/strong>1.將 build 的路徑前綴修改為 ' ./ '（原本為 ' / '），是因?yàn)榇虬螅獠恳?js 和 css 文件時(shí)，如果路
徑以 ' / ' 開(kāi)頭，那么在本地是無(wú)法找到對(duì)應(yīng)文件。所以如果需要在本地打開(kāi)打包后的文件，
就得修改文件路徑。
2.將端口號(hào)改為不常用的端口。
顯示頁(yè)面如下：
項(xiàng)目新建完成。
二、引入Element
1.打開(kāi)cmd，在當(dāng)前目錄中運(yùn)行：npm i element-ui -S
2.src/main.js（紅色的）
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
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
你將看到如下頁(yè)面：
成功的引入了Element!!
更多樣式請(qǐng)參考：http://element.eleme.io/#/zh-CN/component/layout
ps:
看了一些資料，有的引入之后會(huì)出現(xiàn)
報(bào)錯(cuò)：Error when rendering component
原因如下：
Vue 2.1.5 將 _h 重命名為 _c，而 Element 目前發(fā)的版本都是用以前的 compiler 編譯的，導(dǎo)致新版 runtime 無(wú)法運(yùn)行 Element。目前的解決方案是鎖定 Vue 的版本為 2.1.4
鎖定vue相關(guān)版本
npm remove vue #卸載相關(guān)的版本
重新安裝一下版本：
- "vue-template-compiler": "2.1.4"
- "vue-loader": "10.0.0"
- "vue": "2.1.4"
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了樣式穿透vue中的scoped示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue-cli?npm如何解決vue項(xiàng)目中缺失core-js的問(wèn)題
這篇文章主要介紹了vue-cli?npm如何解決vue項(xiàng)目中缺失core-js的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
對(duì)于插槽的概念和使用,這是vue的一個(gè)難點(diǎn),這需要我們靜下心來(lái),慢慢研究,下面這篇文章主要給大家介紹了關(guān)于vue默認(rèn)插槽的相關(guān)資料,需要的朋友可以參考下2021-11-11
webpack如何打包一個(gè)按需引入的vue組件庫(kù)
在vue項(xiàng)目開(kāi)發(fā)中,我們會(huì)將經(jīng)常用到的邏輯或模塊抽象成組件,對(duì)于那些多個(gè)項(xiàng)目都有用到的組件,可以考慮封裝成組件庫(kù),這篇文章主要給大家介紹了關(guān)于webpack如何打包一個(gè)按需引入的vue組件庫(kù)的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue使用refs獲取嵌套組件中的值過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
解決Vue+Electron下Vuex的Dispatch沒(méi)有效果問(wèn)題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒(méi)有效果的解決方案 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue本地構(gòu)建熱更新卡頓的問(wèn)題“75?advanced?module?optimization”完美解決方案
這篇文章主要介紹了vue本地構(gòu)建熱更新卡頓的問(wèn)題“75?advanced?module?optimization”解決方案,每次熱更新都會(huì)卡在?"75?advanced?module?optimization"?的地方不動(dòng)了，如何解決這個(gè)問(wèn)題呢，下面小編給大家?guī)?lái)了解決方案，需要的朋友可以參考下2022-08-08
Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題
這篇文章主要介紹了Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue?element?ui表格相同數(shù)據(jù)合并單元格效果實(shí)例
工作中遇到需要根據(jù)單元格某個(gè)屬性合并,特此記錄下,下面這篇文章主要給大家介紹了關(guān)于vue?element?ui表格相同數(shù)據(jù)合并單元格效果的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11