vue3+ts+vite的移动端代码模版更新了！📱⚡️基于 vite4 + Vue3.2 + TypeScript +

📱⚡️基于 vite4 + Vue3.2 + TypeScript + pinia + mock + less + vantUI + rem 适配 + axios 封装的移动端基础模版版本迭代为 v1.0.1 了。

前言

vue-cli 移动端模版地址：github.com/ZYCHOOO/vue…
vite-vue 移动端模版地址：github.com/ZYCHOOO/vue…
v1.0.0 版本的掘金文章链接：juejin.cn/post/722697…

v1.0.0 版本的掘金文章这几天突然收获了好多赞和收藏，欣喜若狂；谢谢大佬们的支持，希望在日常开发中能帮到大家，谢谢大家🙇

✅ 内置组件：FloatBtn

悬浮按钮组件

代码片段

<template>
  // 默认悬浮按钮
  <float-btn icon="home" text="首页" />
  // 可移动的悬浮按钮
  <float-btn icon="home" text="首页" movable />
</template>

属性

参数	说明	类型	可选值	默认值
icon	图标名称	string	-	-
text	按钮文字	string	-	-
movable	按钮是否可移动	boolean	true/false	false

⬆️ 返回顶部

✅ 内置组件：NewsCell

新闻单元格组件

代码片段

<template>
  <div class="news-container-demo>
    <news-cell
      v-for="newsItem in newsList"
      :key="newsItem.uniqueKey"
      :item="newsItem"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import NewsCell, { NewsOption } from '@/components/NewsCell/index.vue'

const newsList = ref<NewsOption[]>([])
</script>

属性

参数	说明	类型	可选值	默认值
item	新闻单元格内容	object	-	-

⬆️ 返回顶部

✅ 内置组件：SvgIcon

svg 图标组件

代码片段

<template>
  // 本地 svg 图标
  <svg-icon icon="user" />
  // 在线 svg 图标
  <svg-icon icon="https://res.lgdsunday.club/user.svg" />
</template>

属性

参数	说明	类型	可选值	默认值
icon	图标名	string	-	-
className	类名	string	-	-

⬆️ 返回顶部

✅ 内置组件：VirtualList

虚拟列表组件

代码片段

<template>
  <virtual-list
    :list-data="listData"
    :start-index="0"
    :end-index="10"
    :item-height="20"
    :show-num="10"
  >
    <template v-slot="{ itemInfo }">
      <div>{{ itemInfo }}</div>
    </template>
  </virtual-list>
</template>

属性

参数	说明	类型	可选值	默认值
itemKey	key标识	string	-	'id'
listData	列表数据	array	-	0
itemHeight	单个子项高度	number	-	0
showNum	给用户展示的数量	number	-	0
startIndex	起始下标	number	-	0
endIndex	结束下标	number	-	0

⬆️ 返回顶部

✅ plop 优化

针对 v1.0.0 版本的 component 生成器做了一些优化，在运行指令 npm run plop component 时，新增 confirm 是否全局注册新组件。具体如下：

  ...
  {
    type: 'confirm',
    name: 'globalRegister',
    message: 'do you want to globally register this component ?',
    default: 'Y'
  }
  ...
  if (data.globalRegister) {
    actions.push({
      type: 'modify',
      path: 'src/components/index.ts',
      pattern: /(\/\/ import new components)/gi,
      template: "import {{ componentName }} from './{{ componentName }}/index.vue'\r\n$1"
    })
    actions.push({
      type: 'modify',
      path: 'src/components/index.ts',
      pattern: /(\/\/ add new components)/gi,
      template: '{{ componentName }},\r\n$1'
    })
  }
 ...

⬆️ 返回顶部

再次谢谢大家的支持🙏 你们的点赞收藏对我有很大的帮助！也欢迎大家评论提出意见！谢谢大家！