使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便

这篇具有很好参考价值的文章主要介绍了使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便,HTML前端,前端,vue.js,react.js

Vite官方网站:Vite | 下一代的前端工具链 

Vite 并不是基于 Webpack 的,它有自己的开发服务器,利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建,速度也更快。 

兼容性注意

Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

搭建一个 Vite 项目

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

根据提示,填写项目名称和使用的框架

使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便,HTML前端,前端,vue.js,react.js然后进入项目里面,安装依赖项和启动项目,就可以正常打开项目了: 使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便,HTML前端,前端,vue.js,react.js

配置环境变量

vite 提供了开发模式和生产模式,这里我们可以建立 4 个.env文件,一个通用配置和三种环境:开发、测试、生产。

env文件中的变量名建议以VITE_APP开头,和vue cli中的VUE_APP相同 ,用法也一致

.env文件 通用配置 用来配置一些公用的,栗子:网页的title VITE_APP_TITLE=hello

.env.dev文件 开发环境配置 以api url为例 VITE_APP_PROXY_URL=/api

.env.test文件 测试环境配置 以api url为例 VITE_APP_PROXY_URL=/api

.env.prod文件 测试环境配置 以api url为例 VITE_APP_PROXY_URL=/apiProd

在写api的时候可以这么使用

const baseUrl = import.meta.env.VITE_APP_PROXY_URL
export const getTabList = (params) => {
  return axios({
    method: 'post',
    url: baseUrl + 'QueryTabReq',
    data: params
  })
}

配置proxy代理

vite.config.js中配置server

proxy: {
      '/api': {
        target: 'http://10.0.40.200:8979',
        ws: false,
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }

使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便,HTML前端,前端,vue.js,react.js

配置@别名使用

如果path或者__dirname报红,需要安装支持@types/node到本地 npm i @types/node -D

在vite.config.ts中配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias:{
      "@": path.resolve(__dirname, "src")
    }
  },
  server: {
    host: "",
    proxy: {
      "api/": {
        target: "",
        ws:false,
        changeOrigin: true,
        rewrite: path=> path.replace(/^\/api/, '')
      }
    }
  }
})

配置了@别名之后去引入文件发现vcode没有智能提示,需要配置tsconfig.json:

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "Node",
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "baseUrl": "./",
        "paths": {
            "@": ["src"],
            "@/*": ["src/*"]
        }
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

配置sass使用 

直接安装sass即可:

yarn add -D sass

然后写个scss文件试试:

使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便,HTML前端,前端,vue.js,react.js

效果出来了:使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便,HTML前端,前端,vue.js,react.js

配置Antd组件库

安装组件库,然后导入样式,然后使用

npm install antd --save

 或者

yarn add antd

在main.ts中导入样式:使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便,HTML前端,前端,vue.js,react.js

然后在组件中使用:使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便,HTML前端,前端,vue.js,react.js 

效果展示:使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便,HTML前端,前端,vue.js,react.js文章来源地址https://www.toymoban.com/news/detail-634513.html

到了这里,关于使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+vite+pinia+vue-router+ol项目创建及配置

    vite官网 注意:两种方式创建目录结构一致 方式一:vite创建脚手架命令: 命令行:npm create vite@latest 然后选择 方式二:命令行直接声明带上vue 定义:pinia是一个是Vue官方团队推荐代替Vuex的一款轻量级状态管理库。 pinia官网中文文档 命令行:yarn add pinia 或者 npm i pinia vue-rou

    2024年02月16日
    浏览(85)
  • vite 创建 react 项目

    npm create vite@latest 选择 react 和 ts 安装 redux react-redux npm i redux react-redux 安装 react-router-dom npm i react-router-dom 安装 reset-css 样式初始化 npm i reset-css 在 main.tsx 中引入 import \\\"reset-css\\\" 清除浏览器默认样式 安装 sass npm i sass 正确的样式引入顺序 样式初始化即 reset-css --》  ui框架样式

    2024年01月17日
    浏览(42)
  • Vite+Vue3项目如何获取环境配置,并解决前端跨域问题

    根目录新建.env.development和.env.production文件 package.json配置启动参数 vite命令启动项目时,指定mode参数,加载vite.config.ts文件。 配置代理 在vite.config.ts中配置代理 配置vite-plugin-html 通过vite-plugin-html组件,可以将配置文件中的数据,绑定到index.html中,可以实现不同环境的页面ti

    2024年02月19日
    浏览(66)
  • React 配置别名 @ ( js/ts 项目中通过 @craco/craco 配置)

    在 Vue 项目当中,可以使用 @ 来表示 src/ ,但在 React 项目中,默认却没有该功能,因此需要进行手动的配置来实现该功能。 别名主要解决的问题:每个页面都使用路径的方式进行引入,这样很麻烦,效率很低,这个时候可以配置一个别名,来直接使用别名引入。 使用 @craco

    2024年02月10日
    浏览(43)
  • 如何使用Vite创建Vue3的uniapp项目

    Vue3/Vite 版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7 以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node 路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置-运行配

    2024年02月09日
    浏览(130)
  • 使用vite创建vue3的Cesium基础项目

    使用vite创建vue3项目:可以参考官方文档Vite官方中文文档 1.1 在指定文件夹路径下使用npm(前提是已经安装好了node): 1.2 cd到创建的项目文件夹: 安装并使用Cesium; 2.1 找到插件:vue插件, 找到社区插件, ctrl+F搜索“Cesium”,找到Cesium的插件使用教程:Cesium插件 就能找到C

    2024年02月13日
    浏览(56)
  • 【退役之重学前端】使用vite+vue3+vue-router,重构react+react-router前后端分离的商城后台管理系统

    前言: 对前端各个技术板块,HTML、CSS、JavaScript、ES6、vue家族,整体上能“摸其大概”。笔者计划重构一个基于react的商城后台管理系统。 —— 2024年2月16日 vue3 sass bootstrap ES7 前后端分离 分层架构 模块化开发 npm vite git

    2024年02月20日
    浏览(56)
  • React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)

    在 Vue 项目当中,可以使用  @  来表示  src/ ,但在 React 项目中,默认却没有该功能,因此需要进行手动的配置来实现该功能。 别名主要解决的问题:每个页面都使用路径的方式进行引入,这样很麻烦,效率很低,这个时候可以配置一个别名,来直接使用别名引入。 使用

    2024年02月09日
    浏览(46)
  • 记:vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】

    前言:什么是跨域,网上一搜一大把,所以这里直接跳过,直入主题。 处理方式:不通过后端处理跨域,通过前端+服务器nginx处理。 1.前端涉及处理跨域的必要配置(开发环境、生产环境):vite3、vue3、axios 2.服务器涉及处理跨域的配置(生产环境):nginx【主要用到其配置

    2024年02月01日
    浏览(61)
  • vue3之vite创建h5项目之2 (sass公共样式、声明组件、路由配置和layout组件 )

    pnpm i -D sass 1-1-1 main.ts 引入公共样式方式 1-3-1 src / style / index.scss ( 适配iphonex等还有引入其他公共的样式 ) 1-3-2 src / style / mixin.scss ( 公共样式方法抽离 ) 1-3-3 src / style / reset.scss ( 重置样式 ) 1-3-4 src / style / variables.scss ( 定义的公共变量样式 ) 1-3-5 使用变量 3-1 路径文件

    2024年02月05日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包