之前一直使用的react框架，利用业余时间了解了vue的源码及Vue3的原理。更是巧合的是工作中要开发一个简单的移动端页面，所以借此机会调研了Vue3+Vant+Ts，算是第一次比较正式的使用Vue框架吧，同时也想让自己养成记录的好习惯，欢迎大家提意见哈!!!!
首先要确保全局安装
npm install -g @vue/cli-service-global
创建一个项目
vue create
运行以下命令来创建一个新项目：
vue create hello-world
为了项目配置的灵活性，这里选择第三项，回车
根据自己情况选择要配置的内容(点击空格为选择)，回车
选择Vue版本3.x
项目中使用-组件类样式的语法
与TypeScript一起使用Babel
hash路由还是history路由
css预处理器的选择
ESLint标准选择
校验规则的保存方式
node_modules
public
src
.gitignore
babel.config.js
package.json
tsconfig.json
.eslintrc.js
开发前配置
vant UI配置
# Vue 3 项目，安装 Vant 3：
npm i vant@next -S
自动按需引入组件
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
# 安装插件
npm i babel-plugin-import -D
在babel.config.js中添加vant配置
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
'import',
{ libraryName: 'vant', libraryDirectory: 'es', style: true },
'vant',
浏览器适配
添加meta配置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Rem布局适配，根据官网提供方式进行配置
如果需要使用 rem 单位进行适配，推荐使用以下两个工具：
postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
国际化配置
yarn add vue-i18n
在main.ts中进行注册
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "./language/i18n";
const app = createApp(App);
app.use(i18n);
app.use(store).use(router).mount("#app");
在src下创建language文件夹，及以下文件
language
cn.ts
cn.ts
i18n.ts
index.ts
import { createI18n } from "vue-i18n";
import messages from "./index";
const il8n = createI18n({
locale: "cn",
messages,
export default il8n;
import cn from "./cn";
import en from "./en";
export default {
const en = {
message:'Hello'
export default en;
const cn = {
message:'你好'
export default cn;
<!--vue页面中使用-->
<template>
<van-popup
v-model:show="_show"
closeable
<div class="header">
<span class="text">{{$t('message')}}</span>
</van-popup>
</template>
src文件夹
assets
components
router
store
views
App.vue
main.ts
shims-vue.d.ts
路由文件--自动创建，并且会在main.ts中进行注册
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [
path: '/',
name: 'Home',
component: Home
path: '/about',
name: 'About',
component: () => import( '../views/About.vue')
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
export default router
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
store文件--自动创建，同样会在main.ts中进行注册，如上
import { createStore } from 'vuex'
export default createStore({
state: {
mutations: {
actions: {
modules: {
vue-class-component与defineComponent
<!-- views/Home.vue -->
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
@Options({
components: {
HelloWorld,
export default class Home extends Vue {}
</script>
你会发现自动创建的vue文件中使用了vue-class-component，网址：class-component.vuejs.org/
Vue Class Component is a library that lets you make your Vue components in class-style syntax
对于vue3使用Vue Class Component v8
yarn add [email protected]
defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 。
<template>
<van-skeleton title :row="3" :loading="loading" class="carSke">
<van-cell-group class="card">
<van-cell class="van-cell-top">
<template #title>
<div class="van-cell-title">{{requirementName}}</div>
</template>
</van-cell>
</van-cell-group>
</van-skeleton>
</template>
<script lang="ts">
import { defineComponent,onMounted, reactive, computed, toRefs } from 'vue';
import { Cell, CellGroup, Skeleton } from 'vant';
export default defineComponent({
name: 'ListRequirements',
components: {
VanCellGroup: CellGroup,
VanCell: Cell,
VanSkeleton: Skeleton,
setup() {
const state = reactive({
requirementName: '',
return {
...toRefs(state),
</script>
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
复制代码
