项目搭建

记一次搭建 vue 项目过程

使用 Vue 脚手架搭建 Vue+Ts+Vite+Pinia 项目

脚手架搭建

  1. 使用 npm init vue@latest 来创建

    npm init vue@latest

  2. 配置项目名称和选择项目依赖

如何设计公共类型

思路： 1.可以选择放在数据起源的地方（一开始产生或者首次使用数据的地方） 2. 可以在 src 中新增 types 文件，在此新增类型声明文件，例如用户相关：user.ts

postman 测试接口

246

遇到的 Bug

element-plus 组件类型丢失(找不到导出组件模块成员)

  1. 模块 element-plus 没有导出的成员 xxxxx

    image

  2. 在template 模板中，鼠标移入element-plus 组件，类型为 ElButton: any

    image

    原因如下

    image

    项目使用的依赖 "@vue/tsconfig": "^0.4.0","typescript": "~5.0.4"

    image

    解决方案：在 tsconfig.json，tsconfig.app.json ， tsconfig.node.json三个文件中添加如下配置，重启 vscode

    "compilerOptions": {
    "moduleResolution": "node",
}

    配置完，重启 vscode 后，运行项目，ts 就可以准确读取组件类型了

    image

    image

vue3 中使用 vuedraggable

插件地址：https://github.com/SortableJS/vue.draggable.next

在其文档中，使用 import draggable from 'vuedraggable' 导入，在 dev 环境中可以正常运行，但是在 build 环境中，打包报错： error during build: RollupError: node_modules/.pnpm/vuedraggable@4.1.0_vue@3.4.27_typescript@5.4.5_/node_modules/vuedraggable/dist/vuedraggable.umd.js (4:7): "default" is not exported by "vue?commonjs-external", imported by "node_modules/.pnpm/vuedraggable@4.1.0_vue@3.4.27_typescript@5.4.5_/node_modules/vuedraggable/dist/vuedraggable.umd.js

解决方法：改变导入方式===》import draggable from "vuedraggable/src/vuedraggable"

最后编辑: