1、CDN引入<script src="https://unpkg.com/vue@next"></script>案例:<body> <div id="app"> </div> <script src="https://unpkg.com/vue@next"></script> &
1.添加依赖npm install less less-loader --save-dev2.打开build/webpack.base.conf.js,在 module.exports 的对象的module.rules里添加一个新规则:{ test: /\.less$/, loader: "style-loader!css-loader!less-loader",
原创 2021-12-01 11:28:00
847阅读
最近在研究的一些技术知识:SwiftUIJavaScriptCoreiOS14 WidgetKitVue-Server-Renderer起源于自己打算写一款 iOS App,用简单的方法,去编写复杂、精致、实用的小组件。可惜小鱼还是个 iOS 开发小白,很多内容都需要一边学习查找资料一边测试开发,所以进度还是挺慢的。随着一步步研究的深入,发现了很多有趣好玩的技术知识,为我开发 App 积累了很多实
vue里,会出现很多文件引入的情况。常见的就是在router或者公共组件的引用,我们分别对这两种情况进行讨论,并提出优化方式。一.router文件的引入当我们的项目体系足够大时,将路由全都放在index.js文件是不优雅的,页面代码过于复杂会造成阅读和维护的困难。所以这个时候,我们一般采取分模块引用,一个模块对应一个js文件,里面存放对应的路由信息。但是当我们的模块足够多时,重复的文件引入对我们
今日目标:1:今天的学习内容是在工作完成的情况下,学习Less(之所以学习Less是因为项目中使用的是Less)-------------当前进度(0%) 注意项:务必确保在 less.js 之前加载你的样式表。如果加载多个 .less 样式表文件,每个文件都会被单独编译。因此,一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问 注意,
转载 2024-10-22 10:03:18
46阅读
项目创建过程中经常遇到的一个需求就是权限管理,本文就我在使用动态路由的过程中进行一个总结首先,前端想要实现对菜单的动态渲染实际上有两种操作方式1.前端还是书写静态路由表,根据后端传来的code利用v-if去判断渲染菜单项 实际这种使用方式并不可取,因为不方便后期维护。 2.前端只写没有权限控制的login,register, 404 页面的路由,其余路由则是根据后端传过来的,拼接入路由表。这里我在
(1)组件化模块化就是将系统功能分离成独立的功能部分的方法,一般指的是单个的某一种东西,例如js、css而组件化针对的是页面中的整个完整的功能模块划分,组件是一个html、css、js、image等外链资源,这些部分组成的一个聚合体优点:代码复用,便于维护划分组件的原则:复用率高的,独立性强的组件应该拥有的特性:可组合,可重用,可测试,可维护(2)组件在vue中,我们通过Vue.extend来创建
转载 2024-10-09 18:08:06
162阅读
Vue-cli搭建的项目中引入css报错的原因分析我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧!1.问题描述之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vue)引入自己的css文件(假如你的文件是在src目录下),都会报一个相同的错。下如图经过一番
一、组件全局组件:所有组件共同可用的功能(全局指令、过滤器、组件)组件的属性不能用大写字母 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)注册的组件不要跟系统标签同名Vue.filter("alltool", function (str) { return str + "-allt
前言在大家都会用vue的时代,我们又如何去区别是新手小白还是资深vue玩家呢? 如何让自己与刚学vue的人拉开差距呢? 其实,很多人对于vue只停留在基础使用。想要提升自己,就应该想办法将其运用到更高的层次。 本文会从以下三个方面,来进阶我们对vue的运用能力 组件 : 全局组件注册 Render函数 : 拯救繁乱的template Vue权限控制&nb
转载 2024-08-08 15:42:30
91阅读
Vue的条件判断和循环遍历条件判断v-if的使用v-if的使用非常简单,首先,我们来看一下下面这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid
公用方法、样式处理 1、公共样式、共用rem文件这类型的 直接在main.js中通过import的方式引入,如下: // 引入公共文件 import './assets/css/reset.css' import './assets/js/useRem.js' 2、共用方法,后期会在各组件中调用的函数,需要新建一个base.js的文件,放置位置与main.js同级,base.js内部,写法如
前景提要个人在学习less时候的学习笔记及个人总结,主要是结合less中文网来学习的,但是说是中文网并不是中文呀,看起来很耽误时间,为了避免以后再次看的时候还要翻译思考,特意做此总结,方便以后查阅。概述Less是Css的一种扩展,完全兼容css语法,我们在使用中可以直接 link 引入也可以,通过编译工具,将less 编译成 css后再引入;目录:一、变量二、Extend  扩展三、Mi
转载 2024-06-05 22:42:56
177阅读
1.问题重现当我做了这个配置以后,发现less里的图片可以正常展现到页面,但是js里的图片以及其他文件都不能正常展现,都报404原始配置如下:// 如果有額外的.babelrc配置的話就可以使用這段代碼1 // module.exports = { // module: { // rules: [ // { // test:/\.jsx?$/, //
转载 2024-09-22 19:54:05
152阅读
安装Nodejs、npm、将预处理css的Less文件转变cssless是一款比较流行的预处理CSS,支持变量、混合、函数、嵌套、循环等特点1、 安装nodejs到 官网先下载最新版本的node,我的是node-v12.2.0-x64.msi版本,双击打开,装到自己想装的盘符,在这里我装的是D:\workTools\nodejs文件夹下,然后一直点击下一步,直到最后。在D:\workTools\n
使用gulp构建前端工具,实时编译less,合并压缩requirejs加载模块 gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18)。下面就简单的介绍这些命令如何互相配合的完成前端的构建工作。项目结构: 首先全局安装gulp,使用命令:npm i
一、Vue的动态引入组件;  有的时候不知道引入什么组件,要根据数据的类型来引入不同的组件,这个时候就需要动态组件 动态组件   1、用法 :is = 'component-name'   2、用途父组件<component :is="nextTiceName" />":is 后边是组件名,是一个变量,本例子中变量为 nextTiceName,然后 nextTiceNam
Inline Styles 内联样式<Button Margin="0,0,2,2" Grid.Row="0" Grid.Column="0" Name="cell00" > <Button.Style> <Style> <Se
转载 3月前
377阅读
一、LESS是什么?Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。中文介绍:http://lesscss.cn/ 有JS基础的同学应该很快就能掌握LESS 二、准备工作,在一个bootstrap项目中使用LESS。  上面的网站介绍了LESS的多种入门方法,这里主要以npm+webstorm 为例:
问题:对于要引用的第三方包,使用第三方CDN连接,用< script >标签引入和通过npm引入,并使用相关打包工具进行管理, 有何区别?我认为,有以下几点需要考虑:CDN的特点。CDN的主要优势就在于,不同地区的用户访问,会就近加载资源。所以: 如果你的系统会部署在全国或全球范围内,那么使用CDN,下载速度可能会更快一些(一般CDN的宽带都是很高的,下载速度很快);如果不是,那
转载 2024-09-12 09:48:28
53阅读
  • 1
  • 2
  • 3
  • 4
  • 5