vite基础使用

vite高级使用

SSR

HMR

vite原理

rollup+vite

https://juejin.cn/post/6869915676501835783#heading-4

vite源码解析

实践

vite快速创建vue3+vite项目

npm init @vitejs/app stu --template vue // npm 6.x

项目配置信息

// package.json
    "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.1.5",
    "@vue/compiler-sfc": "^3.0.5",
    "vite": "^2.0.5"
  }

vite.config.js

打包

引入方式ESM

开发环境的引入方式ESM

对比vue-cli快速创建vue3项目（依旧webpack打包）

vue create stu // 选择手动， 选择vue3

虽然vue3已经更新值3.0.5， 但是vue-cli中vue3(preview)创建项目中的vue版本依旧是3.0.0
项目配置信息

// package.json
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  }

打包

资源引入方式还是bundle方式

简单例子

起步

yarn init -y
yarn add -D vite
// scripts/package.json
  "scripts": {
    "dev": "vite"
  },

index.html

<h1>hello</h1>
<script type="module">
import '/main.js'
</script>

main.js

document.body.style.color="red";

tailwindcss, postcss插件

起步

yarn add -D autoprefixer postcss tailwindcss 
npx tailwind init -P // Created tailwind.config.js + postcss.config.js

配置style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

index.html

<h1 class="3xl">hello</h1>
<link rel="stylesheet" href="/style.css" />

引入scss

yarn add -D sass
import '/style.scss'

style.scss

$color: blue;
h1 {
    color: $color;
}

参考：
https://www.bilibili.com/video/BV1kh411Q7WN
https://mp.weixin.qq.com/s/lC6rvEZtjJoBvHR2ZYa6cw