详解从新建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 巧妙去除数组中的重复项
Jan 25 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
js new Date()实例测试
2019/10/31 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
python 阶乘累加和的实例
2019/02/01 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
办公室副主任职责范本
2014/03/08 职场文书
户外宣传策划方案
2014/05/25 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
小学数学新课改心得体会
2016/01/22 职场文书