新建vue项目并引入element组件

从新建vue项目到引入组件Element

以及Error when rendering component报错解决

一、新建项目

1.打开cmd，运行：vue init webpack Vue-Demo

2.运行：cd Vue-Demo进入这一级

3.运行：npm install

4.运行：npm run dev

如果浏览器打开之后，没有加载出页面，说明本地的8080 端口被占用，需要修改一下配置文件 config/index.js

解释：1.将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路

径以 ' / ' 开头，那么在本地是无法找到对应文件。所以如果需要在本地打开打包后的文件，

就得修改文件路径。

2.将端口号改为不常用的端口。

显示页面如下：

项目新建完成。

二、引入Element

1.打开cmd，在当前目录中运行：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做一下修改

[html] view plain copy

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<el-button>默认按钮</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>
<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

你将看到如下页面：

成功的引入了Element!!
更多样式请参考：http://element.eleme.io/#/zh-CN/component/layout

ps:
看了一些资料，有的引入之后会出现
报错：Error when rendering component
原因如下：
Vue 2.1.5 将 _h 重命名为 _c，而 Element 目前发的版本都是用以前的 compiler 编译的，
导致新版 runtime 无法运行 Element。目前的解决方案是锁定 Vue 的版本为 2.1.4
锁定vue相关版本
npm remove vue #卸载相关的版本
重新安装一下版本：
"vue-template-compiler": "2.1.4"
"vue-loader": "10.0.0"
"vue": "2.1.4"

共勉~

新建vue项目并引入element组件相关推荐

在vue项目中引入element，并改变主题色
写项目提高开发效率是最重要的,引入UI框架就是提高开发效率的有效途径. 这里就说一下自己是如何引入UI框架的--vue中引入elementUI.(项目其实早已经开发完了,只是回过头来回顾一下自己当时是 ...
Vue中怎样引入Element
引入Element 完整引入在vue项目下的src下的main.js中加入 import Vue from 'vue'; import ElementUI from 'element-ui'; im ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
安装vue环境，并新建Vue项目
一.安装vue环境,并新建Vue项目首先我们上node.js官网(https://nodejs.org/zh-cn/),下载最新的长期版本,直接运行安装完成之后, 我们就已经具备了node和npm的 ...
六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求
@Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
Vue项目中公用footer组件底部位置的适配问题
vue项目中公用footer组件底部位置的适配问题需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很 ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
创建Vue项目以及引入Iview
创建Vue项目以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue i ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...

新建vue项目并引入element组件

新建vue项目并引入element组件相关推荐

最新文章

热门文章