一、创建项目
基于vuecli4.5来创建项目的
vue create 你的项目名
选择 vue3 和TS
二、引入vant
第一步:下载vant包
yarn add vant@next
三、引入ts-import-plugin模块
yarn add ts-import-plugin
四、创建vue.config.js
配置如下:
const merge = require('webpack-merge');
const tsImportPluginFactory = require('ts-import-plugin');
module.exports = {
parallel: false,
outputDir: '../docs',
publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
chainWebpack: config => {
config.module
.rule('ts')
.use('ts-loader')
.tap(options => {
options = merge(options, {
transpileOnly: true,
getCustomTransformers: () => ({
before: [
tsImportPluginFactory({
libraryName: 'vant',
libraryDirectory: 'es',
style: true
})
]
}),
compilerOptions: {
module: 'es2015'
}
});
return options;
});
}
};
五、在.vue文件中引入
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<van-button type="primary">主要按钮</van-button>
</div>
<router-view/>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Button } from 'vant'
export default defineComponent({
components:{
[Button.name]: Button
}
})
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>