Vue项目引进ElementUI组件的方法

 更新时间:2018年11月11日 12:44:00   转载 作者:夜有期  
这篇文章主要介绍了Vue项目引进ElementUI组件的方法,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下

环境要求

Nodejs

Nodejs

官网下载地址:http://nodejs.cn/download/具体安装参考其他资料

打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确。

如果安装版本比较老,想升级新版本

npm install npm -g

安装 webpack

安装webpack

npm install webpack -g

-g 表示安装为全局

安装 vue-cli

安装 vue 脚手架项目初始化工具 vue-cli

npm install vue-cli -g

淘宝镜像

npm使用的国外中央仓库,下载速度较慢,有的时候还会有部分文件被墙掉。

npm install -g cnpm --registry=https://registry.npm.taobao.org

建议使用淘宝镜像,安装完淘宝镜像以后可以使用 cnpm 代替 npm。例如webpack可使用如下命令:

cnpm install webpack -g .

创建Vue项目

vue init webpack +项目名称

运行vue

npm run dev

访问localhost:8080

引入ElementUI

打开项目 src\main.js 添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

package.json文件中添加

"element-ui": "^2.4.9"

重新npm install

测试是否安装完成

在App.vue中随意添加elementUI标签 如:

<el-input v-model="input" placeholder="请输入内容"></el-input>
data() {
return {
input: ''
}
}

保存后,打开网页显示出input即成功

总结

以上所述是小编给大家介绍的Vue项目引进ElementUI组件的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • 简单的三步vuex入门

    简单的三步vuex入门

    通过简单的三步让大家对VUEX快速的入门,本文还介绍了VUEX的最基础的函数以及相关知识点,有兴趣的学习下。
    2018-05-05
  • Vue 组件(component)教程之实现精美的日历方法示例

    Vue 组件(component)教程之实现精美的日历方法示例

    组件是我们学习vue必须会的一部分,下面这篇文章主要给大家介绍了关于Vue 组件(component)教程之实现精美的日历的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • vue 中Virtual Dom被创建的方法

    vue 中Virtual Dom被创建的方法

    本文将通过解读render函数的源码,来分析vue中的vNode是如何创建的,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 详解Vue 多级组件透传新方法provide/inject

    详解Vue 多级组件透传新方法provide/inject

    这篇文章主要介绍了详解Vue 多级组件透传新方法provide/inject,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue 插值 v-once,v-text, v-html详解

    vue 插值 v-once,v-text, v-html详解

    这篇文章主要介绍了vue 插值 v-once,v-text, v-html详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue使用recorder.js实现录音功能

    vue使用recorder.js实现录音功能

    这篇文章主要为大家详细介绍了vue使用recorder.js实现录音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • vue动态改变背景图片demo分享

    vue动态改变背景图片demo分享

    今天小编就为大家分享一篇vue动态改变背景图片demo分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于vue开发的在线付费课程应用过程

    基于vue开发的在线付费课程应用过程

    这篇文章主要介绍了基于vue开发的在线付费课程应用过程,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • vue框架制作购物车小球动画效果实例代码

    vue框架制作购物车小球动画效果实例代码

    最近在学习前端制作了一个购物车小球的动画效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-09-09
  • Vue通过配置WebSocket并实现群聊功能

    Vue通过配置WebSocket并实现群聊功能

    本篇文章将与各位开发者分享下 vue-native-websocket 库的使用以及配置,通过实例代码给大家分享Vue通过配置WebSocket并实现群聊功能,需要的朋友可以参考下
    2019-12-12

最新评论