Vite是啥

Vite是尤大开发的一款意图取代webpack的工具

Vite搭建一个服务器将本地文件映射到浏览器显示。Vite在此默默提供了很多功能，连接：vitejs.cn/guide/featu…

其实现原理是利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间。光速启动，热模块替换，按需编译。

使用Vite手动造个脚手架

创建package.json

npm init -y

安装vite

npm i vite -D

创建index.html

npx vite 运行

创建src/js/add.js src/js/index.js

创建src/css/style.css

创建src/css/style.less

npm i less -D

postcss

npm install postcss -D

npm install postcss-preset-env -D

创建src/ts/test.ts

对于vue

创建src/vue/App.vue

npm install vue@next -D(vue3包)

创建main.js并在Index.html中引入

npm i @vitejs/plugin-vue -D(vite处理.vue文件插件)

创建vite.config.js

npm install @vue/compiler-sfc -D(编译.vue文件包)

打包

执行 npx vite build

执行 npx vite preview (打包文件预览)

修改package.json

然后就可执行npm run dev/build/preview了

利用Vite创建Vue3项目

• npm install -g create-vite-app
• create-vite-app ProjectName
• cd ProjectName
• npm install
• npm run dev

vite2.0创建Vue3项目

npm init @vitejs/app ProjectName

npm run dev

Vite中的资源URL处理

Vite中使用ts

使用ts创建一个组件

ts版本指定，package.json

ts参考配置，tsconfig.json

Vite项目配置别名,代理，模式和环境变量

别名

代理

模式和环境变量

Vite打包 部署 CI/CD

npm run build

把dist文件上传到服务器,再配置好nginx就可

利用github actions实现ci/cd过程,或者其他工具如jenkins Travis CI等

• 配置workflow 在项目根目录下创建.github/workflows/publish.yml

• 在github当前项目下设置私钥选项

• 复制本地私钥，~/.ssh/id_rsa

    cd .ssh/
    cat id_rsa

• 在服务器上配置nginx

• push代码，触发workflow

vite2.0从Vite1.0 迁移

配置选项变化：vue特有选项、创建选项、css选项、jsx选项等

别名行为变化：不再要求/开头或结尾

Vue支持：通过 @vitejs/plugin-vue插件支持

React支持

HMR API变化

清单格式变化

插件API重新设计

alias

setup script

直接导入组件 不需要注册

属性props定义

事件定义

获取上下文

对外暴露