您好,登錄后才能下訂單哦!
這篇文章主要介紹從新建vue項(xiàng)目到引入組件Element的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
本文介紹了從新建vue項(xiàng)目到引入組件Element以及Error when rendering component報(bào)錯(cuò)解決,分享給大家
一、新建項(xiàng)目
1.打開cmd,運(yùn)行:vue init webpack Vue-Demo
2.運(yùn)行:cd Vue-Demo
進(jìn)入這一級(jí)
3.運(yùn)行:npm install
4.運(yùn)行:npm run dev
如果瀏覽器打開之后,沒有加載出頁面,說明本地的8080 端口被占用,需要修改一下配置文件 config/index.js
解釋:1.將 build 的路徑前綴修改為 ' ./ '(原本為 ' / '),是因?yàn)榇虬?,外部引?js 和 css 文件時(shí),如果路
徑以 ' / ' 開頭,那么在本地是無法找到對(duì)應(yīng)文件。所以如果需要在本地打開打包后的文件,
就得修改文件路徑。
2.將端口號(hào)改為不常用的端口。
顯示頁面如下:
項(xiàng)目新建完成。
二、引入Element
1.打開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"> <h2>{{ msg }}</h2> <h3>Essential Links</h3> <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> h2, h3 { 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
你將看到如下頁面:
成功的引入了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 無法運(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"
以上是“從新建vue項(xiàng)目到引入組件Element的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。