请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    17712677918

    电子邮件

    857020071@qq.com
  • 扫描二维码

    关注微信公众号

推荐阅读
ucomxu 版主
未知星球 | 未知职业
  • 关注0
  • 粉丝0
  • 帖子32
热议话题
优康服务中心
2020-01-03 0
会员体系 [*]个人服务9.9元/年 [*]企业服务99元/年 [*]拓荒者999元/终生 会员服务个
精选帖子

Element-UI使用指南

[复制链接]
ucomxu 发表于 2021-9-26 09:40:42 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
Element-UI饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI
开发环境
1.安装webpack
npm install -g webpack
2.安装vue-cli
vue-cli是什么?
vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。
使用步骤:
安装vue-cli:
npm install -g vue-cli
使用vue-cli构建项目
vue init webpack project-name  //创建一个基于webpack模板的名为project-name的项目
目前可用的模板包括:
browserify–全功能的Browserify + vueify,包括热加载,静态检测,单元测试。
browserify-simple–一个简易的Browserify + vueify,以便于快速开始。
webpack–全功能的Webpack + vueify,包括热加载,静态检测,单元测试。
webpack-simple–一个简易的Webpack + vueify,以便于快速开始。
安装项目依赖
cd project-name    //进入项目目录
npm install        //安装项目依赖
npm run dev        //运行项目
此时在浏览器打开:localhost:8080即可看到欢迎页。
关于webpack和vue-cli的更多使用方法参见官方文档。
但是这个只能在本地跑,要如何在我们自己的服务器上访问呢?此时需要执行


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


第一步:安装项目模板
克隆/下载项目模板
将下载的模板放到你项目的根目录下
安装依赖
npm install
运行项目模板
npm run dev
此时在浏览器打开:localhost:8080即可看到欢迎页。
第二步:安装element-ui
第一步,我们成功安装了项目模板,接下来,我们需要安装element-ui到项目下。
npm i element-ui@next -D
开始使用
接下来我们就可以参照 Element-UI 的官方文档上手开发了。


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


<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <el-button @click.native="startHacking">Let's do it</el-button>
    <div class="block">
    <span class="demonstration">显示默认颜色</span>
    <span class="wrapper">
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    </span>
    </div>
    <br/>
    <div class="block">
      <span class="demonstration">hover 显示颜色</span>
    <span class="wrapper">
    <el-button :plain="true" type="success">成功按钮</el-button>
    <el-button :plain="true" type="warning">警告按钮</el-button>
    <el-button :plain="true" type="danger">危险按钮</el-button>
    <el-button :plain="true" type="info">信息按钮</el-button>
    </span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Use Vue 2.0 Today!'
    }
  },


  methods: {
    startHacking () {
      this.$notify({
        title: 'It Works',
        message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
        duration: 6000
      })
    }
  }
}
</script>


<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>


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

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

  • 方法一:通过科学上网,然后安装。

  • 方法二:对于不知道怎么“搭梯子”的同学,可以通过更改源来下载,操作方法如下:

  • npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads





————————————————


版权声明:本文为CSDN博主「Arvin_bu」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u012285967/article/details/53023825/





上一篇:资产管理在网络安全运营中的应用与实践
下一篇:浅谈光纤资源管理对电信运营商的重要性
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

icitu.com 信息谷-icit软硬件产品营销与行业智慧化解决方案实施供需对接空间,信息人家园-信息人之间互助互惠互利的资源整合空间,icit人团结起来帮助人们沟通与建设,icit unite to help people communicating&constructing。
0512-68181818
关注我们
  • 访问移动手机版
  • 官方微信公众号

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc. 优康设计 ( 苏ICP备10066271号-2 )|网站地图