• vite创建项目,cra创建项目,vue-cli创建项目


    各脚手架区别

    vitecreate-react-appvue-cli
    适用react/vue都可用只适用于react只适用于vue
    基于基于rollup打包基于webpack打包基于webpack打包
    创建项目npm create vite@latest 项目名称npx create-react-app 项目名称 --template typescriptvue create 项目名称
    修改配置在vite.config.js/ts修改三种方式,具体看下文在vue.config.js修改
    预编译器只用引入sass/less,不用管loader,很方便默认配置了sass,无lesssass/less都需要自己安装
    svg封装vite-plugin-svg-icons(主要就是rollup没有loader一说)svg-sprite-loadersvg-sprite-loader

    vite脚手架

    基于rollup打包,vue、react都可以通用。很方便,预计会成为一种趋势 (但是作为micro-app微前端的子应用,现在问题还很多)

    create-react-app脚手架

    方式一:
    	git操作:到 commit 这个步骤
    	npm eject :解析所有webpack配置
    	发现缺点:webpack无关依赖太多太杂,config配置太杂,而且解包后不可逆。(所以不推荐。只能作为参考)
    方式二:
    	安装依赖:react-app-rewired customize-cra
    	根路径:创建config-overrides.js文件
    	修改打包命令:react-scripts 改为 react-app-rewired
    	修改具体配置:使用customize-cra中提供的对应修改方法
    	发现缺陷:起别名时,大部分组件导入没问题,部分组件导入居然会报错。会覆盖配置,
    	比如自带的less需要重新配置,而且按他的方式配置居然会报错。(所以不推荐。各种报错花里胡哨)
    方式三:
    	安装依赖:@craco/craco
    	根路径:创建craco.config.js文件
    	修改打包命令:react-scripts 改为 craco
    	修改具体配置:使用craco中提供的对应修改方法
    	发现缺陷:会覆盖配置(推荐!!!)
    	具体配置官网: https://craco.js.org/docs/configuration/getting-started/
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    vue-cli脚手架

    基于webpack,vue2 vue3都能用,vue2一般都用vue-cli

  • 相关阅读:
    硅芯思见:SystemVerilog中枚举类型的一些“不正经”用法
    NIO知识总结三
    Microsoft Office无法重装报错30015-44(3) 0-2031(17004)
    java读取csv文件或者java读取字符串,找出引号内容,采用正则表达式书写
    C#数据库操作
    STM32F103ZET6_ADC
    Ajax 笔记 01
    前端最强面试宝典 - JS 篇之数据类型
    【剑指Offer】57.和为s的两个数字
    【7 Vue3 – Composition API】
  • 原文地址:https://blog.csdn.net/weixin_43847807/article/details/128037701