【vue3.0】从零开始搭建TypeScript + less的px转rem + 反向代理 + axios + vuex

最新推荐文章于 2023-03-14 17:13:03 发布
最新推荐文章于 2023-03-14 17:13:03 发布
阅读量178 收藏
点赞数 1
文章标签： typescript javascript vue.js 前端 npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50785995/article/details/124273726
版权

一、创建项目

Npm 修改下载源   

1、找一个空白文件地址，在地址栏上输入cmd

  1. dos系统进入当前文件地址

     

    1. dos系统中直接输入代码  npm config get registry 查看当前源

       

    2. 当前为淘宝镜像地址，如果你不是，需要修改当前npm 的下载源

      修改npm 下载源

      npm config set registry https://registry.npm.taobao.org

      下载 cnpm

      下载命令npm install -g cnpm --registry=https://registry.npm.taobao.orgc

          

      检测cnpm 是否安装成功

最低0.47元/天 解锁文章
堕丶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3.0 脚手架配置 (TypeScript + less的px转rem + 反向代理 + axios + vuex )
weixin_56529686的博客
04-18 3689
Vue 3.0+TypeScript 脚手架配置
创建vue项目：vue3 + vite + typescript + less
niuiic的博客
05-15 1846
首先声明一下，笔者只是刚玩了会vue, 和 cannot find module vue斗智斗勇了半天。好不容易搞定了，来分享一下。以下不会涉及关于vue开发的具体内容。 首先使用npm全局安装yarn2。 npm install -g yarn@berry yarn2在全局的配置让人迷惑。于是干脆在全局使用npm，yarn2就在项目内用了。 创建项目 # yarn2似乎只能在项目内配置，所以创建项目之前是没法配置镜像的。 # 使用vue + ts的模板创建项目 yarn create @vitejs
CSS3（七） 前端预处理技术（Less、Sass、CoffeeScript）
weixin_30763455的博客
12-09 207
目录 一、Less 1.1、概要 1.2、变量 1.3、解析Less 1.3.1、在线处理 1.3.2、预处理 1.4、混入(Mixins) 1.5、嵌套　　　 1.6、运算 1.7、函数 1.8、继承　　　　 1.9、作用域 1.10、注释 二、Sass 2.1、变量 2.2、嵌套 2.3、导入 2.4、mixin 混入 ...
Less与TypeScript的简单理解与应用，并使用WebPack打包静态页面
abfrhoz161079的博客
01-06 707
既然选择了远方，便只顾风雨兼程 __ HANS许 系列：零基础搭建前后端分离项目 系列：零基础搭建前后端分离项目创建空项目使用Less使用TypeScript使用WebPack开始写项目总结一下 上篇文章我们讲了VsCode的使用以及Node与Npm的使用，并简单的创建了一个Express的简单前端框架项目。那这篇文章我们进阶的使用Less与TypeScript写一个静态的...
less使用混入(mixin)使px转为rem
simple5960的博客
06-10 1628
.px2rem(@name, @px) { @{name}: @px / 37.5px * 1rem; } .home { .test{ background:red; .px2rem(width,20) } }
专栏：Vue3.0 + Typescript + axios + bootstrap +原始注释博客专栏作品
01-31
使用TypeScript语法 使用初步思想开发 使用ESLint语法规范 使用Axios进行数据获取 使用vue-router进行路由重组 使用Vuex进行数据管理 代码中包含清晰注释，方便阅读 文章内容支持markdown格式 如何运行 git clone ...
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
05-23
总的来说，这个项目集成了Vue2、ElementUI、Axios、VueRouter和Vuex等技术，提供了完善的前端开发基础，同时也引入了Less来优化样式编写。这样的组合使得项目具有良好的可扩展性和开发效率，适用于构建大型的企业级...
基于vue-cli3.0+vue+elementUI+vuex+axios+权限管理的后台管理系统.zip
08-20
这是一个基于现代化前端技术栈构建的后台管理系统，主要利用了Vue.js框架、vue-cli3.0构建工具、Element UI组件库、Vuex状态管理和axios库进行数据请求，同时实现了权限管理功能。下面将对这些关键技术和知识点进行...
cli3.0+vue+elementUI+vuex+axios+权限管理的后台管理系统
最新发布
04-04
cli3.0+vue+elementUI+vuex+axios+权限管理的后台管理系统 项目启动步骤 安装包（这里需要使用npm进行安装，如果用cnpm或者yarn会有热更新失效的问题） npm install 开发运行 npm run serve:randy 生产打包 npm ...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
在vue中使用less px自动转成rem(px2rem-loader) 并配置公用less文件（不用每个vue文件都引一次）
LXY的博客
12-02 3398
首先安装loaderpx2remLoader npm install sass-resources-loader --save npm install px2remLoader--save 之后，在build文件夹下打开utils.js文件 function lessResourceLoader() { var loaders = [ cssLoader...
预编译scss以及scss和less px 转rem
weixin_30853329的博客
07-12 330
预编译scss步骤： 1 搜索ruby并安装，点击 2 安装sass: 3 在hubuilder工具中设置预编译： 触发命令地址为ruby安装地址 命令参数为%FileName% %FileBaseName%.css less预编译则 npm install less -g 然后智能完成即可 scss和less px 转rem 1 首先设置默认字符大小 <...
less scss typescript等代码自动编译插件
weixin_38103152的博客
05-27 155
https://blog.csdn.net/qq_21567385/article/details/107527592 插件名称：Compile Hero 使用：vscode .vscode文件中添加： { "compile-hero.disable-compile-files-on-did-save-code":false }
React中TypeScript如何配置Less、px转reem、antd-mobile和路由
weixin_57157114的博客
09-16 505
创建项目 create-react-app ts3 --template typescript 配置less cnpm install less-loader less --save-dev 查找 node_modules 下面的react-scripts/config/webpack.config.js 上面两行代码放在 接着ctrl+f查找这个sassModuleRegex 放在这段注释的上面 const lessRegex = /\.less$/; const lessModuleRegex
从零使用webpack, less, typescript, react 构建项目 自己的npm
Constantiny的博客
03-14 283
🚩🚩🚩一开始使用React写项目都是直接npx create-react-app name但是要更好的理解npm包构建原理，能看懂别人的开源代码就要自己从头构建一个本文使用webpack, less, typescript, react 构建项目该项目为用hooks函数组件修改后的官方React教程中的井字棋。
从零配置webpack(react+less+typescript+mobx)
weixin_30307267的博客
08-18 312
本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y yarn add webpack webpack-cli -D 根目录下新建webpack.config....
三种预处理器px2rem
weixin_30813225的博客
02-17 235
CSS单位rem 在W3C规范中是这样描述rem的: font size of the root element. 移动端越来越多人使用rem，推荐淘宝开源框架lib-flexible 今天来介绍一下使用 预处理器转换px单位到rem 首先是sass的 //定义一个变量和一个mixin $baseFontSize: 16;//默认基准font-size @mixin p...
VScode+Typescript+Less+Bootstrap3+Eslint环境搭建
duansamve的博客
02-24 681
该环境支持： a、VSCode中自动编译typescript； b、TypeScript 支持jquery、bootstrap； c、ESLint保存时自动检查typescript代码； d、VScode自动编译less； e、eslint自动检查Html中的JavaScript代码； f、具有本地服务器功能； 步骤： 1、VScode中安装Eslint和live Server（本...
react+typescript+less+本地代理项目搭建
wangshang1320的博客
01-29 2892
前置： ps:版本最好差别不要太大，不同版本可能导致不同的问题,这个很重要！很重要！很重要！ 我的版本： create-react-app 5.0.0 typescript 4.5.5 react 17.0.2 node 14.17.0 1. 全局安装create-react-app. 版本 5.0.0 2.创建react项目 1.随便找一个项目文件夹运行npx create-react-app my-app 运行后目录结构： 2....
vue3+ts+vite px转rem
03-28
你可以使用 `postcss-pxtorem` 插件来将 PX 值转换为 REM 值。首先，安装 `postcss-pxtorem` 和 `lib-flexible`： ``` npm install postcss-pxtorem lib-flexible --save-dev ``` 然后，在项目根目录下创建一个 `.postcssrc.js` 文件，添加以下配置： ```js module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 设计稿宽度的1/10，如果设计稿宽度为750px，则rootValue为75 unitPrecision: 5, // 保留5位小数 propList: ['*'], // 哪些属性需要转换，* 表示全部 selectorBlackList: [], // 忽略转换的选择器 replace: true, mediaQuery: false, minPixelValue: 0 }), require('postcss-flexible')({ remUnit: 16 // 设计稿宽度的1/10，如果设计稿宽度为750px，则remUnit为75 }) ] } ``` 最后，在 `vite.config.js` 中添加以下配置： ```js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import postcss from 'rollup-plugin-postcss' export default defineConfig({ plugins: [ vue(), postcss({ extract: true, plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 设计稿宽度的1/10，如果设计稿宽度为750px，则rootValue为75 unitPrecision: 5, // 保留5位小数 propList: ['*'], // 哪些属性需要转换，* 表示全部 selectorBlackList: [], // 忽略转换的选择器 replace: true, mediaQuery: false, minPixelValue: 0 }), require('postcss-flexible')({ remUnit: 16 // 设计稿宽度的1/10，如果设计稿宽度为750px，则remUnit为75 }) ] }) ] }) ``` 现在，你就可以在 Vue3 + TypeScript + Vite 项目中使用 PX 转 REM 了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值