前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个错误:"变量未定义". 那还有一种写法是,在每个组件中都引入公共样式(注:需要用到公共样式的组件),但这样写,感觉代码会很不perfect . 那有没有什么办法,只要公共样式引入一次,即可在全部组件中使用呢? 方法一:使用sass-resources-loader解决Sass全局变量问题

vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起,但之后的 v2 版本便比较独立,vite 不仅支持 vue,还支持 React.Preact.Vanilla 等前端库. 由于 vite 出现的时间不是很久,基于 vite 创建的项目没有 vue-cli 那么完整,如果要使用 vue 全家桶.ESLint 等,还需要开发人员手动添加和配置,步骤稍

今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 2020年09月18日Vue.js 3.0发布,经历了两年时间的对细节的不断优化与调整,终于在今年2月正式成为新的默认版本.其作者尤雨溪将Vue3的目标描述为: 1.更快 2.更小 3.更易于维护 4.原生目标更容易 5.开发更轻松 只看上述内容,你可能感受不到Vue3究竟优化了什么.这里我们将它和Vue2来对比一下,为大家具体说明它的优越之处.

在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容.在本篇中我们将从项目实战出发带大家了解Vite+Vue3 的在线表格系统的构建. 使用Vite初始化Vue3项目 在这里需要注意:根据官网文档说明,使用Vite需要node版本在12以上,请在创建项目前检查node版本 初始化项目命令: $ npm init vite-app <project-name> // (project-name 为项目名)创建vite项目脚手架包 $ cd <project-name> /

今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了.三大框架孰优孰劣,众多开发者各抒己见,其中Vue以其"最简单.最易上手"的名号迅速积累了一大批粉丝,被广泛学习应用. 同Angular.React框架一样,Vue也是MVVM类型的框架,即数据驱动视图,在开发时我们只需要关注数据的变化即可.不同的是,Vue是一个更轻量级的框架,被设计为自

在 <JS 模块化>系列开篇中,曾提到前端技术的发展不断融入很多后端思想,形成前端的"四个现代化":工程化.模块化.规范化.流程化.在该系列文章中已详细介绍了模块化的发展及四种模块化规范.本文简单聊聊规范化中的 git 规范. 1 规范化 在企业级开发中,"一千个读者有一千个哈姆雷特"是很常见的事,每个程序员对技术的理解.视角和掌握程度参差不齐,导致编写的代码五花八门.规范化包括很多,我在企业实践中重点关注两个方面:代码规范 和 git 提交规范. 代码

无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的使用几乎大家都会,但自己开发一个独立组件库就不是每个人都掌握的,因为搭建组件库的基础开发环境,就会让很多同学望而却步.一个组件库应该至少要包括三个方面: 组件库的开发和打包: 组件库文档的开发和打包: 命令行工具 cli 快速创建新组件. 这几天 程序员优雅哥 搭建了一个组件库的基础脚手架: vue3-component-library-archetype 在这个脚手架的基础上,大家可以使用内置的 cli 快

背景 目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已是大势所趋, Vite势必也将成为官方Vue脚手架, 下图是尤雨溪在开发好Vite之后与webpack之父的对话 所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈 我前段时间做了一个, 但是发现了一些与Vite有关的问题, 比如:Vite会把开发环境的process对象吃掉的问

vite+vue3+typescript搭建项目过程   vite和vue3.0都出来一段时间了,尝试一下搭vite+vue3+ts的项目 相关资料网址 vue3.0官网:https://v3.vuejs.org/guide/introduction.html#getting-started Element对vue3支持--Element Plus官网地址:https://element-plus.gitee.io/#/zh-CNgithub地址:https://github.com/eleme

theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被打造出来的吗? 读完这篇文章你将学会: 如何使用pnpm搭建出一个menorepo环境 如何使用vite搭建一个基本的Vue3脚手架项目 如何开发调试一个自己的UI组件库 如何使用vite打包并发布自己的UI组件库 作为一个前端拥有一个属于自己的UI组件库是一件非常酷的事情.它不仅能让我们对组件的原

系统简介 此管理系统是基于Vite2和Vue3.0构建生成的后台管理系统.目的在于学习vite和vue3等新技术,以便于后续用于实际开发工作中: 本文章将从管理系统页面布局.vue路由鉴权.vuex状态管理.数据持久化.用户信息加密等方面进行介绍和记录: 这也是我边学习边实践的过程,此次记录一是方便自己日后开发过程中有用到时候便于借鉴和复习,再次是为了初学vue3和尝试上手vite2和vue3搭建管理系统的小伙伴提供一些学习方法和技术点: 本Vue后台管理系统使用的技术点主要有:vite2.vu

前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于项目逻辑简单,只使用了少量 API,我只是写这个小项目过把手瘾,所以对应标题 上手.如果您只是想学习 vue 周边的 API,那么,这篇文章将给您带来有限的知识. 初始化项目 使用 vite 初始化 vue3 项目.什么是 vite?Vite 是一个 Web 构建工具.开发过程中通过浏览器 ES M

上文已经搭建了 pnpm + monorepo 的基础环境,本文对 workspace-root 进行初始化配置,包括:通用配置文件.公共依赖.ESLint. 1 通用配置文件 在项目 根目录 下添加下面的配置文件. 添加 .editorconfig 编辑器格式配置文件 [*.{js,cjs,ts,jsx,tsx,vue,html,css,scss,md}] indent_style = space indent_size = 2 trim_trailing_whitespace = true

1. 引言 CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量.函数.循环.分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CSS编程的扩展语言(CSS4也可以期待),有了像Sass这种预处理语言后,CSS的编程不再局限在枚举属性了,可以有更广阔的舞台. 2. Sass的原理 Sass本质就是在CSS的语法的基础上增加了自定义的变量.循环.分支.函数.mixin.继承.运算等功能,让CSS编程变得异常强大. 当然浏览器是不认识Sass语法.开发人员写完

前言 下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址.项目采用前后端模式,前端使用 Vite + Vue3 + TS:后端使用 Knex + Express + TS.目前项目还没有完全实现,文章的目的是记录阶段性"胜利"和分享知识. 关于搭建 TS 项目请看搭建 Webpack + TypeScript + Babel 的项目或者JavaScript迁移. Room 的概念 私密 Room 在开始做私聊功能之前,要掌握 Socke

1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 vue3 组件库项目.具体如下: vue3 全家桶项目 使用 yyg-cli 创建的 vue3 全家桶项目,底层基于优雅哥编写的开源项目 vue3-vite-archetype,默认整合如下库: - vite3.vue3 - typescript.tsx - vue router - pinia

大纲 这一讲我们最主要的就是学习vue中的数据管理VueX,这个是一个大杀器 一.回顾一些Promise相关的东西 Promise 有几个比较重要的方法,最重要的还是有一个叫做all的方法,这个也是非常的强大的 假设我们目前要求,希望能按顺序的拿到先后的两个ajax那么我应该怎么处理呢 Promse.all( [ new Promose( ( resolve,rejcet ) => { $.ajax({ url:'xxxx', data:'xxxx', sucess:(res) => { re

一.是什么 Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码 Css预处理器便是针对上述问题的解决方案 预处理语言 扩充了 Css 语言,增加了诸如变量.混合(mixin).函数等功能,让 Css 更易维护.方便 本质上,预处理是Css的超集 包含一套自定义的语法及一个解析器,根据这些语法定义自

在Vue.js中,每一个vue文件都是一个组件,在.vue文件中可以将模板,脚本,样式写在一起,便于组织整个组件.在使用template,script时,编写css样式时,都进行的特别顺利,唯独当我想用sass来预处理css时,在style下使用lang='sass'一直报错. 在.vue中是这样的. <template > <div class="haha"> <p> keith + {{ message }} </p> </di

我相信,有不少的朋友对webpack都有或多或少的了解.网上也有了各种各样的文章,文章内作者也写出了不少自己对于webpack这个工具的理解.在我刚刚接触webpack的时候,老实说,网上大部分的文章我是看不懂的..webpack里面有很多名词,是没有接触和理解过模块化的同学都难以理解的.我感觉,学习任何一项新技术,要弄清楚为什么使用它,它是什么,它有什么用等概念,弄清楚这些概念之后,我相信,在日后的webpack学习中会达到事半功倍的效果.这篇文章,我会以最简单的方式,阐述什么是webpack

一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义一个全局的弹窗组件.下边开始上代码. 二.实际代码如下: 1.在components目录下的public目录新建一个文件夹alert,然后新建两个文件alert.vue和alert.scss.组件的样式代码我喜欢跟组件放到一起,这样按模块去划分管理.公共的样式就放到公共的样式文件里就行了. 2.al