详解从新建vue项目到引入组件Element的方法


Posted in Javascript onAugust 29, 2017

本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家

一、新建项目

1.打开cmd,运行:vue init webpack Vue-Demo

详解从新建vue项目到引入组件Element的方法

2.运行:cd Vue-Demo进入这一级
3.运行:npm install
4.运行:npm run dev

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

详解从新建vue项目到引入组件Element的方法

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

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

就得修改文件路径。

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

显示页面如下:

详解从新建vue项目到引入组件Element的方法

项目新建完成。

二、引入Element

1.打开cmd,在当前目录中运行:npm i element-ui -S

详解从新建vue项目到引入组件Element的方法

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>默认按钮</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>

运行:npm run dev

你将看到如下页面:

详解从新建vue项目到引入组件Element的方法

成功的引入了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"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断样式className同时增加class或删除class
Jan 30 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 #jQuery
浅谈vuex之mutation和action的基本使用
Aug 29 #Javascript
vuex学习之Actions的用法详解
Aug 29 #Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 #jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 #jQuery
es6学习之解构时应该注意的点
Aug 29 #Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 #Javascript
You might like
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
jquery实现网页查找功能示例分享
2014/02/12 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python实现最小二乘法线性拟合
2019/07/19 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
初一生物教学反思
2014/01/18 职场文书
带薪年假请假条
2014/02/04 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
期中考试反思800字
2014/05/01 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
管理人员岗位职责
2015/02/14 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android
Pandas数据结构之Series的使用
2022/03/31 Python