Element-UI使用基本介绍

vue

开发环境


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

npm install -g yarn
 yarn

开始使用

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

例子

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

App.vue

{{ msg }}

Let’s do it

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

 

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

 

 





 

运行项目

npm run dev

效果如下图所示:

demo

 

如果发现下载不了或者地址失效,请联系客服QQ: 2323178881
找资料 » Element-UI使用基本介绍

提供最优质的资源集合

立即查看 了解详情