Vite是Vue的作者尤雨溪开发的Web开发构建工具,它是一个基于浏览器原生ES模块导入的开发服务器,在开发环境下,利用浏览器去解析import,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随启随用。同时不仅对Vue文件提供了支持,还支持热更新,而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。
Vite具有以下特点:
- 快速的冷启动
- 即时热模块更新(HMR,Hot Module Replacement)
- 真正按需编译
Vite是在推出Vue 3的时候开发的,目前仅支持Vue 3.x,这意味着与Vue 3不兼容的库也不能与Vite一起使用。vite2.0在2021年的2.17号推出=》Vite.js中文网
创建vue3项目
官网的步骤:
// npm
npm init @vitejs/app
// yarn
yarn create @vitejs/app
刚弄的时候我就有个疑问不需要安装什么嘛?但是好像这个命令他自己会安装。
不过我npm执行这个命令的时候会出现错误
我猜测这是在它安装@vite/create-app依赖的时候出问题了,所以我手动安装
// 在我写这篇的时候最新版本是2.2.5,
// 如果安装报错,尝试加上安装的版本
npm i @vitejs/create-app -g
依赖都安装好后就继续执行创建命令
2.2.5版本创建提示有点不一样,但总的流程是一样的,所以截图我就不改了
创建过程就两步:
- 设置文件名称
- 选择模板预设
-ts的意思是项目中使用ts进行开发,从中我们可以发现vite也能创建react项目(那这样我是不是就可以把之前创建react的包删了,全部用vite呢?)
最后会生成一个很干净的项目,目录结构如下:
运行
// 安装依赖
npm i
从package可以看出来:
- vue2使用vue-cli脚手架运行项目
- vue3使用vite运行项目
// 启动服务,会发现秒启动,这就是vite的快速的冷启动
yarn dev
添加eslint、prettier
在根目录下创建.eslintrc.js、.eslintignore、prettier.config.js文件
// 安装依赖
cnpm i -D eslint eslint-plugin-prettier eslint-plugin-vue
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-recommended', 'eslint:recommended'],
rules: {
'no-unused-vars': [
1,
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
};
// .eslintignore
node_modules
/public
dist
// prettier.config.js
module.exports = {
printWidth: 130,
tabWidth: 2,
useTabs: false,
semi: true,
vueIndentScriptAndStyle: true,
singleQuote: true,
quoteProps: 'as-needed',
bracketSpacing: true,
trailingComma: 'es5',
jsxBracketSameLine: false,
jsxSingleQuote: false,
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'lf',
rangeStart: 0,
};
最后在package.json新增一条npm命令
// --fix 表示将自动修复
"lint": "eslint \"src/**/*.{vue,js}\" --fix"
到这,一个vue3的项目就创建好了,没有任何ui库,只用到一个vue3的包,很干净。