自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add element-theme --dev 2.安装chalk主题 安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码,这里从 npm 安装. yarn add element-theme-chalk -D 3.初始化变量文件 主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调

@vue-cli3配合element和scss打包的配置 标签(空格分隔): Vue 使用@vue-cli3初始化项目,且使用ElementUI,然后按照官方文档自定义主题. 自己的scss全局变量文件,比如叫var.scss,为了风格一致,会引用一些element-variables.scss的样式. 此时所有页面的样式都需要引用_var.scss,但是为了方便,我们在vue.config.js中统一配置从而不必每个页面都写一遍@import: module.exports = { ... c

首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu为子级节点,el-menu-item表示没有下级.当然,菜单不能写死,因为菜单也许不止两级,所以我们需要递归来实现.根据当前节点是否有下级去判断,如果有下级,则继续调用子级,直到没有下级为止,下面我贴上左侧菜单所有的代码: 请求数据格式 [ { name: "首页", id: -1, icon: "el-icon-picture-outline-round", url: "/i

Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法 1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width=&

先点这里(-￣▽￣)- 环境搭建 默认你已经安装了node.js 下面安装vue和webpack npm install -g @vue/cli npm install -g @vue/cli-init npm install -g webpack npm install -g webpack-cli webpack-simple方式 下面找到你的工程根目录,开始创建一个工程 Microsoft Windows [版本 ] 版权所有 (c) Microsoft Corporation.保留所有权

1.安装yarn管理工具(包含node.js); 2.安装全局vue-cli全家桶: yarn global add @vue/cli 3.创建.测试一个vue-cli项目: vue create admin 默认会提示选择那些安装: Vue CLI v3.3.0 ? Please pick a preset: (Use arrow keys) ❯ project1 (vue-router, vuex, sass, babel, pwa, eslint) #这里是我之前创建项目并保持了他的配置(

module.exports = { /* 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath */ publicPath: process.env.NODE_ENV === 'production' ? '/public/' : '/', /* 输出文件目录:在npm run build时,生成文件的目录名称 */ outputDir: process.env.VUE_APP_FLAG, /* 放置生成的静态

文章已收录到 github,欢迎 Watch 和 Star. 简介 详细讲解了 ElementUI 的源码架构,为下一步基于 ElementUI 打造团队自己的组件库打好坚实的基础. 如何快速为团队打造自己的组件库? 组件库是现代前端领域中不可缺少的一项基建.它可以提高代码的复用性.可维护性,提高团队的生产效率,更好的服务于未来. 那么如何为团队打造自己的组件库呢? 最理想的方案是借用社区的能力,去裁剪一个优秀的开源库,只保留你需要的东西,比如它的架构.工程化和文档能力,以及部分基础组件,在裁剪

如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本的nodejs. 今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个

Update2019/3/6:发现一个更好的方法,预处理器加载一个全局设置文件 官方github给出了详细的配置. 在 SCSS 中使用变量很方便,创建一个 variables.scss 文件,里面声明各种变量,如果你需要使用这些变量,就使用@import variables.scss导入这个文件即可.但这样会存在两个小问题: 每次使用都要导入,不优雅 JavaScript 文件无法使用这些变量 有没有两全其美并足够简单的方法呢?(:废话 假设有这样一个保存 scss 变量的文件,style/s

在scss的variables.scss 中会有很多的变量 $color: red !default; $body-color: $color !default; 这些!default 和我们理解的!important 恰恰相反,default是默认的意思,在variables.scss中全部的变量字尾都有!default. 那么要覆盖我们就必须在variables之前放你的变量 // Core variables and mixins @import "my-variables.scss&qu

vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Please pick a preset: (Use arrow keys)> default (babel, eslint) Manually select features移动上下键选择“Manually select features”:表示手动选择创建项目的特性. 显示如下: ? Check the

当我们尝试在一个scss文件中定义全局变量然后在.vue文件中使用的时候 哦豁,找不到变量,意料之外 我发现犯了一个错误,没导入,@import 'path/to/file.scss',不过这样的话,每个.vue文件导入起来很麻烦,我们需要一种导入然后默认在.vue导入使用,比较方便 暂时没研究原理,在官方配置手册找到了解决方案 根目录下新建vue.config.js module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项

项目多多少少应该都遇到有公用文件这种情况,比如说偶尔某一天产品来找你,能不能明天把网站的这个颜色给我改下?第二天再来给我换回来? 如果再css2.x时代,不使用css预处理技术,这一改只能“查找替换”了,使用预处理不使用变量也只有“查找替换”了. 当然,css3的时代就另当别论了,因为css3本身已经开始支持变量(参考文档MDN)! 话不多说,首先可以去看看nuxt官网的公用文件使用方式,链接! 毕竟还要装个第三方包文件style-resources,老实说每多装一个插件项目被黑的风险就大一分,

比较 如果你熟悉原来一系列的构建工具,grunt或者gulp之类的,这里有一篇webpack和他们比较的文章可以读一读. Webpack Compared 安装 先装好node和npm,因为webpack是一个基于node的项目.然后 npm install -g webpack 总览 官网对webpack的定义是MODULE BUNDLER,他的目的就是把有依赖关系的各种文件打包成一系列的静态资源. 请看下图 webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的. 这

CSS 模块 如果你想知道 CSS 最近发展的转折点,你应该选择去观看 Christopher Chedeau 在2014年11月的 NationJS 大会上做的名称为 CSS in JS 的分享.不得不说这是一个技术分水岭的时刻,一群不同的思维在自己的方向上就像粒子进入了高能漩涡中一样飞速发展.其中,在 React 或者是 React 相关的项目中编写 CSS 样式,React Style, jxstyle 和 Radium 这三个算是最新的,最好的以及最具有可行性的方法.如果说"发明&quo

参考来源:知乎张轩 安装 先装好node和npm,因为webpack是一个基于node的项目.然后 npm install -g webpack 全局安装 还可以在当前项目里面也安装一个webpack, 这也是官方推荐的做法 npm install webpack --save-dev 总览 官网对webpack的定义是MODULE BUNDLER,他的目的就是把有依赖关系的各种文件打包成一系列的静态资源. 请看下图 webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的

add by zhj: 作者写了三篇文章,这是第一篇幅,另外两篇参见 https://zhuanlan.zhihu.com/p/20397902 https://zhuanlan.zhihu.com/p/20522487 原文:https://zhuanlan.zhihu.com/p/20367175 Webpack傻瓜式指南(一) Webpack最近很热,我一开始是想翻译一篇国外关于webpack的佳作,但是找来找去也没有一篇让我感觉到很满意的,好多都是一步到位,满屏幕都是React+Webp

前言 这是Glen Maddern发布于2015年8月19日的一篇文章,主要是之前翻译的文章<理解CSS模块方法>里提到这篇文章,现在算是顺藤摸瓜跟进来看看. 这里的翻译都是根据我自己的理解进行的,所以不是一句一句的来的,有哪些不对的也在所难免,水平有限,希望大家指出. 正文 如果想在最近CSS开发思想上找到一个转变点,最好去找Christopher Chedeau 2014年11月在NationJS上发表的“css in js”演讲.这是一个分界线,各种不同的思想,就像高速粒子似的在自己的方

其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好的方法是向优秀的项目学习,依葫芦画瓢. 这里通过研究 vue-admin-template 项目,逐一引入 element-ui.axios.mock.iconfont.nprogress.权限控制.布局.多环境(.env).跨域.vue.config.js,一步一步打造我们自己的架构. Tip:

说在前面 本篇记录学习了vue-element-admin中的多级菜单的实现 [传送门] @vue/cli 4.2.2:vuex:scss:组件嵌套 正文 创建项目 npm create 项目名 //或npm init webpack 项目名 安装element-ui npm add element-ui //或npm i element-ui 安装vuex npm add vuex //或npm i vuex 安装完vuex后会出现src/store目录,同时在src/main.js中vue实