期待已久的vue3发布了，新版本提供了更好的性能、按需加载及更小的体积、更好的支持TypeScript以及用于处理大规模用例的新API，相对来说我比较喜欢按需加载和类似React hooks写组件的编码方式，新的版本官方推荐了新的脚手架工具是vite（相关介绍），并没有关于webpack的相关介绍及配置，有些朋友可能比较习惯使用webpack作为脚手架，今天咱们就用webpack来配置一下vue3 + ts
安装
安装webpack + vue3 + ts, vue3用了新的包名，包括git地址也进行了更新，vue3源码看这里
npm install webpack vue-next typescript --save-dev安装vue-loader及支持vue文件的加载
npm install vue-loader配置
配置webpack.config.js
var path = require('path'),
HtmlPlugin = require('html-webpack-plugin'),
VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
module.exports = env => {
return {
entry: './src/bootstrap/main.ts',
module: {
rules: [
{
test: /.vue$/,
use: 'vue-loader'
},
{
test: /.ts$/,
use: [{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/.vue$/],
}
}]
}
]
},
plugins: [new VueLoaderPlugin()]
}
}ts-loader配置appendTsSuffixTo值为[/.vue$/]，新版本vue-loader需要配置plugins，其他index.html配置及出口等配置这里就不写了，大家自己去配置
添加typescript识别vue文建vue.d.ts
declare module '*.vue' {
import { ComponentOptions } from 'vue'
const component: ComponentOptions;
export default component;
}这样typescript就能引入vue文件，不然会提示不识别错误
编码
下面开始写vue代码
app.vue
main.ts
import { createApp } from 'vue';
import App from './app.vue'
import router from './router';
createApp(App).use(router).mount('#App')到这里项目的基本配置和启动文件就写完了，直接运用基本的webpack只是启动和集成代码就行了
顺便发一下vue-router路由的代码
router.ts
import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'Home',
component: import('../page/home/home.vue'),
}
];
export default createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});注意
在配置vue + ts主要的几个问题
1、ts-loader一定要记得配置appendTsSuffixTo, 不然会出现ts把vue文件中的template过滤掉，导致vue报找不到render的情况
2、配置vue.d.ts文件来处理ts对vue文件的引入识别
其他
组件模板文件分离
1、利用vue2的方式引入template, 比如
import { defineComponent } from 'vue';
export default defineComponent({
template: require('app.html')
// 或者
render() {
return require('app.html')
}
})这种方式是直接将文件由字符串的方式引入进来，集成到组件的代码中，这样需要再webpack中配置
resolve:{
alias:{
'vue':'vue/dist/vue.esm.js'
}
}这样的配置的缺点是无法利用vue3的新特性，按需加载，之前做了个测试，用着中方式打包大概再400k左右，如果按需加载的方式只有100k左右，而且vue3采用了虚拟dom，在打包的时候模板文件就已经生成好了虚拟dom，而上述方案等于再runtime中进行解析
2、采用tsx的方式, 网上资料很多，这里就不介绍了，直接点击这里
3、vue-tsx-loader(推荐)
首先我们按照 npm install vue-tsx-loader --save-dev，接下来配置webpack
{
test: /\.tsx$/,
use: [
'vue-loader', 'vue-tsx-loader?template=html'
]
}为了支持ts的识别，这里采用.tsx后缀，不要和jsx混淆了，接下来就是组件代码
app.html
Componentapp.tsx
import { defineComponent } from 'vue';
import './app.less'
export default defineComponent({
})文件需要在同一个目录中，如果需要对jade的支持，只许将loader配置改为vue-tsx-loader?template=jade并按照jade npm install jade，模板文件需要用.jade后缀
app.jade
div Component这样既能使用vue3的新特性，还能做到模板文件的支持，并且支持jade
对于模板文件的分离，个人还是建议使用官方推荐的.vue的方式，因为官方有相应的解析工具，能更好的做到优化