一、搭建项目 1、注意Node的兼容性:Vite 需要 Node.js 版本 >= 12.0.0 !!!2、创建项目 使用 NPM:npm init vite@latest使用 Yarn:yarn create vite 或者 yarn create vite vite-demo --template react-ts // 直接项目一步到位 项目名 使用的语言框架使用 PNPM:pnpm
转载 2024-10-30 10:56:44
153阅读
1.安装插件postcss-plugin-px2rem;npm i postcss-plugin-px2rem --save -dev2.在vue.config.js中配置 。这里需要说明一点,网上搜的一堆教程都强调应该增加remUnit来设置rem的计算标准。但是其实在新版后,这个值换成了rootValue这个。例如你设计稿为750的宽度标准,那么这里的值设置为75则可。module
电脑常见的图片格式大概就是JPG、Gif、PNG、PSD等,使用图片的时候,你会发现很多时候有些网站对图片格式有特定的格式要求,又或者某种图片格式文件太大,比较占用空间,因此,转换图片格式可有效的控制图片文件大小。 如何实现图片格式转换呢?在生活我们经常需要批量转换图片格式,所以在电脑上下载安装一款图片格式转换器很有必要,直接解决的图片格式的问题,特别方便。今天本文将与大家介绍下怎么转
Vue生态系统中有一个名为Vite的新构建工具,它的开发服务器比Vue CLI快10-100倍。这是否意味着Vue CLI已经过时了?在本文中,我将比较这两种构建工具,并说明它们的优缺点,以便你可以决定哪一种适合你的下一个项目。Vue CLI概述大多数Vue开发人员都知道,Vue CLI是使用标准构建工具和最佳实践配置快速建立基于Vue的项目的不可或缺的工具。其主要功能包括:工程脚手架带热模块重载
【需求】实现三个(数字+文字)的页面效果【场景】后端提供的数据格式为对象,其中有三个键名对应着所需数字,文字则不提供(需前端自行匹配)【思路】1. 最开始的做法是单独写出来<div class="test"> <div> <p class="figure">{{ obj.numA }}</p> <p&gt
    最近为移动端使用rem雪碧图小图标自适应困扰,想了半天终于找到解决方案!难点在于雪碧图要跟随屏幕缩小,下面我们进入正题!    大家先要明白rem是什么,我给大家个新的理解,rem的本质就是百分比转换,不明白的童鞋可以具体去恶补下rem相关知识!既然rem的本质是百分比转换,那么我们也可以通过同样的方法转换雪碧图,下面上案例!  &nbsp
转载 10月前
72阅读
新建项目12345678# 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines) webpack ru
 (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 首先介绍一下混入mixin的概念:官方文档:混入提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。个人理解:混入就是用来对vue组件中的公共部分,包括
转载 21天前
341阅读
Wepy项目转移到uniapp项目 (经过上网百度以及官网的学习、大概解决了、还有一些和服务端连接的问题没处理好) 一、 (vscode条件下实现的在hbuilderX也可以正常运行) 1.1 全局安装:npm install -g @vue/cli 1.2 通过cl创建uni-app项目:vue create -p dcloudio/uni-preset-vue my-project 后面可以选
Situation需求 项目中的一种题目 计算题需要配置特定运行指令,计算题的编辑和新增是同一个页面 基本信息提交、配置指令提交和配置文件上传各是一个接口,一共涉及3个接口 指令提交和文件上传均需要questionId,因此我们设计 第一页进行题目基本信息提交,请求成功后后端返回questionId,我们拿到questionId后 下一步 跳转至 第二页,进行指令的配置 问题 编辑计算题时,第一页
转载 2024-05-17 17:50:20
77阅读
transition过渡属性属性描述值举例transition简写,包含4个过度属性transition:width  1s  linear  1s;transition-propertycss属性的名称all:所有属性都将获得过渡效果。transition-property:height;transition-duration过渡效果花费的时间,默认0transit
属性绑定获取自定义属性值   v-bind如果想要操纵挂载标签的属性,则使用v-bind进行属性绑定,当然也可以进行简写,简写形式为:。需要注意的有以下两点:如果包裹属性的是双引号,它将访问Vue实例尝试获取该属性如果包裹属性的是单引号外层再包裹上双引号,则代表这就是一个普通的字符串单纯双引号,将会访问Vue实例尝试获取该变量:<!-- 结果:<p s1
转载 2024-09-26 22:14:42
153阅读
文章目录Vue项目打包成exe可执行文件需要工具执行步骤跨域失效解决方案 Vue项目打包成exe可执行文件一篇好文章 如何用electron技术将Vue项目打包成exe可执行文件需要工具1. node版本>12 2. vue版本>2.x 3. 魔法上网工具不满足条件的先去升一下,再继续下边的操作执行步骤进入Vue项目的根目录,打开命令行,注意项目所在路径不能有中文,否则会报错的哦 v
升级版本通常情况下,把版本升级到最新不仅可以提高编译速度也可以避免一些出现过的问题( 惨遭打脸选用的 Ant Design of Vue 就重大更新了一次,又重新写的 )。按需加载比如常见的 lodash 库,我们显然不需要全部都用到,所以要采用按需加载的方式来引用,对一些常见的方法进行提取统一进行处理,一般来说如果支持的话,文档都会标注,如果没有又不想要体积太大就自己写一个,这方面不在过
文章目录先用官方的命令,新建一个nuxt项目改造目录在根目录新建src文件夹,将文件夹都剪切到src中,配置nuxt.config.js配置router.js配置eslint项目迁移安装插件配置别名文件迁移配置插件(我们自己封装的install插件)配置环境,以及不同的环境下打包到不同的目录修改package.josn里面的命令修改nuxt.config.jsnuxtjs中使用高德地图nuxt.
转载 2024-10-11 14:08:16
247阅读
vue-cli3.0实现移动端自适应,亲测有效项目使用vue3.0编写代码,说要打包成apk文件,在安卓上看,现在需要适配移动端的样式,记录一下,亲测有效。安装插件vue脚手架略过lib-flexible : 会自动在html的head中添加一个<meta name="viewport">的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根
vue项目移动端、pc端适配方案vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度,自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、安装 lib-flexible和 postcss-px2remnpm i lib-flexible -S npm i postcss-px2rem -S简要介绍这两个包的用途:lib-flexi
转载 2024-04-04 11:38:14
1547阅读
创建一个模板 npm init @vitejs/app my-vue-app -- --template vue yarn create @vitejs/app my-vue-app --template vue 目录结构 vscode 安装插件 volar 的vue3插件 安装yarn npm i
原创 2022-12-08 14:55:39
242阅读
vue现在已经出到3.x了,但是2.x还是使用的更多,就像我现在工作中在做的项目。身为后端,有时候不得不也要会前端的知识,本篇就按顺序先从2.x开始入门吧。 一、vue.js背景先声明一下,vue.js和vue是指一个东西,vue只是vue.js的简称罢了。1.什么是vue官方的说法是:vue是一套用于构建用户界面的渐进式框架。从这里我们就可以看出vue首先不是某个类库,而是一个框架,这
前言你是不是习惯了vue2的赋值即响应式?vue2还有个Vue.observable但你从没用过?结果Vue3像跳跳糖一样跳出来这么多的响应式API,你有没有懵逼的感觉?不慌,挨个学。由于官方文档写的晦涩难懂,所以我写下这篇。原创:简书microkof。首先说明,全文提到的“基本数据”是指“数据类型为基本数据类型的数据”,“原始数据”是指转变为响应式数据之前的纯对象或基本数据。reactiveV
  • 1
  • 2
  • 3
  • 4
  • 5