创建vue项目：vue3 + vite + typescript + less

niuiic

已于 2022-05-01 12:37:18 修改

阅读量1.9k

点赞数

分类专栏： vue 文章标签： vue.js typescript vscode vim

于 2021-05-15 11:01:16 首次发布

本文链接：https://blog.youkuaiyun.com/niuiic/article/details/116837257

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用vue3、vite、typescript和less创建项目，强调了在过程中遇到的问题及解决方案，如npm版本、ts配置、vim/neovim与vscode的设置，并提供了相关配置的详细说明。

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

更多分享内容可访问我的个人博客

https://www.niuiic.top/

更新：本文内容已不适用于最新版本，若遇到相同问题可以继续参考。要创建项目请直接参考https://github.com/niuiic/develop-tools中关于vue的内容。

首先声明一下，笔者只是刚玩了会 vue, 和 cannot find module vue斗智斗勇了半天。好不容易搞定了，来分享一下。以下不会涉及关于 vue 开发的具体内容。

使用 npm 作为包管理器。

yarn2 的一系列操作让人迷惑，本来不想折腾了。最后还是忍不住折腾了一把，用法放在最后面。

创建项目

# 使用vue + ts的模板创建项目
npm init @vitejs/app $appName -- --template vue-ts
cd appName
# 安装less
npm install less -D
# 这是coc-vetur的依赖项，不使用vim + coc.nvim 的可以忽略
npm install eslint eslint-plugin-vue -D
# 这是在vue文件中解决cannot find module问题的插件
npm install @vuedx/typescript-plugin-vue -D

现在可以进入项目，使用npm run dev运行。

npm7 以上版本会出错，使用node node_modules/esbuild/install.js解决。

为了解决 ts 文件中cannot find module vue的问题，还需要做以下设置。

在tsconfig.json中加入

    "plugins": [
      {
        "name": "@vuedx/typescript-plugin-vue"
      }
    ],

可以以同样方式加入 eslint-plugin-vue。

如果你使用的是 vim/neovim + coc-vetur，则在coc-settings.json中配置"vetur.useWorkspaceDependencies": true。这一步是让插件使用项目内的依赖，否则插件在全局找不到刚才安装的插件。

如果你使用 vscode，设置 "Select TypeScript version" -> "Use workspace version"。参考

注意，此时已经不需要src/shims-vue.d.ts。

笔者不使用 vscode，不过从参考的描述来看，应该是可以对 vue 文件和 ts 文件都产生作用。在 vim + coc.nvim 的环境中，两种文件均可生效。

在 neovim + coc.nvim 环境下进行测试。

不启用任何插件，无论有没有src/shims-vue.d.ts文件，vue 文件中import { defineComponent } from 'vue'都不报错，import HelloWorld from './components/HelloWorld.vue'也不报错。
只要启用eslint-plugin-vue插件，就可以防止 ts 文件中import { createApp } from 'vue'出错。但是如果没有src/shims-vue.d.ts文件，import App from './App.vue'还是会出错。
继续启用@vuedx/typescript-plugin-vue，删掉src/shims-vue.d.ts，一切正常。

为了在挂载自定义组件的时候不出错，还需要设置根目录下的vite.config.ts如下。

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { vue: "vue/dist/vue.esm-bundler.js" },
  },
});

使用 yarn2 代替 npm。

首先安装 yarn1。

yarn2 的默认用法是把自己当成依赖安装在项目中。如果在全局安装 yarn2，也需要在项目中才能执行命令。同时 yarn2 无法执行 create 命令，还需要依靠 yarn1。

# 在全局安装yarn1
npm -g install yarn
# 初始化项目
yarn create @vitejs/app appName --template vue-ts
# 升级成yarn2
cd appName
yarn set version berry

修改项目根目录下.yarnrc.yml。

yarnPath: ".yarn/releases/yarn-berry.cjs"
nodeLinker: node-modules
npmRegistries: https://registry.npm.taobao.org/

第二行的配置是让 yarn2 完全用 npm 的方式安装依赖。否则是不存在node_modules的，也就不能调用插件。虽然这样做丧失了 yarn2 的特性，但是比起 npm 至少速度上可以快点。

继续完成项目初始化。

yarn install
yarn add less -D
yarn add eslint eslint-plugin-vue -D
yarn add @vuedx/typescript-plugin-vue -D