Vite教程 安装

首先先介绍一下vite，vite这个名字起源于法语就是很快的意思。应为他是冷服务不打包 用es6 import 来引入对应 的js。其次就是使用rollup 去打包。开发中有热更新等。

vite 是跨框架的不止是安装vue3(vue2)还可以安装react等

1.创建一个vite 项目
第一步
创建命令 （弃用 npm init @vitejs/app <项目名称> 该命令报错）
使用npm

npm init vite@latest

使用yarn

yarn create vite

使用pnpm

pnpm create vite

第二步 切换到目录 cd project

第三步 安装依赖包 npm install | yarn

第四步 启动项目 npm run dev | yarn dev

2..vite项目 使用TypeScript

和css使用less/sass一致 添加lang

<script lang="ts"></script>

3.vite项目使用less sass scss

npm install less less-loader -D
npm install sass node-sass sass-loader -D

使用yarn

yarn add less less-loader
yarn add sass sass-loader node-sass

<style lang="less"  scoped>
.box{
  color:red,
  .box_top{
      text-align:center
    }
}
</style>

4 vite 一些bug

我们创建一个vite.config.js

新增一个别名 发现有报错

解决方案。方案如下