Windows系统一、先下载node.js，为了之后可以使用npm命令下载第三方包下载地址：建议安装LTS版本Download | Node.js二、安装淘宝镜像（因为经常下载第三方包速度比较块-节省时间）（设置淘宝镜像：大家都知道国内直接使用 npm 的官方镜像是非常慢的，所以这里推荐使用淘宝 NPM 镜像。）使用管理员身份打开cmd，在打开的命令行界面输入：三、接着安装vue和vu
Webpack+Vue-router的架构方式Vue-cli安装省略（vue-cli搭建）ElementUI库（pc端）的引用（见下文）打包（项目完成后打包放服务器）在项目目录下运行 npm run build 运行完成之后会在项目里面增加一个dist的目录，直接把这个目录丢给服务器就好了，dist目录的名字可以自定义在配置文件里面 上面1、2项完成好后，在命令框
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库，在开发移动端之前，通常要做好rem适配，当然也可以的vw适配，这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件：步骤一：安装 npm i amfe-flexible步骤二：引用 （在main.js里面引用一下下）import 'amfe-flexible'步骤三：看效
转载
2024-04-07 13:07:12
639阅读
由于内容较多，我将其分为了里两部分：Vue3较Vue2的更新内容（一）>>>18、按键修饰符变更vue3将不再支持使用数字 (即键码) 作为 v-on 修饰符，不再支持 config.keyCodes 在 Vue 2 中，keyCodes 可以作为修改 v-on 方法的一种方式。<!-- 键码版本 -->
<input v-on:keyup.13="submit
VUEvue是一套前端框架，免除原生的js的DOM操作，简化书写基于MVVM（model-view-viewmodel）思想，实现数据的双向绑定，将编程的关注放在数据上。什么是框架：框架相当于一个半成品，是一套高效的代码模板，基于框架开发更加的高效VUE数据绑定模型：model层中存在着对数据的处理，view说白了就是html界面，两者通过桥梁（viewmodel）进行双向绑定，数据发生变化，页面
vuejs实战——PC端一、项目使用资源整合1、使用vue-cli脚手架工具搭建2、使用UI框架——elementUI二、使用vue-cli创建项目全局安装 vue-cli（$ npm install –global vue-cli）创建一个基于webpack模板的新项目（$ vue init webpack 项目名称）进入项目目录（$ cd 项目名称）安装依赖（$ npm install）运行项
转载
2024-09-06 16:12:53
155阅读
文章目录先用官方的命令，新建一个nuxt项目改造目录在根目录新建src文件夹，将文件夹都剪切到src中，配置nuxt.config.js配置router.js配置eslint项目迁移安装插件配置别名文件迁移配置插件（我们自己封装的install插件）配置环境，以及不同的环境下打包到不同的目录修改package.josn里面的命令修改nuxt.config.jsnuxtjs中使用高德地图nuxt.
转载
2024-10-11 14:08:16
247阅读
黑马面面(vuePC端项目)主要就是后台管理系统01-项目创建:01-1、就跟之前一样,安装脚手架(前面也有写也都做过,这里粗略写一下) a.参考地址:https://cli.vuejs.org/zh/guide/installation.html &nb
作者：月夕 演示代码使用 Vue3 + ts + Vite 编写，但是也会列出适用于 Vue2 的优化技巧，如果某个优化只适用于 Vue3 或者 Vue2，我会在标题中标出来。一、代码优化v-for 中使用 key使用 v-for 更新已渲染的元素列表时，默认用就地复用策略；列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改，则
一、v-show与v-if的共同点我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示在用法上也是相同的<Model v-show="isShow" />
<Model v-if="isShow" />当表达式为true的时候，都会占据页面的位置当表达式都为false时，都不会占据页面位置二、v-show与
使用lib-flexible和px2rem实现移动端和PC端界面适配注释：lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题、现已不被推荐（因为目前比较主流的适配方案是使用vw和vh的方式进行适配）、lib-flexble是根据屏幕的大小自动分配对应的font-size大小，px2rem是将项目中所书写的所有px单位转换成rem单位。 故当前所使用的适配方案其根本用的还是rem实
转载
2024-09-11 07:26:11
751阅读
作者：清风皓月一.涉及技术点vite版本vue3ts集成路由集成vuex集成axios配置Vant3移动端适配请求代理二.步骤vite+ts+vue3只需要一行命令npm init @vitejs/app my-vue-app --template vue-ts配置路由npm install vue-router@4 --save在src下新建router目录，新建index.ts文件import
vue项目pc端和移动端适配1、pc端适配一、样式中根据设计稿确定缩放比例（可以设置全局或者部分页面）二、监听窗口大小改变，设置根字体大小 created() {
// 获取当前设备的宽度，设置rem的根字体大小
let width = window.innerWidth;
width = width <= 1200 ? 1200 : width;
const htmlObj = d
转载
2024-05-21 10:54:56
2691阅读
前言在移动端页面开发过程中避免不了对页面做适配，适配方案说多还是挺多的，接下来主要讨论一下rem和em。兼容性ios：6.1系统以上都支持android：2.1系统以上都支持大部分主流浏览器都支持，可以安心的使用~一、remrem是基于页面根元素html字体大小来设置，例如给html元素设置font-size: 30px; p元素的font-size: 0.5rem;可以使用geComputedS
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阅读
做移动端，最重要的是适配和兼容性问题，兼容性暂且不说，只聊聊适配问题，虽然网上文章有很多。1、我们所能看到的。移动端的viewport(设备展示页面的区域)分为三种layout viewport：大于设备屏幕的浏览器可视区域 。ps蓝色代表layout viewport 2.visual viewport：在设备屏幕上看到浏览器的大小。个人理解为上图红色框部分。3. ideal vie
vue动态绑定多个样式在项目开发的过程中遇到这样一个需求：有一个节点的状态的显示，使用了element的时间线的组件，但是这个节点的状态有十几种，不同的状态有不同的显示方式，也就是说动态绑定样式。1、一开始的想法这原本不复杂，但是由于样式太多（十几种），一堆都写在标签内的话，代码非常的不美观，因此想用一个好一点的方式去实现。 使用:style="{color:item.color}"遍历的方法动态
vue移动端模板tip：1、ui我们使用的是vux，庆幸的是，解决了打包过大的问题，2、这里使用的是rem布局，移动端还是要使用ipad和不同尺寸的手机3、版本：webpack:3.6.0 vue:2.5.2 vue-loader:13.3.0 vux:2.8.1 vux-loader:1.2.7 版本很重要，版本很重要，版本很重要，vue及生态更新太快，控制好
vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem一、第一步先安装 flexible和 postcss-px2rem（命令行安装）npm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：flexible会为页面根据屏幕自动添
转载
2024-10-08 19:47:09
751阅读
vue 实现 rem 布局的 或者 vw 布局的方法一、实现 rem 布局移动端name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
方法一、在 index.html 或者 main.js 中添加以下代码：
const setHtmlFontSize = () => {
let
转载
2024-10-09 12:11:32
107阅读
