詳解從新建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)文章
Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫(kù)詳細(xì)步驟(超詳細(xì))
Electron是一個(gè)基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項(xiàng)目使用SQLite3數(shù)據(jù)庫(kù)的詳細(xì)步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue本地打開(kāi)build后生成的dist文件夾index.html問(wèn)題
這篇文章主要介紹了vue本地打開(kāi)build后生成的dist文件夾index.html問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-09-09
sortable+element 實(shí)現(xiàn)表格行拖拽的方法示例
這篇文章主要介紹了sortable+element 實(shí)現(xiàn)表格行拖拽的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
vue之使用echarts圖表setOption多次很卡問(wèn)題及解決
這篇文章主要介紹了vue之使用echarts圖表setOption多次很卡問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue cli2.0單頁(yè)面title修改方法，非常不錯(cuò)，具有一定的參考借鑒,需要的朋友可以參考下2018-06-06
vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue?鼠標(biāo)移入移出(hover)切換顯示圖片問(wèn)題
這篇文章主要介紹了vue?鼠標(biāo)移入移出(hover)切換顯示圖片問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了IE9 elementUI文件上傳的問(wèn)題解決，有需要了解IE9 elementUI文件上傳的朋友可參考。希望此文章對(duì)各位有所幫助2018-10-10
vue-router 是 Vue 的一個(gè)插件庫(kù)，適用于構(gòu)建單頁(yè)面應(yīng)用，這篇文章主要介紹了Vue?router?路由安裝以及使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-10-10
vue實(shí)現(xiàn)雙向綁定和依賴(lài)收集遇到的坑
這篇文章主要介紹了vue的雙向綁定和依賴(lài)收集，主要是通過(guò)Object.defineProperty() 實(shí)現(xiàn)雙向綁定，具體思路代碼大家跟隨小編一起看看吧2018-11-11