Vue 2.7 + Vite
vue2.7 + vue-router3 + pinia
示例代码: https://github.com/klren0312/vite_vue2.7
示例页面: https://klren0312.github.io/vite_vue2.7/
用到的vite插件
- @vitejs/plugin-vue2 vite的vue2.7插件
- @vitejs/plugin-legacy 打包支持IE
- unplugin-vue-components 按需引入插件
相关配置
1. vscode的vetur插件适配
参考资料: https://github.com/vuejs/vetur/issues/2296#issuecomment-1155957974
需要在根目录创建vetur.config.js
// vetur.config.js
module.exports = {
settings: {
'vetur.completion.autoimport': false,
'vetur.experimental.templateInterpolationService': false,
'vetur.validation.interpolation': false,
'vetur.validation.template': false,
'vetur.validation.templateProps': false,
'vetur.validation.style': false,
'vetur.validation.script': false,
'vetur.format.enable': false,
'vetur.ignoreProjectWarning': true,
'vetur.languageFeatures.codeActions': false,
'vetur.languageFeatures.semanticTokens': false,
'vetur.languageFeatures.updateimportOnFileMove': false,
'vetur.trace.server': 'off',
'vetur.underline.refValue': false,
},
}
或者改用volar插件
usevolar.png
2. vite适配vue2.7
参考资料: https://github.com/vuejs/vue/blob/main/CHANGELOG.md#vue-cli--webpack
使用官方的@vitejs/plugin-vue2插件
vite创建vue项目后, 把插件替换下就行了
3. vue-router安装
vue2应该只支持vue-router3版本
4. pinia安装
按官方文档引入即可: https://pinia.vuejs.org/getting-started.html#installation
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
el: '#app',
// other options...
// ...
// note the same `pinia` instance can be used across multiple Vue apps on
// the same page
pinia,
})
5. element-ui按需引入
使用unplugin-vue-components插件
