相思资源网 Design By www.200059.com

环境要求

Nodejs

Nodejs

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

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

Vue项目引进ElementUI组件的方法

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

npm install npm -g

安装 webpack

安装webpack

npm install webpack -g

-g 表示安装为全局

Vue项目引进ElementUI组件的方法

安装 vue-cli

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

npm install vue-cli -g

Vue项目引进ElementUI组件的方法

淘宝镜像

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

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

Vue项目引进ElementUI组件的方法

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

cnpm install webpack -g .

创建Vue项目

vue init webpack +项目名称

Vue项目引进ElementUI组件的方法

运行vue

npm run dev

Vue项目引进ElementUI组件的方法

访问localhost:8080

Vue项目引进ElementUI组件的方法

引入ElementUI

打开项目 src\main.js 添加

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

Vue项目引进ElementUI组件的方法

package.json文件中添加

"element-ui": "^2.4.9"

Vue项目引进ElementUI组件的方法

重新npm install

Vue项目引进ElementUI组件的方法

测试是否安装完成

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

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

Vue项目引进ElementUI组件的方法

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

Vue项目引进ElementUI组件的方法

总结

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

标签:
vue引进ElementUI组件,vue,elementui组件

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“Vue项目引进ElementUI组件的方法”

暂无Vue项目引进ElementUI组件的方法的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。