element-ui应该如何使用?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

element-ui应该如何使用?

问问小秘 2020-04-29 16:47:34 2659

element-ui应该如何使用?

分享到
取消 提交回答
全部回答(2)
  • 景凌凯
    2020-04-30 13:05:40

    1.安装webpack

    npm install -g webpack

    1
    

    2.安装vue-cli

    vue-cli是什么?

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。

    使用步骤:

    安装vue-cli:
    
    npm install -g vue-cli
    
        1
    
    使用vue-cli构建项目
    
    vue init webpack project-name  //创建一个基于webpack模板的名为project-name的项目
    
        1
    
    目前可用的模板包括:
        browserify –全功能的Browserify + vueify,包括热加载,静态检测,单元测试。
        browserify-simple–一个简易的Browserify + vueify,以便于快速开始。
        webpack–全功能的Webpack + vueify,包括热加载,静态检测,单元测试。
        webpack-simple–一个简易的Webpack + vueify,以便于快速开始。
    
    安装项目依赖
    
    cd project-name    //进入项目目录
    npm install        //安装项目依赖
    npm run dev        //运行项目
    
        1
        2
        3
    

    此时在浏览器打开:localhost:8080即可看到欢迎页。

    关于webpack和vue-cli的更多使用方法参见官方文档。
    
    但是这个只能在本地跑,要如何在我们自己的服务器上访问呢?此时需要执行
    
    npm run build
    
        1
    

    搭建开发环境

    本来想用vue-cli重新创建项目,试了几次总是出现各种问题,没办法成功。最后在仔细查看 Element-UI 的官方文档的 快速上手 部分的时候发现 饿了么 团队给了一个他们自己的 项目模板 。于是我就用这个模板来尝试了下,结果成功了。所以,如果你不想太折腾的话,建议还是使用官方给的项目模板,可以省很多事。
    

    第一步:安装项目模板

    克隆/下载项目模板
    
    将下载的模板放到你项目的根目录下
    
    安装依赖
    
    npm install
    
        1
    
    运行项目模板
    
    npm run dev
    
        1
    
    此时在浏览器打开:localhost:8080即可看到欢迎页。
    
    技术分享
    
    项目模板里已经把需要配置的文件都配置好了。
    

    第二步:安装element-ui

    第一步,我们成功安装了项目模板,接下来,我们需要安装element-ui到项目下。
    

    npm i element-ui@next -D

    1
    

    开始使用

    接下来我们就可以参照 Element-UI 的官方文档上手开发了。
    

    例子

    我们参照官方的按钮组件使用说明,在项目模板的基础上做一个按钮的例子。其它文件不需要改动,只修改App.vue文件的内容。代码如下:
    

    App.vue

    {{ msg }}

    <el-button @click.native="startHacking">Let‘s do it
    显示默认颜色 成功按钮 警告按钮 危险按钮 信息按钮

    hover 显示颜色 成功按钮 警告按钮 危险按钮 信息按钮

    效果如下图所示:

    技术分享 使用过程中碰到的问题: 1. phantomjs安装失败

    由于源的问题,安装phantomjs必须要“搭梯子”,使用内网无法下载。所以解决的方法有两种:

    方法一:通过科学上网,然后安装。
    
    方法二:对于不知道怎么“搭梯子”的同学,可以通过更改源来下载,操作方法如下:
    
    npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads
    
        1
    

    2.打开页面乱码

    通过 Element-UI 官方提供的项目模板开发,会发现在浏览器打开页面的时候,中文是乱码的。如下图所示:

    技术分享

    但html页面中已经设置了

    仔细查看该页面所涉及的文件的编码格式的时候,发现引用的App.vue 文件的编码格式是GBK ,所以把该文件编码格式改为UTF-8 即可。

    0 0
  • 问问小秘
    2020-04-29 16:50:12

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,整个ui风格简约,很实用,使用demo组件可以快速实现体验交互细节,快速开发

    1.安装,推荐npm方式安装

    npm i element-ui -S 2.引入

    2.1全局引入,会把组件库里所有的组件和css引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

    2.2局部引入(推荐) 由于业务的风格跟默认的颜色不一样,我采用了自定义主题,选择色号生成,在线生成工具(https://elementui.github.io/t...)可以很方便地实时预览主题色改变之后的视觉,同时它还可以基于新的主题色生成完整的样式文件包,供直接下载使用,在vue的入口js里直接引入主题样式element-variables.css

    import '@/style/theme/element-variables.scss' import { Message, MessageBox, Loading } from 'element-ui' Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service Vue.prototype.$msgbox = MessageBox Vue.prototype.$alert = MessageBox.alert Vue.prototype.$confirm = MessageBox.confirm Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$message = Message 3.组件使用

    3.1像message。messagebox弹窗组件是直接挂载全局,因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox。调用参数为: alert(message, title, options) 或 confirm(message, title, options) 或 prompt(message, title, options) 或 $prompt(message, options)

    具体使用:

    msgbox

    图片描述

    3.2 官网提供的dialog组件支持内容区更丰富的写法,dialog弹出一个对话框,适合需要定制性更大的场景。

    官网写法:

    图片描述

    这是最基础的使用,在这个基础上我做了个封装,将取消,确定函数挂在组件回调函数上,并且标题,宽度,显隐值都通过属性传递,可以让父组件引用较少的代码

    0 0
添加回答
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章