背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多.CSS 预处理器语言有 scss(sass).less 等. 2.SASS和SCSS的区别 除了文件扩展名不同(分别是“.sass” 和 “.scss”)外,Sass是以严格缩进式语法规则来书写的,不带大括号和分号,而SCSS的语法和CSS书写语法类似. 项目引入 1.vue-loa…

背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多.CSS 预处理器语言有 scss(sass).less 等. 2.SASS和SCSS的区别 除了文件扩展名不同(分别是“.sass” 和 “.scss”)外,Sass是以严格缩进式语法规则来书写的,不带大括号和分号,而SCSS的语法和CSS书写语法类似. 项目引入 1.vue-loa…

在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用,由于其主要是使用.net后端生成的报表方式,如果不考虑其在线设计处理,那么可以在在Vue&Element前端项目中使用,通过后端生成报表PDF文件,然后通过前端使用pdf.js来呈现报表最终效果即可. 1.使用FastReport生成自定义报表 我们通过定义自己FastReport报表格式,然后在后端…

在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如何使用自定义封装的字典显示处理. 1.字典内容管理 我们在系统中,往往维护着一些系统常用到的字典信息,在我各个框架中都有一个通用的字典管理模块,对于Vue&Element前端项目,也是一样,我们也需要对它进行管理,方便前端使用.本篇随笔介绍的内容适用于ABP开发框架的Vue&Element前端…

首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁.适应性更强,可读性更佳,更易于代码的维护等诸多好处.CSS预处理语言有SCSS (SASS) 和LESS.POSTCSS 那么SCSS和SASS 有什么区别呢 · 文件扩展名不同,文件后缀分别是“.scss”和“.sass” · sass是以严格缩进语法规则来编写代码的,不包括大括号和…

1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 3.在vue文件中使用 <style lang='scss'> </style> 在vue项目全局中引入scss 1.全局引用时需要安装sass-resources-load…

一.安装jsencrypt npm i jsencrypt node_modules文件夹中出现jsencrypt 二.引入jsencrypt 在main.js中import: import JsEncrypt from 'jsencrypt' Vue.prototype.$jsEncrypt = JsEncrypt 三.生成公钥和私钥(服务端生成) // 私钥 openssl genrsa -out rsa_1024_priv.pem 1024 // cat rsa_1024_priv.pem…

在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还能将我们的html(template).css.js文件通过模板编译的方式将这些文件打包成一个.vue的文件. 为什么在vue-cli项目中能使用.vue的文件? 比如有这之前的一个自定义的组件: Vue.component('app-header', { template: '<div>A cu…

我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找到图标管理.我的项目 2. 点紫色的这个创建自己的项目 3. 图中画红线的地方很重要 1).FontClass/Symbol前缀这个很重要,一定不要写成:el-icon-***这样的形式. 如果你写成这样的前缀,会和element-ui框架所带的图标(icon)冲突,导致你图标显示不出来 2).Fo…

monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代码.对于习惯使用vsCode的开发者来说使用monaco-editor是非常不错的选择. 安装依赖 cnpm install monaco-editor --save cnpm install monaco-editor-webpack-plugin --save-dev 修改webpack.bas…