脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue项目引进ElementUI组件

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组件的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

相关文章

  • vue结合leaflet实现热力图

    vue结合leaflet实现热力图

    本文主要介绍了vue实现热力图，结合leaflet.heat插件可以很容易的做出热力图，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法

    VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法

    这篇文章主要介绍了VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-04-04
  • vue页面引入three.js实现3d动画场景操作

    vue页面引入three.js实现3d动画场景操作

    这篇文章主要介绍了vue页面引入three.js实现3d动画场景操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue 父组件获取子组件里面的data数据(实现步骤)

    vue 父组件获取子组件里面的data数据(实现步骤)

    在Vue中,父组件可以通过`ref`引用子组件,并通过`$refs`属性来访问子组件的数据,下面分步骤给大家介绍vue 父组件获取子组件里面的data数据,感兴趣的朋友一起看看吧
    2024-06-06
  • vue打包项目版本号自加的操作步骤

    vue打包项目版本号自加的操作步骤

    项目每次打包后都需要改动项目版本号，这个改动每次都需要在package.json中修改version，比较麻烦，到底有没有一种打包后版本号自加的办法，这篇文章主要介绍了vue打包项目版本号自加的步骤,需要的朋友可以参考下
    2022-09-09
  • Vue中$root的使用方法及注意事项

    Vue中$root的使用方法及注意事项

    这篇文章主要给大家介绍了关于Vue中$root使用方法及注意事项的相关资料,vue中$root是用来访问根组件的,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • 为什么vue中不建议使用空字符串作为className

    为什么vue中不建议使用空字符串作为className

    本文主要介绍了为什么vue中不建议使用空字符串作为className，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue3动态组件component不生效问题解决方法

    Vue3动态组件component不生效问题解决方法

    动态组件component是Vue中非常实用的一个功能,它可以根据条件动态切换不同的组件,在Vue3中使用方法和Vue2基本一致,在vue3使用component动态组件展示组件时,组件就是不展示显示空白,所以本文记录了Vue3动态组件component不生效问题解决方法,需要的朋友可以参考下
    2024-08-08
  • vue实现虚拟列表功能的代码

    vue实现虚拟列表功能的代码

    这篇文章主要介绍了vue实现虚拟列表，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 解决Antd Table表头加Icon和气泡提示的坑

    解决Antd Table表头加Icon和气泡提示的坑

    这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论