详解从新建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的一些总结
Nov 03 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
Javascript学习指南
Dec 01 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 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中防止伪造跨站请求的小招式
2011/09/02 PHP
php截取字符串函数分享
2015/02/02 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python编写检测数据库SA用户的方法
2014/07/11 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
奶茶店创业计划书
2014/08/14 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python