南充 网站建设,阿里巴巴网页设计教程,宁波网站建设 网络服务,网站流量对比1 前言
ElementUI是一套基于VUE2.0的桌面端组件库#xff0c;ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
ElementUI官网 https://element.eleme.io
2 安装
运行命令
cnpm i element-ui -S
-S表示只在该项目下安装#xff0c;不是全局安…1 前言
ElementUI是一套基于VUE2.0的桌面端组件库ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
ElementUI官网 https://element.eleme.io
2 安装
运行命令
cnpm i element-ui -S
-S表示只在该项目下安装不是全局安装
注意要跳到项目所在目录运行 会在node_modules文件夹下生成element-ui子目录 3 应用
接1.1 创建第一个vue项目-CSDN博客生成的项目。
3.1 在src/main.js中引入element组件修改后代码如下
// 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/*引入element组件*/
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
Vue.use(ElementUI);Vue.config.productionTip false/* eslint-disable no-new */
new Vue({el: #app,router,components: { App },template: App/
})
3.2 修改src/components/HelloWorld.vue代码如下
templatediv classhelloh1{{ msg }}/h1el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-row/div
/templatescript
export default {name: HelloWorld,data() {return {msg: 使用element-ui测试,};},
};
/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
3.3 运行效果
在cmd运行命令npm run dev 然后访问http://localhost:8080效果如下
