首页 > 其他分享 >uniapp脚手架中vue3项目配置`@`,并且在vscode中有提示

uniapp脚手架中vue3项目配置`@`,并且在vscode中有提示

时间:2023-11-18 11:23:40浏览次数:125  
标签:uniapp resolve vscode vue3 import vite

uniapp脚手架中vue3项目配置@,并且在vscode中有提示

  1. 在vite.config.js中配置一下代码

    import { defineConfig } from "vite";
    import uni from "@dcloudio/vite-plugin-uni";
    import { resolve } from "path";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [uni()],
      resolve: {
        // 路径别名
        alias: {
          "@": resolve(__dirname, "./src"),
        },
      },
    });
    
    
  2. 在项目根目录下创建一个 jsconfig.json 文件(如果你是使用 TypeScript,可以使用 tsconfig.json 文件)。添加以下内容:

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["src/*"]
        }
      },
      "exclude": ["node_modules", "dist"]
    }
    
    

标签:uniapp,resolve,vscode,vue3,import,vite
From: https://www.cnblogs.com/00544--/p/17840220.html

相关文章

  • vscode配置js片段及格式处理
    1、前期工作需要将代码块处理成要求的格式,即变量用$开头标记,每一个tab缩进用\t替换,代码中的双引号用转义字符\"替换,每一行放双引号中,行末加逗号。。。具体操作及截图如下:(1)、代码中的变量用“$1”,“$2”,“$3”....等替换(2)、在文本编辑器或者vscode中将缩进用\t替换(3)、将代......
  • vscode插件:koroFileHeader(添加注释文件头)
    第一步:安装插件koroFileHeader。如下图1 第二步:配置setting。将下面的json代码配置到setting中。"fileheader.configObj":{"createFileTime":true,"language":{"languagetest":{"head":"/$$",......
  • Vue3 + antDesign3.x 汉化 中文(解决日期混合中英文模式
    依赖项版本 "ant-design-vue":"^3.2.20", "dayjs":"^1.11.10", "vue":"^3.0.5",依赖处理main.js中import{createApp}from'vue'importAntdfrom'ant-design-vue'import'an......
  • vue3+element-Plus表格滚动联动
    constTable0=ref()constTable1=ref()functionsyncScroll(){for(leti=0;i<compareData.compareInfo.length;i++){letfirstTable=Table0.value[i].$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]letsec......
  • Vue3 模板引用 ref 的实现原理
    什么是模板引用ref?有时候可以使用 ref attribute为子组件或HTML元素指定引用ID。<template><inputref="input"/></template><script>import{defineComponent,ref}from"vue";exportdefaultdefineComponent({setup(){......
  • Vue3 的 effect、 watch、watchEffect 的实现原理
    所谓watch,就是观测一个响应式数据或者监测一个副作用函数里面的响应式数据,当数据发生变化的时候通知并执行相应的回调函数。Vue3最新的watch实现是通过最底层的响应式类ReactiveEffect的实例化一个reactiveeffect对象来实现的。它的创建过程跟effectAPI的实现类似,所......
  • vue3 使用 store
    在script中使用storehttps://blog.csdn.net/SubStar/article/details/116077737<script>import{getCurrentInstance}from"vue";import{useStore}from"vuex";exportdefault{setup(){//第一种方法:获取路由对象router的方法1constv......
  • Vue3 Pinia对state的订阅监听($subscribe,$onAction)数据监听
    <template><divclass="main-container":class="{'show-scroll':targetIsVisible}"><div:style="{height:frameHeight+'px'}"class="main-content":class="{'show-......
  • VSCode------设置自动补全函数的括号
    一:VSCode设置自动补全函数的括号操作步骤1.1 寻找setting.json配置文件    Ctrl+Shift+P (Mac:command+Shift+P) 1.2编辑并保存配置内容 "typescript.suggest.completeFunctionCalls": true,  "javascript.suggest.completeFunctionCalls": ......
  • uniapp微信小程序图片裁剪插件,支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切
    uniapp微信小程序图片裁剪插件,支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式,功能多性能高体验好注释全。1.效果预览:      5.引入插件项目代码:Homilier/qf-image-cropper·GitCode使用HBuilderX导入项目:图片裁剪插件-DCloud......