Mr.chen - ElementUI
type: channel
link: https://blog.chenvle.com/tag/ElementUI/
items: Vue项目引进ElementUI组件

Vue项目引进ElementUI组件
type: item
date: 2019-10-22T08:40:00+08:00
description: 环境要求NodejsNodejs官网下载地址：http://nodejs.cn/download/具体安装参考其他资料打开cmd命令行，输入npm -v，如果出现如下图的显示，说明已经安装正确。如果安装版本比较老，想升级新版本npm install npm -g淘宝镜像npm使用的国外中央仓库，下载速度较慢，有的时候还会有部分文件被墙掉。npm install -g cnpm --registry=https://registry.npm.taobao.org建议使用淘宝镜像，安装完淘宝镜像以后可以使用 cnpm 代替 npm。例如webpack可使用如下命令：cnpm install webpack -g .安装 webpack安装webpackcnpm install webpack -g-g 表示安装为全局安装 vue-cli安装 vue 脚手架项目初始化工具 vue-clicnpm install vue-cli -g创建Vue项目vue init webpack +项目名称运行vuecnpm 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"重新cnpm install测试是否安装完成在App.vue中随意添加elementUI标签 如： data() { return { input: '' } }保存后，打开网页显示出input即成功