创建vue3+ts项目

最新推荐文章于 2025-10-03 19:15:00 发布

原创

最新推荐文章于 2025-10-03 19:15:00 发布 · 6.1k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #ecmascript

本文详细介绍了如何使用npm、yarn或pnpm初始化Vue3项目，解决常见问题如组件导入、ts配置，配置eslint、prettier、stylelint等代码检查工具，集成element-plus、Sass，以及状态管理、路由、mock数据和axios封装等内容。

一、初始化阶段

一、创建项目

npm create vite@latest project

或者

yarn create vite@latest project

或者

pnpm create vite

二、遇到问题

（一）、vue3组件导入提示组件没有export

解决：vue3+ts项目vetur组件不适用，需要将vetur替换成volar

（二）、vue3+ts提示报错找不到模块“vue”

解决：打开tsconfig.json，修改"moduleResolution": "Node"

（三）、ts爆红未知的编译器选项“allowImportingTsExtensions”

解决：此选项已经被弃用，所以直接将这行删除即可

二、配置设置

通过pnpm run dev启动项目后需要手动打开网页，改成自动打开网页的方法：

打开package.json文件，修改script下的dev，将其改成dev:"vite --open"

一、eslint代码校验工具配置

（一）、安装eslint

pnpm install eslint -D

（二）、生成配置文件：.eslint.cjs

npx eslint --init

（三）、.eslint.cjs配置文件

module.exports = {
    //eslint工作环境，运行环境
    "env": {
        "browser": true,
        "es2021": true
    },
    // 规则继承
    "extends": [
        //全部规则默认是关闭的，这个配置项开启推荐规则，推荐规则参照文档
        //比如：函数不能重名，对象不能出现重复key
        "eslint:recommended",
        //ts语法规则
        "plugin:@typescript-eslint/recommended",
        //vue3语法规则
        "plugin:vue/vue3-essential"
    ],
    //要为特定类型的文件指定处理器
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    //指定解析器：解析器
    //Esprima 默认解析器
    //Babel-ESLint babal解析器
    //@typescript-eslint/parser  ts解析器
    //指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest",    //校验ECMA最新版本
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"  //设置为“script”（默认3）,或者“module”代码在ECMAScript模块中
    },
    //ESLint支持使用第三方插件。在使用插件之前，您必须使用npm安装它
    //该eslint-plugin-前缀可以从插件名称被省略
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    //eslint规则
    "rules": {
    }
}

1、vue3环境代码校验插件

安装指令

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier  eslint-config-prettier eslint-plugin-node @babel/eslint-parser

2、修改.eslint.cjs配置文件