vite 入门到精通

什么是vite

项目构建工具
1

优势

方便，更快,好用
用了esbuild 编译快

webpack更全面
rollup更专一
1
2
3
4
5

vite 构建Vue3项目

yarn create vite 创建项目目前改为这个


初始化
推荐使用yarn 安装
yarn install

安装 vue-jsx插件
yarn add @vitejs/plugin-vue-jsx -D

vite.config.js import


删除app.vue 修改main.js

vite 创建vue2项目 vanilla里面没有vue环境 需要自己配



这边有一个问题 plugins:[createVuePlugin()] 必须调用一个函数

创建src下面的 app.vue main.js

index.html src=‘/src/main.js’

vite 中使用css的各种功能

配置文件引用别名 alias

1

css-modules

Office_2010从入门到精通

pdf 4星 超过75%的资源 19.87MB

下载

css pre-processors css 预处理
配置 css 预处理器 scss

虽然 vite 原生支持 less/sass/scss/stylus，但是你必须手动安装他们的预处理器依赖
1

安装

yarn add dart-sass --dev
yarn add sass --dev
1
2

配置全局 scss 样式文件
在 src/assets 下新增 style 文件夹，用于存放全局样式文件

新建 main.scss, 设置一个用于测试的颜色变量 :

$test-color: red;
1

如何将这个全局样式文件全局注入到项目中呢？配置 Vite 即可：

css:{
    preprocessorOptions:{
      scss:{
        additionalData:'@import "@/assets/style/mian.scss";'
      }
    }
  },
1
2
3
4
5
6
7

组件中使用
不需要任何引入可以直接使用全局scss定义的变量

.test{
  color: $test-color;
}
1
2
3

vite 中使用typescript
vue-tsc 支持.vue
yarn add vue-tsc

1