VUE 集成 element-ui

waterc 发布于2019-08-23 11:56 / 307人阅读

摘要：项目偏管理类型，没有太复杂的交互设计。因此就选用了框架进行页面开发。简单说下，首先第一步搭建工程。从官网，用命令搭建，记得配置环境。启动之后，修改主要是体现项目中引入然后再修改测试看到页面插件较大，我们项目也就引用一些常用组件。

项目偏管理类型，没有太复杂的交互设计。因此就选用了element-ui框架进行页面开发。
简单说下，首先第一步搭建vue工程。从vue官网，用命令搭建，记得配置node环境。

启动之后，修改 HelloWorld.vue

主要是体现element-ui---
项目中引入：

npm i element-ui -S

然后再 main.js

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

修改 HelloWorld.vue

看到页面

element 插件较大，我们项目也就引用一些常用组件。可以只引入需要的组件，以达到减小项目体积的目的
例如：我们只引用 button 组件：
修改main.js
import {Button} from "element-ui"
Vue.use(Button)

这个时候，页面虽然有button 标签，但是没有button 样式，
引入：

npm install babel-plugin-component -D

加载样式：
修改 .babelrc 文件 plugins 属性

  "plugins": ["transform-vue-jsx", "transform-runtime", [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]],

然后刷新下界面 button 按钮有样式了！

超融合服务器 idc机房托管 vue集成webrtc vue集成阿里云webrtc vue集成webrtc视频语音通话 vue 集成webrtc实时音视频demo

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97701.html

webpack插件实现自动抽取css中的主题色样式，并一键动态切换主题色（element-ui）

摘要：项目项目中用了，有切换主题色的需要。但官方的方式，有几个问题需要下载整个的样式，并替换其中的样式颜色。代码已开源在，欢迎并提交其他库的主题色获取方法。项目项目中用了element-ui，有切换主题色的需要。但官方的方式，有几个问题：1、需要下载整个element-ui的样式css，并替换其中的css样式颜色。文件较大，下载慢且影响性能。2、只能替换element-ui本身的颜色样式，...

dcr309duan 2019-08-26 12:15 评论0 收藏0
Vue现有项目改造为Nuxt项目

摘要：好了，项目启动了，目录结构也清楚了，接下来就是整个现有项目的迁移了目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新项目的改造过程及分享改造过程中遇到的问题公司项目，最初只为了实现前后端分离式开发，直接选择了vue框架进行开发，然而现在项目基本完成了，发现蜘蛛根本就抓取不到网站数据，搜索引擎搜出来，都是一片空白没有数据，需要对项目做SEO优化。本人第一次接触SEO的优化，完全...

Invoker 2019-08-26 10:25 评论0 收藏0
vue 集成 typescript Element UI 之懒人集成法

摘要：背景最近有点时间，就想把我的项目版本升级一下，顺便在折腾一下踩过的坑官方已经写了，但会有一个小坑，但都有解决方案正文引入有好几种方案，一种引入是还是在文件里写，不过是集成之后在里加个。背景最近有点时间，就想把我的vue项目版本升级一下，顺便在折腾一下typescript... 踩过的坑 element ui官方已经写了d.ts，但会有一个小坑，但issue都有解决方案... 正文v...

or0fun 2019-08-26 17:05 评论0 收藏0
vue 服务器端渲染 nuxt.js初探

摘要：在调研插件后，发现无法满足以及等要求时，果断选用了做服务器渲染。布局目录该目录名为保留的，不可更改。服务器启动的时候，该目录下的文件会映射至应用的根路径下。它可以在服务端或路由更新之前被调用。可用于指定服务端返回的请求状态码。开头还是来一段废话：年关将近，给大家拜个早年，愿大家年会都能抽大奖，来年行大运。废话不多说，直接进正文项目环境：前端vue项目，需要将新增的几个路由页...

bingchen 2019-08-23 14:53 评论0 收藏0
前端小姿势

摘要：文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完或者非最佳实践仅供参考父子组件的参考官方文档点我父级不需要操作额外代码子代操作方法一这个的官方会有介绍子代操作方法二通过这个实现的看了不少文章，这种比较多以为例子先简单介绍文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完... 或者非最佳实践仅供参考 1.父子组件的v-model 参考vue官方文档...

JeOam 2019-08-02 16:11 评论0 收藏0