vite2.0+vue3+ts前端最新热门技术项目搭建

闲来无事，趁假期来加强一波技能学习！不废话直接上流程上图；

超级简洁和极致的本地开发体验！！！

 来个项目简介吧；

<!--
 * @Description: Vue 3 + Typescript + Vite2.0 +vant3 +  vue-i18n@next国际化 搭建移动端项目简介 * @Version: 2.0
 * @Autor: lhl * @Date: 2021-04-03 23:18:54
 * @LastEditors: lhl * @LastEditTime: 2021-04-11 22:39:02
--> # Vue 3 + Typescript + Vite #### 项目初始化 yarn or cnpm or npm 安装 【本项目为了速度一律 cnpm】 cnpm init @vitejs/app or yarn create @vitejs/app 或者快捷命令 cnpm init @vitejs/app my-vue-app --template vue-ts Node.js: - 版本最好大于 12.0.0 yarn > npm > cnpm: - 包管理工具
 ### 安装依赖 cnpm i ### 安装路由 cnpm i vue-router@4 -S 【--save】 ### 安装 vuex cnpm i vuex@next -S 【--save】 ### 安装国际化 cnpm i vue-i18n@next -S cnpm i js-cookie -S cnpm i @types/js-cookie -D
console.log(import.meta.env.VITE_APP_BASE_URL, 'VITE_APP_BASE_URL') console.log(process.env.NODE_ENV) ### 启动项目 cnpm run dev ### 代码规范 vscode 需要安装的相关插件 Eslint Prettier Prettier Eslint 三个即可 cnpm i eslint -D 根目录下创建 .eslintrc.js 文件 eslint 官方配置文档：https://eslint.org/docs/user-guide/configuring/configuration-files#using-configuration-files
 node 环境的类型检查 cnpm i @types/node -D
 cnpm i prettier -D 根目录下创建 .prettierrc.js 文件 prettier 官方配置文档：https://prettier.io/docs/en/
 安装相关依赖 cnpm i @typescript-eslint/eslint-plugin -D 
cnpm i @typescript-eslint/parser -D 
cnpm i eslint-config-prettier -D cnpm i eslint-plugin-prettier -D cnpm i eslint-plugin-vue -D cnpm i eslint-define-config -D  ### git 代码提交 cnpm i husky lint-staged -D 【git 代码提交规范】 package.json 文件中配置下 cnpm i eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest babel-eslint -D cnpm i eslint-config-standard eslint-friendly-formatter eslint-plugin-import eslint-plugin-standard eslint-plugin-promise -D ### 移动端适配问题 先说特别的 iPhonex 的适配 iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量： safe-area-inset-left：安全区域距离左边边界距离 safe-area-inset-right：安全区域距离右边边界距离 safe-area-inset-top：安全区域距离顶部边界距离 safe-area-inset-bottom：安全区域距离底部边界距离只有设置了 viewport-fit=cover，才能使用 constant 函数 <meta name=“viewport” content=“width=device-width, viewport-fit=cover”> body { padding-bottom: constant(safe-area-inset-bottom); } fixed 元素的适配 { padding-bottom: constant(safe-area-inset-bottom); } 或者直接设置 body{ padding: env(safe-area-inset-left,20px) env(safe-area-inset-right,20px) env(safe-area-inset-top,20px) env(safe-area-inset-bottom,20px) } 再或者媒体查询 /_兼容 iphoneX_/ /_判断是否是 iphoneX，使用@media 媒体查询尺寸_/ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { body { top: constant(safe-area-inset-top); bottom: constant(safe-area-inset-bottom); left: constant(safe-area-inset-left); right: constant(safe-area-inset-right); } } ios11 webview 状态栏问题 【设置了固定定位页面滚动过程中两边留白】如果是纯色背景的话，可以通过给 body 设置 background 来实现填充两边的留白 scss 函数 $designWidth: 750; @function px2vm($size){ @return #{100\*$size / $designWidth}vw } 调用 px2vm(50) ### vm vw 适配方案 cnpm i postcss-px-to-viewport -D ### 第三方 UI 库 vant cnpm i vant@next -S 官方文档：https://vant-contrib.gitee.io/vant/v3/#/zh-CN 

"browserslist": [ "defaults", // 默认 "last 2 versions", 
  "last 2 versions",  // 兼容主流浏览器的最近两个版本 "> 1%", 
  "> 1%", // 兼容主流浏览器的最近两个版本 "> 1%", 
  "iOS 7",  // 使用的浏览器需要在市场上的份额大于 1 "iOS 7",
  "last 3 iOS versions" // 兼容 ios 的最新 3 个版本 
] 组件样式按需加载配置 cnpm i vite-plugin-style-import -D import styleImport from 'vite-plugin-style-import' css:{ preprocessorOptions:{ less:{ modifyVars:{}, javascriptEnabled: true } } }, plugins:[ styleImport({ libs:[ { libraryName: 'ant-design-vue', esModule: true, resolveStyle: name => `ant-design-vue/es/${name}/style/index` } ] }) ] ### 自动添加 css 前缀插件 cnpm i autoprefixer -D ### SASS 预处理器 cnpm i node-sass sass-loader sass -D ### 生产环境生成 .gz 文件 cnpm i vite-plugin-compression -D 参考文档：https://github.com/anncwb/vite-plugin-compression
 ### package.json 文件配置打包命令 环境变量 VITE_ 开头 "build:dev": "vue-tsc --noEmit && vite build --mode development", "build:test": "vue-tsc --noEmit && vite build --mode test", "build:prod": "vue-tsc --noEmit && vite build --mode production" ### PWA 配置 cnpm i vite-plugin-pwa -D import { VitePWA } from 'vite-plugin-pwa' 参考文档：https://github.com/antfu/vite-plugin-pwa
 plugins:[ VitePWA({ manifest: {}, workbox: { skipWaiting: true, clientsClaim: true } }) ]

再来个vite.config.ts常用配置

/* * @Description: vite.config.ts vite2.0配置 * @Version: 2.0 * @Autor: lhl * @Date: 2021-04-03 23:18:54 * @LastEditors: lhl * @LastEditTime: 2021-04-11 20:43:27 */ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import viteCompression from 'vite-plugin-compression' import path from 'path' const resolve = (dir: string) => path.join(__dirname, dir) // https://vitejs.dev/config/
export default defineConfig({ plugins: [ vue(), // 生产环境生成 .gz 文件
 viteCompression({ verbose: true, disable: false, threshold: 10240, algorithm: 'gzip', ext: '.gz' }) ], base: './', // 打包路径
 resolve: { // 设置别名
 alias: { '@': resolve('src'), // 解决vue-i18n警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' } }, server: { host: '0.0.0.0', https: false, port: 4000, // 启动端口
    open: true, // proxy: {
    // // 选项写法
    // '/api': 'http://xxxx'// 代理网址
    // },
    cors: true }, build: { // 生产环境移除 console
 terserOptions: { compress: { drop_console: true, drop_debugger: true } } } })

接着main.ts

/* * @Description: 入口文件 * @Version: 2.0 * @Autor: lhl * @Date: 2021-04-03 23:18:54 * @LastEditors: lhl * @LastEditTime: 2021-04-11 22:41:30 */ import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import i18n from './locales/index' import Vant from 'vant' import 'vant/lib/index.css' // 全局引入样式 // vite版本不需要配置组件的按需加载，因为Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力
 console.log(import.meta.env.VITE_APP_BASE_URL, 'VITE_APP_BASE_URL') console.log(process.env.NODE_ENV) createApp(App).use(i18n).use(Vant).use(router).use(store).mount('#app')

接着是国际化的配置

/* * @Description: vscode自带注释 * @Version: 2.0 * @Autor: lhl * @Date: 2021-04-11 11:29:47 * @LastEditors: lhl * @LastEditTime: 2021-04-11 12:11:08 */ import { createI18n } from 'vue-i18n' import { getLanguage } from '../utils/cookies'

// Vant built-in lang
import { Locale } from 'vant' import enUS from 'vant/es/locale/lang/en-US' import zhCN from 'vant/es/locale/lang/zh-CN' import zhTW from 'vant/es/locale/lang/zh-TW' import jaJP from 'vant/es/locale/lang/ja-JP'

// User defined lang
import enUsLocale from './en_US/index' import zhCnLocale from './zh_CN/index' import zhTwLocale from './zh_TW/index' import jaJpLocale from './ja_JP/index' const messages: any = { 'zh-CN': { ...zhCN, ...zhCnLocale }, 'zh-TW': { ...zhTW, ...zhTwLocale }, 'en-US': { ...enUS, ...enUsLocale }, 'ja-JP': { ...jaJP, ...jaJpLocale } } export const getLocale = () => { const cookieLanguage = getLanguage() if (cookieLanguage) { document.documentElement.lang = cookieLanguage return cookieLanguage } const language = navigator.language.toLowerCase() const locales = Object.keys(messages) for (const locale of locales) { if (language.indexOf(locale) > -1) { document.documentElement.lang = locale return locale } } // Default language is english
  return 'en-US' } const CURRENT_LANG = getLocale() // first entry
Locale.use(CURRENT_LANG, messages[CURRENT_LANG]) const i18n = createI18n({ locale: CURRENT_LANG, messages }) export default i18n

/* * @Description: vscode自带注释 * @Version: 2.0 * @Autor: lhl * @Date: 2021-04-11 11:40:24 * @LastEditors: lhl * @LastEditTime: 2021-04-11 11:43:09 */ import Cookies from 'js-cookie'

// App
const languageKey = 'language' export const getLanguage = () => Cookies.get(languageKey) export const setLanguage = (language: string) => Cookies.set(languageKey, language)

新建四个ts文件存放四种语言；这里只放一种作为演示

/* * @Description: 中文 * @Version: 2.0 * @Autor: lhl * @Date: 2021-04-11 11:52:33 * @LastEditors: lhl * @LastEditTime: 2021-04-11 14:31:08 */ const zh_CN = { appHeader: { title: 'Vue App', selectLanguage: '语言选择' }, goBack: { text: '返回' }, tabBarItem: { home: '首页', product: '产品页', vue3Study: 'vue3Study', myCenter: '个人中心' }, langSelect: { pickerTitle: '当前语言' } } export default zh_CN

兴趣来了还封装了一个语言选择组件vant3 popup+piker组件合成

<!-- * @Description: vscode自带注释 * @Version: 2.0 * @Autor: lhl * @Date: 2021-04-10 21:56:40 * @LastEditors: lhl * @LastEditTime: 2021-04-11 14:08:24 -->
<template>
  <van-popup v-model:show="showPicker" v-bind="popupConfig">
    <van-picker show-toolbar swipe-duration="300" :title="$t('langSelect.pickerTitle')" :columns="langs" :default-index="defaultIndex" @confirm="onConfirm" @cancel="onClose"
    />
  </van-popup>
</template>

<script> import { defineComponent, toRefs, reactive, onMounted, getCurrentInstance, computed } from 'vue' import { useStore } from 'vuex' import { Locale } from 'vant' import { setLanguage } from '@/utils/cookies' export default defineComponent({ name: 'LangSelect', props: { popupConfig: { type: Object, default: () => ({ overlay: true, position: 'bottom', duration: 0.3, closeOnPopstate: true, transitionAppear: true, safeAreaInsetBottom: true }) } }, setup() { const state = reactive({ langs: [ { text: '中文（简体）', value: 'zh-CN' }, { text: '中文（繁体）', value: 'zh-TW' }, { text: 'English', value: 'en-US' }, { text: '日本語', value: 'ja-JP' } ] }) const store = useStore() const { proxy } = getCurrentInstance() console.log(store, 'store', getCurrentInstance(), 'getCurrentInstance') const computedData = { showPicker: computed(() => store.getters.langPicker), defaultIndex: computed( () => state.langs.findIndex((item) => item.value === proxy.$i18n.locale) || 0 ) } const methods = { onConfirm({ value }) { // Vant basic
 Locale.use(value, proxy.$i18n.messages[value]) // Business component
 proxy.$i18n.locale = value // Cookie
 setLanguage(value) store.dispatch('changeShowPicker', false) }, onClose() { store.dispatch('changeShowPicker', false) } } return { ...toRefs(state), ...methods, ...computedData } } }) </script>

<style lang="scss" scoped></style>

最后给个文件目录和效果图吧

 

 

 再底部tabbar组件

<!-- * @Descripttion: 底部tabbar * @version: * @Author: lhl * @Date: 2021-04-06 16:29:07 * @LastEditors: lhl * @LastEditTime: 2021-04-14 10:47:34 -->
<template>
  <div>
    <van-tabbar v-model="active">
      <template v-for="(item, index) in tabbars" :key="index">
        <van-tabbar-item :icon="item.icon" :to="item.path">{{ $t(item.title) }}</van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
  // 注明v-for中的国际化需要自动注意 直接数组上 t(''message.menuItme.home') 不会更新
 import { defineComponent, onMounted, toRefs, reactive, ref, watch } from 'vue' import { useI18n } from 'vue-i18n' import { Toast } from 'vant' import { useRoute } from 'vue-router' export default defineComponent({ name: 'Tabbar', setup() { const { t } = useI18n() const active = ref(0) const state = reactive({ // active: 0,
        //函数接收一个普通对象，返回一个响应式的数据对象
 tabbars: [ { path: '/home', title: 'message.menuItme.home', icon: 'home-o' }, { path: '/product', title: 'message.menuItme.product', icon: 'coupon-o' }, { path: '/vue3Grammer', title: 'message.menuItme.study', icon: 'hot-o' }, { path: '/my', title: 'message.menuItme.my', icon: 'friends-o' } ] }) const route = useRoute() const methods = { initActive() { state.tabbars.map((item, index) => { if (item.path === route.path) { active.value = index } }) } } // watch的使用
 watch( () => route.path, (value) => { console.log('value改变', value) if (value) { let vIndex = state.tabbars.findIndex((item) => { return item.path == value }) console.log(vIndex, 'vIndex') if (vIndex > -1) { active.value = vIndex // Toast.success(t('message.menuItme.study'))
 } } } ) onMounted(() => { methods.initActive() }) return { active, ...methods, ...toRefs(state) } } }) </script>

<style lang="less"></style>

 再贴一个vuex配置

/*
 * @Descripttion: vuex配置入口
 */
import { createStore } from 'vuex'
const store = createStore({
  state: {
    langPicker: false,
    loading: false
  },
  mutations: {
    // 语言选择框
    handleShowPicker(state) {
      state.langPicker = !state.langPicker
    },
    // 显示loading
    showLoading(state) {
      state.loading = true
    },
    // 隐藏loading
    hideLoading(state) {
      state.loading = false
    }
  },
  getters: {
    langPicker: (state) => state.langPicker
  },
  actions: {
    changeShowPicker(context, value) {
      context.commit('handleShowPicker', value)
    }
  },
  modules: {}
})

export default store

再贴一个路由配置

/* * @Descripttion: 路由配置文件 参考文档：https://next.router.vuejs.org/zh/introduction.html */ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' const routes: Array<RouteRecordRaw> = [ { path: '/', redirect: '/home', name: '/', component: () => import('@/components/layout/index.vue'), children: [ { path: '/home', // name: 'home', meta: { title: '首页', i18Title: 'message.menuItme.home' }, component: () => import('@/pages/home/index.vue') }, { path: '/carDetail', name: 'carDetail', meta: { title: '购物车详情', i18Title: 'message.menuItme.carDetail' }, component: () => import('@/pages/home/carDetail.vue') }, { path: '/product', name: 'product', meta: { title: '产品列表', i18Title: 'message.menuItme.product' }, component: () => import('@/pages/product/index.vue') }, { path: '/vue3Grammer', name: 'vue3Grammer', meta: { title: 'vue3语法', i18Title: 'message.menuItme.study' }, component: () => import('@/pages/vue3Grammer/index.vue') }, { path: '/my', name: 'my', meta: { title: '个人中心', i18Title: 'message.menuItme.my' }, component: () => import('@/pages/my/index.vue') } ] }, { path: '/404', name: '404', component: () => import('@/pages/notFound/index.vue') }, { path: '/:pathMatch(.*)', // 和以前配置有所不一样 or /:catchAll(.*) redirect: '/404' } ] const router = createRouter({ history: createWebHashHistory(), routes }) console.log(router, 'router') // 路由前置钩子 router.beforeEach((to, from, next) => { const title = to.meta && (to.meta.title as string) if (title) { document.title = title } next() }) router.afterEach((to, from) => { console.log(to, 'to', from, 'from') }) // 路由配置上定义 路由独享的守卫 // beforeEnter: (to, from) => { // // reject the navigation // return false // }, // 导航守卫 // onBeforeRouteLeave, onBeforeRouteUpdate export default router

再贴一个vue3基础用法

<!-- * @Descripttion: vue3语法 --tsx写法（就是react 的jsx风格） ts写法 .vue写法 options API Composition API写法都可以 -->
<template>
  <div class="vue3-grammer">
    <div class="num-box">{{ num }}----{{ newNum }}----{{ refData }}</div>
    <div class="change-num-btn">
      <van-button size="large" type="primary" @click="handleChange">改变数据</van-button>
    </div>
    <div class="from-box">
      <van-form @submit="onSubmit">
        <van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
        <child @reciveChildData="reciveFromChildData" />
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"> 提交表单 </van-button>
        </div>
      </van-form>
    </div>
    <!-- vant 组件使用 -->
    <van-button size="large" type="success" @click="goNextPage">路由跳转</van-button>
  </div>
</template>

<script lang="ts">
  // defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断
 import { defineComponent, toRefs, reactive, getCurrentInstance, watch, computed, ref } from 'vue'
  // beforeCreate created -->用 setup 代替
 import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue' import { useRouter, useRoute } from 'vue-router' import child from './child.vue' export default defineComponent({ name: 'vue3Grammer', components: { child }, setup(props, context) { console.log(props, 'props', context, 'context') //这里的ctx 类似于vue2的this
      // 会报错 且开发环境可以生产环境会报错
      // const { ctx: any } = getCurrentInstance()
      // console.log(ctx, 'ctx')
      // 获取组件实例 用于高阶用法或库的开发
      // internalInstance.appContext.config.globalProperties // 访问 globalProperties
 const internalInstance = getCurrentInstance() console.log(internalInstance, 'internalInstance') // 访问 globalProperties
 const refData = ref(12) //ref包裹 变为响应式对象
      // 个人觉着还是这样写舒服一点 类似于vue2中的data
 const state = reactive({ //函数接收一个普通对象，返回一个响应式的数据对象
 num: 0, username: '', password: '' }) //计算属性 个人喜欢写在对象中 因为看得更清晰一下 防止计算属性方法等混在一起不好区分
 const computedData = { // 计算属性写法 别忘记引入 computed
 newNum: computed(() => state.num * 2) } const router = useRouter() console.log(router, 'this.$router') const route = useRoute() console.log(route, 'this.$route', route.meta) const methods = { // 改变数据
 handleChange: () => { state.num++
          // ref包裹的数据 必须用.value获取
 refData.value++ }, // 提交表单
 onSubmit: (values: object) => { console.log('submit', values) }, // 跳转
 goNextPage() { //路由跳转
 router.push({ name: '/' }) }, // 父组件接收子组件的值
 reciveFromChildData(val: any) { console.log(val, 'val-来自子组件的值') state.username = val.username state.password = val.password } //网络请求
        // main.js传入的封装axios
        // async getUser() {
        // try {
        // let { data } = await userApi()
        // console.log(data)
        // } catch (error) {
        // console.log(error)
        // }
        // }
 } onBeforeMount(() => { console.log('生命周期---等同于vue2的 beforeMount') }) onMounted(() => { // methods.getUser()
 console.log('生命周期---等同于vue2的 mounted') }) onBeforeUpdate(() => { console.log('生命周期---等同于vue2的 beforeUpdate') }) onUpdated(() => { console.log('生命周期---等同于vue2的 updated') }) onBeforeUnmount(() => { console.log('生命周期---等同于vue2的 beforeUnmount') }) onUnmounted(() => { console.log('生命周期---等同于vue2的 unmounted ') }) // watch的使用
 watch( () => state.num, (value) => { console.log('num改变', value) } ) return { ...toRefs(state), // 将响应式的对象变为普通对象 使用时不需要state.num 直接num即可使用
 ...methods, // 解构赋值
 ...computedData, refData } } }) </script>

<style lang="less" scoped> .num-box { background: #000; color: #fff; font-size: 16px; text-align: center; padding: 10px 0;
  } .change-num-btn { margin: 8px 0;
  }
</style> 【子组件】

<!-- * @Descripttion: 子组件---vant3表单常用组件组合 --> <template> <div class="child"> <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> 子组件表单 </van-divider> <!-- 开关 --> <van-field name="switch" label="开关"> <template #input> <van-switch v-model="checked" size="20" /> </template> </van-field> <!-- 复选框组 --> <van-field name="checkboxGroup" label="学习框架"> <template #input> <van-checkbox-group v-model="groupChecked" direction="horizontal"> <van-checkbox name="1" shape="square">react</van-checkbox> <van-checkbox name="2" shape="square">vue</van-checkbox> </van-checkbox-group> </template> </van-field> <!-- 单选框 --> <van-field name="radio" label="多端"> <template #input> <van-radio-group v-model="checkedradio1" direction="horizontal"> <van-radio name="1">taro</van-radio> <van-radio name="2">uni-app</van-radio> </van-radio-group> </template> </van-field> <van-field name="radio" label="跨平台"> <template #input> <van-radio-group v-model="checkedradio2" direction="horizontal"> <van-radio name="3">Flutter</van-radio> <van-radio name="4">React native</van-radio> </van-radio-group> </template> </van-field> <!-- 步进器 --> <van-field name="stepper" label="步进器"> <template #input> <van-stepper v-model="count" /> </template> </van-field> <!-- 评分 --> <van-field name="rate" label="评分"> <template #input> <van-rate v-model="rateVal" /> </template> </van-field> <!-- 滑块 --> <van-field name="slider" label="滑块"> <template #input> <van-slider v-model="sliderVal" /> </template> </van-field> <!-- 文件上传 --> <van-field name="uploader" label="文件上传"> <template #input> <van-uploader v-model="uploadVal" /> </template> </van-field> <!-- Picker 组件 --> <van-field v-model="pickerVal" readonly clickable name="picker" label="选择器" placeholder="点击选择城市" @click="showPicker = true" /> <van-popup v-model:show="showPicker" position="bottom"> <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" /> </van-popup> <!-- DatetimePicker 组件 --> <van-field v-model="datetimePickerVal" readonly clickable name="datetimePicker" label="时间选择" placeholder="点击选择时间" @click="showDatetimePicker = true" /> <van-popup v-model:show="showDatetimePicker" position="bottom"> <van-datetime-picker type="time" @confirm="onDatetimePickerConfirm" @cancel="showDatetimePicker = false" /> </van-popup> <!-- 省市区选择器 Area 组件 --> <van-field v-model="areaVal" readonly clickable name="area" label="地区选择" placeholder="点击选择省市区" @click="showArea = true" /> <van-popup v-model:show="showArea" position="bottom"> <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="showArea = false" /> </van-popup> <!-- 日历 Calendar 组件 --> <van-field v-model="calendarVal" readonly clickable name="calendar" label="日历" placeholder="点击选择日期" @click="showCalendar = true" /> <van-calendar v-model:show="showCalendar" @confirm="onCalendarConfirm" /> </div> </template> <script lang="ts"> //用到地区组件需要加载数据或者接口数据去拿 // yarn add @vant/area-data cnpm i @vant/area-data -S  import { defineComponent, reactive, toRefs } from 'vue' import { areaList } from '@vant/area-data' export default defineComponent({ name: 'child', setup(props, context) { console.log(props, context) const state = reactive({ username: '111', password: '222', checked: false, groupChecked: [], checkedradio1: '1', checkedradio2: '3', count: 1, // 最小就是1了  rateVal: 1, sliderVal: 10, uploadVal: [], pickerVal: '', showPicker: false, columns: ['北京', '上海', '广州', '深圳'], datetimePickerVal: '', showDatetimePicker: false, areaVal: '', showArea: false, areaList, // 数据格式见 Area 组件文档  calendarVal: '', showCalendar: false }) // 自定义事件  context.emit('reciveChildData', state) const methods = { onConfirm: (value: any) => { console.log(value, 'Picker组件') state.pickerVal = value state.showPicker = false }, onDatetimePickerConfirm: (value: any) => { console.log(value, '时间') state.datetimePickerVal = value state.showDatetimePicker = false }, onAreaConfirm: (value: any) => { console.log(value, '地区') state.showArea = false state.areaVal = value .filter((item: any) => !!item) .map((item: any) => item.name) .join('/') }, onCalendarConfirm: (date: any) => { console.log(date, '日期') state.calendarVal = `${date.getMonth() + 1}/${date.getDate()}`  state.showCalendar = false } } return { ...toRefs(state), ...methods } } }) </script> <style lang="less" scoped></style>

再贴一个axios封装

/* * @Descripttion: api统一管理入口 */ import * as testApi from './testApi' export default { testApi }

 

/* * @Descripttion: 单独api单独配置 RESTful 风格 api * RESTful解释 参考文档：http://www.ruanyifeng.com/blog/2011/09/restful.html */ import request from './request'

/** * 封装get请求 * @param {string} url 请求连接 * @param {Object} params 请求参数 * @param {Object} header 请求需要设置的header头 */ export const getTest = (params: object, header: {}) => { return request({ url: `/posts`,
    method: 'get', params: params, headers: header }) } /** * 封装post请求 * @param {string} url 请求连接 * @param {Object} data 请求参数 * @param {Object} header 请求的header头 */ export const postTest = (data: object, header: {}) => { return request({ url: `/posts`,
    method: 'post', data: data, headers: header }) } /** * 封装put请求 * @param {string} url 请求连接 * @param {Object} data 请求参数 * @param {Object} header 请求设置的header头 */ export const putTest = (data: object, header: {}) => { return request({ url: `/posts/1`, method: 'put', data: data, headers: header }) } /** * 封装delete请求 * 如果服务端将参数作为java对象来封装接受 (data入参) * 如果服务端将参数作为url参数来接受，则请求的url为:www.xxx/url?a=1&b=2形式 (params入参) * @param {string} url 请求连接 * @param {Object} params 请求参数 * @param {Object} header 请求设置的header头 */ export const deleteTest = (params: object, header: {}) => { return request({ url: `/posts/1`, method: 'delete', data: params, headers: header }) }

/* * @Descripttion: aioxs二次封装 */ import axios, { AxiosRequestConfig, AxiosResponse, Method } from 'axios' import store from '../store' import { Toast } from 'vant'

// 定义接口
interface PendingType { url?: string method?: Method params: any data: any cancel: Function } // 取消重复请求
 const repeatRequstList: Array<PendingType> = [] // 使用 cancel token 取消请求
const CancelToken = axios.CancelToken console.log(import.meta.env.VITE_APP_BASE_URL, 'axios') const instance = axios.create({ // baseURL: <string>import.meta.env.VITE_APP_BASE_URL, // 给类型 不然报错
  baseURL: import.meta.env.VITE_APP_BASE_URL as string, // 断言 不然报错
  // 指定请求超时的毫秒数(0 表示无超时时间)
  timeout: 10000, // 表示跨域请求时是否需要使用凭证
  withCredentials: true }) // let loadingInstance: ElLoadingComponent

// 移除重复请求
const removePending = (config: AxiosRequestConfig) => { for (const key in repeatRequstList) { console.log(key, 'key') const item: number = +key const list: PendingType = repeatRequstList[key] // 当前请求在数组中存在时执行函数体
    if (list.url === config.url && list.method === config.method && JSON.stringify(list.params) === JSON.stringify(config.params) && JSON.stringify(list.data) === JSON.stringify(config.data)) { // 执行取消操作
      list.cancel('操作太频繁，请稍后再试') // 从数组中移除记录
      repeatRequstList.splice(item, 1) } } } // 添加请求拦截器
instance.interceptors.request.use( (config) => { store.commit('showLoading') removePending(config) config.cancelToken = new CancelToken((c) => { repeatRequstList.push({ url: config.url, method: config.method, params: config.params, data: config.data, cancel: c }) }) return config }, (error: any) => { store.commit('hideLoading') return Promise.reject(error) } ) // 添加响应拦截器
instance.interceptors.response.use( (response: AxiosResponse) => { store.commit('hideLoading') removePending(response.config) return response.data }, (error: any) => { store.commit('hideLoading') const { response } = error // 根据返回的 http 状态码做不同的处理 ?.语法需要最新的谷歌浏览器才支持目前
    // switch (response?.status) {
    // case 401:
    // // token失效
    // break
    // case 403:
    // // 没有权限
    // break
    // case 404:
    // // 请求的资源不存在
    // break
    // case 500:
    // // 服务端错误
    // Toast('提示内容')
    // break
    // default:
    // break
    // }

    // 超时重新请求
    const config = error.config // 全局的请求次数,请求的间隙
    const [RETRY_COUNT, RETRY_DELAY] = [3, 1000] if (config && RETRY_COUNT) { // 设置用于跟踪重试计数的变量
      config.__retryCount = config.__retryCount || 0
      // 检查是否已经把重试的总数用完
      if (config.__retryCount >= RETRY_COUNT) { return Promise.reject(response || { message: error.message }) } // 增加重试计数
      config.__retryCount++

      // 创造新的Promise来处理指数后退
      // 在typescript中定义promise返回类型 首先要在tsconfig.json中配置ES2015.promise的lib 不然ts无法支持promise
      const backClose = new Promise((resolve) => { setTimeout(() => { // 写上 null or undefined 不然ts下面会报错
          resolve(null) }, RETRY_DELAY || 1) }) // instance重试请求的Promise
      return backClose.then(() => { return instance(config) }) } // eslint-disable-next-line
    return Promise.reject(response || { message: error.message }) } ) export default instance

/* * @Descripttion: * @version: * @Author: lhl * @Date: 2021-04-02 15:03:55 * @LastEditors: lhl * @LastEditTime: 2021-04-14 18:13:04 */ import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import Vant from 'vant' import Vconsole from 'vconsole' import 'vant/lib/index.css' import i18n from './language/index' import API from './api/index' import 'normalize.css/normalize.css' import './assets/style/index.less' console.log(import.meta.env.VITE_APP_BASE_URL, '环境变量') const isProd = process.env.NODE_ENV === 'production'
if (!isProd) { new Vconsole() } const app = createApp(App) app.config.globalProperties.API = API console.log(app.config.globalProperties.API, 'app.config.globalProperties.API') app.use(i18n).use(router).use(store).use(Vant).mount('#app')

再贴个vscode的个人配置

{
    "workbench.colorTheme": "One Dark Pro",
    "fileheader.customMade": {
        "Description": "vscode自带注释",
        "Version": "2.0",
        "Autor": "lhl",
        "Date": "Do not edit",
        "LastEditors": "lhl",
        "LastEditTime": "Do not edit"
      },
      "fileheader.cursorMode": {
        "description":"",
        "param": "",
        "return": "",
        "author":"lhl"
      },
      "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
      },
      // "[jsonc]": {
      //   "editor.defaultFormatter": "HookyQR.beautify"
      // },
      "javascript.updateImportsOnFileMove.enabled": "always",
      // "emmet.excludeLanguages": [
      //   "markdown"
      // ],
      "emmet.includeLanguages": {
        "javascript": "javascriptreact"
      },
      "emmet.triggerExpansionOnTab": true,
      "eslint.codeAction.showDocumentation": {
        "enable": true
      },

      //===========================================
      //============= Editor ======================
      //===========================================
      "explorer.openEditors.visible": 0,
      "editor.tabSize": 2,
      "editor.renderControlCharacters": true,
      "editor.minimap.renderCharacters": false,
      "editor.minimap.maxColumn": 300,
      "editor.minimap.showSlider": "always",
      "editor.cursorBlinking": "phase",
      "editor.cursorSmoothCaretAnimation": true,
      "editor.detectIndentation": false,
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "diffEditor.ignoreTrimWhitespace": false,
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      "editor.suggestSelection": "first",
      "editor.trimAutoWhitespace": true,
      "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
      },
      //===========================================
      //============= Other =======================
      //===========================================
      "breadcrumbs.enabled": true,
      "open-in-browser.default": "chrome",
      //===========================================
      //============= emmet =======================
      //===========================================
      "emmet.showAbbreviationSuggestions": true,
      "emmet.showExpandedAbbreviation": "always",
      "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "xml": {
          "attr_quotes": "single"
        }
      },
      //===========================================
      //============= files =======================
      //===========================================
      "files.trimTrailingWhitespace": true,
      "files.insertFinalNewline": true,
      "files.trimFinalNewlines": true,
      "files.eol": "\n",
      "search.exclude": {
        "**/node_modules": true,
        "**/*.log": true,
        "**/*.log*": true,
        "**/bower_components": true,
        "**/dist": true,
        "**/elehukouben": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.svn": true,
        "**/.DS_Store": true,
        "**/.idea": true,
        "**/.vscode": false,
        "**/yarn.lock": true,
        "**/tmp": true,
        "out": true,
        "dist": true,
        "node_modules": true,
        "CHANGELOG.md": true,
        "examples": true,
        "res": true,
        "screenshots": true
      },
      "files.exclude": {
        "**/bower_components": true,
        "**/.idea": true,
        "**/tmp": true,
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true
      },
      "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/.vscode/**": true,
        "**/node_modules/**": true,
        "**/tmp/**": true,
        "**/bower_components/**": true,
        "**/dist/**": true,
        "**/yarn.lock": true
      },
      // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
      // ===========================================
      // ================ Eslint ===================
      // ===========================================
      "eslint.alwaysShowStatus": true,
      "eslint.options": {
        "plugins": ["html", "vue", "javascript", "jsx", "typescript"],
        "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
      },
      "eslint.validate": [
        "javascript",
        "typescript",
        "reacttypescript",
        "reactjavascript",
        "html",
        "vue"
      ],
      // ===========================================
      // ================ Vetur ====================
      // ===========================================
      "vetur.experimental.templateInterpolationService": true,
      "vetur.format.options.tabSize": 2,
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.format.defaultFormatter.scss": "prettier",
      "vetur.format.defaultFormatter.css": "prettier",
      "vetur.format.defaultFormatter.ts": "prettier-tslint",
      "vetur.format.defaultFormatter.js": "prettier",
      "vetur.languageFeatures.codeActions": false,
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "force-expand-multiline"
        },
        "prettier": {
          "eslintIntegration": true,
          "arrowParens": "always",
          "semi": false,
          "singleQuote": true
        }
      },
      "terminal.integrated.rendererType": "dom",
      "telemetry.enableCrashReporter": false,
      "telemetry.enableTelemetry": false,
      "workbench.settings.enableNaturalLanguageSearch": false,
      "path-intellisense.mappings": {
        "/@/": "${workspaceRoot}/src"
      },
      "prettier.requireConfig": true,
      "typescript.updateImportsOnFileMove.enabled": "always",
      "workbench.sideBar.location": "left",
      "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      // "[markdown]": {
      //   "editor.defaultFormatter": "esbenp.prettier-vscode"
      // },
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "[vue]": {
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": false
        }
      },
      "terminal.integrated.automationShell.windows": "F:\\Git\\bin\\bash.exe",
      "terminal.integrated.shell.windows": "F:\\Git\\bin\\bash.exe",
      "editor.formatOnSave": true,
      "editor.formatOnPaste": true,
      "editor.formatOnType": true,
      "files.autoSave": "afterDelay",
  }

 好嘞尝鲜到此结束~明天继续搬砖ing！！！！内容为自己总结原创，未经同意，请勿随意转载~谢谢合作~~