详解从新建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 相关文章推荐
JavaScript代码复用模式实例分析
Dec 02 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
JavaScript函数详解
Feb 27 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
js实现随机数小游戏
Jun 28 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 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/02 星际争霸
在线短消息收发的程序,不用数据库
2006/10/09 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
python简单读取大文件的方法
2016/07/01 Python
Python解惑之True和False详解
2017/04/24 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
学徒工职责
2014/03/06 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
家长高考寄语
2015/02/27 职场文书
工作自我评价范文
2015/03/05 职场文书
创业计划书之美甲店
2019/09/20 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang