前言
之前一直使用的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 ---排除git提交配置文件
babel.config.js ---babel配置文件
package.json ---模块描述文件
tsconfig.json ---ts配置文件
.eslintrc.js ---eslint规范配置文件
开发前配置
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配置
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
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 基准值
//.postcssrc.js
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,//因为vant的根字体大小是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 ---国际化创建
//src/language/i18n.ts
import { createI18n } from "vue-i18n";
import messages from "./index";
const il8n = createI18n({
locale: "cn",
messages,
});
export default il8n;
//src/language/index.ts
import cn from "./cn";
import en from "./en";
export default {
cn,
en,
};
//src/language/en.ts
const en = {
message:'Hello'
};
export default en;
//src/language/cn.ts
const cn = {
message:'你好'
};
export default cn;
<!--vue页面中使用-->
<template>
<van-popup
v-model:show="_show"
closeable
>
<div class="header">
<span class="text">{{$t('message')}}</span>
</div>
</van-popup>
</template>
src文件夹
assets ---静态文件夹
components ---组件文件夹
router ---路由，这里使用的是vue-router 4.x
store ---vuex，这里使用的是4.x
views ---页面文件
App.vue ---页面入口文件
main.ts ---项目入口文件
shims-vue.d.ts ---类型定义文件（描述文件）
路由文件--自动创建，并且会在main.ts中进行注册
//router/index.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',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
//main.ts
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"/>
</div>
</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 vue-class-component@8.0.0-rc.1
<!--
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>
/*shims-vue.d.ts*/
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
