江苏龙网

  1. 主页 > 生活百科 > >

搭建开箱即用的vue3框架( 二 )

vue3框架


  1. vue
  2. pinia
  3. vueuse
  4. vue-i18n
  5. vue-router
当然还有项目中的自动引入，只需要满足以下规范即可 。
  1. src/composables 下凡是 use 开头的模块，同时里边有 default 导出，该导出就可以被按需自动引入 。
例如有个 src/composables/foo.ts
// default 导出export default 1000此时就不再需要 import了
<script setup lang="ts">console.log(foo) // 输出 1000</script><template><div @click="store.inc()">{{store.counter}}</div></template>
  1. src/stores 下凡是 Store 结尾的模块，同时里边有 default 导出，该导出就可以按需自动引入 。
例如有个
src/stores/counterStore.ts
// default 导出export default defineStore('counter', {state() {return {counter: 1}},actions: {inc() {this.counter++}}})此时就不再需要 import了
<script setup lang="ts">const store = counterStore()</script><template><div @click="store.inc()">{{store.counter}}</div></template>具体可见 unplugin-auto-import 与
vite-auto-import-resolvers
 
7. 组件自动引入原来需要 import
<!-- src/pages/index.vue --><script setup lang="ts">import Hello from "../components/Hello.vue"</script><template><Hello /></template>现在只要在 src/components 下定义的组件都将会按需引入，即 import 是不需要的 。
<!-- src/pages/index.vue --><template><Hello /></template>同时流行组件库自动引入也是支持的，例如 Naive ui 。
只需安装依赖 。
pnpm add naive-ui# 或者 npm i naive-ui# 或者 yarn add naive-ui即可在模板中使用 。
<!-- src/pages/index.vue --><template><n-button type="success">Success</n-button></template>目前支持的组件库有:
  • naive ui
  • arco.design
  • element-plus
  • ant design of vue
  • @vueuse/components
具体可见 unplugin-vue-components
 
8. 图标自动引入可前往 icones，随意选择点击进入其中一个图标库
搭建开箱即用的vue3框架

文章插图
 
再点击选择其中一个喜欢的图标
搭建开箱即用的vue3框架

文章插图
 
复制其名称
搭建开箱即用的vue3框架

文章插图
 
在模板中即可直接用组件的形式直接使用，注意加上前缀 i- 。
<template><i-mdi:account-box-multiple /></template>保存后等待自动下载该图标库后，就可以在页面中看到对应图标 。
注意自动下载图标需要 pnpm 包管理器支持，如果你是其他包管理器需要手动安装图标集
图标集名称为 @iconify/ 加 : 前缀，例如上边的图标是 mdi:account-box-multiple，图标集名称就为 @iconify/mdi 。
npm i @iconify/mdi -D# 或者 yarn add @iconify/mdi -D同时推荐你使用 vscode 插件 Iconify IntelliSense 。
该插件会在模板中显示图标的预览 。就像这样
<!-- 模板中代码 --><template><i-mdi:account-box-multiple /></template>将在 vscode 中得到图标预览
搭建开箱即用的vue3框架

文章插图
 
具体可见 unplugin-icons
 
9. VueUse 支持VueUse 是一个超级强的 hooks 库，例如你要获取鼠标位置，只需要这样
<script setup lang="ts">// useMouse 被自动按需引入了，不需要importconst { x, y } = useMouse()</script><template><div>x坐标 {{x}}</div><div>y坐标 {{y}}</div></template>具体可见 VueUse
 
10. TypeScript 的不需要重新配置，直接用 ts 书写就行了 。
 
11. Windi CSS 的Windi CSS 是一个开发中速度更快的 原子css 库 。
直接在模板中用就行了，不需要配置 。
<template><div class="bg-red-500 text-white">我是红色背景的白色文本</div><template>


推荐阅读


上一篇：淘宝店铺装修报价 店铺装修设计费一般多少钱

下一篇：海南省投诉 海南省消费局