Vue3 Vite 插件使用

原创已于 2022-09-20 10:14:44 修改 · 773 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-08-14 23:06:10 首次发布

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍Vue3中使用Setup语法糖简化开发流程的方法，并通过具体配置示例展示了如何实现自动导入常用API的功能。此外，还介绍了如何利用JSONServer搭建简单的后端数据服务及无缝滚动组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Setup 语法糖插件的配置

组件开发中无需每次都引入 import {ref,reactive,...} from 'vue'

插件安装

npm i unplugin-auto-import unplugin-vue-components -D

插件配置

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "pinia", "vue-router"], //添加需要自动导入的函数方法
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

插件使用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{ data }}
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

<script lang="ts" setup>
const data = ref(111);
</script>

关于找不到`ref`等函数报错解决方法

参考地址【https://blog.youkuaiyun.com/sayUonly/article/details/123482912】

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./auto-imports.d.ts" // 引入到这里
  ]
}

二、JSON Server 模拟后端数据

使用方法和地址：https://www.npmjs.com/package/json-server
无法将“xxx”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次
在命令前添加npx

三、vue3-seamless-scroll 无缝滚动组件

无缝滚动组件：https://www.npmjs.com/package/vue3-seamless-scroll