用typescript完成倒计时_vite+vue3+typescript搭建项目从01

前言

自从vue3发布以后，全网都是vue3的文章，趁着热度快降下来，赶紧蹭一波~

网上有很多关于vue3的项目搭建文章，我全都试过，用得都不是很爽。所以自己也着手玩一下....

对于使用vue3搭建项目,主流有两种方式cli和vite，纵使cli完全0配置，开箱即用，但是小弟毅然决定跳进坑里?..

假如觉得vite需要配置，麻烦的，可以继续使用cli哈~

其实vite文档上有写，以后将会集成到cli中...?

本文只涉及基础配置部分，不涉及语法及封装，请注意食用....

创建项目

npm init vite-app vite-demo

cd vite-demo

npm i

npm run dev

这样项目就初步完成，并且跑起来了

typescript

接下来我们试试typescript，能否使用

在vite文档中，说vite支持直接引入.ts文件和直接只用

//  test.ts
export const name = '前端背锅侠';

{{ name }}






能正常显示，太完美了~

既然要用typescript，那么我们同时也要把main.js改为main.ts

但是这个时候发现，main.ts中有报错

这个时候就需要一个声明文件shims-vue.d.ts

declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent;
export default component;
}

这个声明文件的意思是将所有.vue文件都以DefineComponent类型暴露

这个时候，你尝试npm run build，你会发现报错了，这是由于index.html的引入路径错了，需要将main.js改为main.ts

智能提示

接下来我们试试路径别名的智能提示

我们在src下创建script文件，并且创建一个.ts文件

// src/script/test.ts

/**
 * 这是一个测试方法
 * @param name 名字
 */
const sayHi = (name: string) => console.log(name);

export default sayHi;

// App.vue

前端背锅侠







发现，报错了，没有找到该模块~

这个时候tsconfig.json需要配置一下

{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"incremental": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@script/*": ["src/script/*"]
    },
"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
"isolatedModules": true
  },
"exclude": ["node_modules"]
}

现在再回去App.vue文件，发现vscode能正常引入，正常显示(如果没有效果，请重启vscode)

但是你以为真的就完事了？

打开浏览器，你会发现，报错了~

这是由于我们只是在tsconfig.json配置了，还需要在vite.config.ts中配置alias

看到vite.config.ts名字的时候，你应该会想起vue.config.js...没错！！这两个东西配置起来，确实差不多

但是千万不要以为，差不多就不坑...对比一下两者配置你就知道?

//  vue.config.js

const { resolve } = require('path');
module.exports = {
chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@script', resolve('src/script'));
    }
};

//  vite.config.ts

import { resolve } from "path";

module.exports = {
  alias: {
"/@/": resolve("src"),
"/@script/": resolve("src/script"),
  },
};

在vite中，别名开始和结束必须都要加/，这个点，足足坑了我半小时....

注意，对应的tsconfig.json也要对应修改

eslint

我个人觉得eslint在项目中的作用十分巨大，能为你提前检测到一些bug，以及统一团队代码风格，再配合上ts，相信即使项目壮大了也依旧能很好的维护

安装一系列的依赖

 npm i eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-plugin-prettier husky lint-staged prettier typescript vue-eslint-parser -D

是的，就是这一吨的插件，为了达到cli的效果....

首先是配置eslint及prettier

//  .eslintrc

{
    "root": true,
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "extraFileExtensions": [".vue"]
    },
    "plugins": ["@typescript-eslint"],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-recommended",
        "@vue/typescript/recommended",
        "@vue/prettier"
    ],
    "rules": {
        "quotes": ["error", "single"],
        "@typescript-eslint/explicit-module-boundary-types": "off"
    }
}

//  .eslintignore

node_modules
dist

// .prettierrc

{
    "tabWidth": 4,
    "singleQuote": true,
    "arrowParens": "always",
    "endOfLine": "auto",
    "overrides": [
        {
            "files": ["*.json", ".babelrc", ".eslintrc", ".prettierrc"],
            "options": {
                "parser": "json"
            }
        },
        {
            "files": "*.{sass,scss}",
            "options": {
                "parser": "scss",
                "tabWidth": 4
            }
        }
    ]
}

// 配置husky及lint-staged，这样就可以在代码提交的时候，再进行一次eslint检测，保证代码质量

//  package.json

{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "lint": "eslint --ext .js,.vue --fix ./src"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,jsx,vue}": [
            "eslint --ext .vue,.js,.jsx --fix ./src",
            "git add"
        ]
    }
}

//  vscode配置
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
  "files.autoSave": "afterDelay",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.endOfLine": "crlf"
}

假如你们团队有另外的一些代码规范及风格，可以自行配置eslint及prettier

到这里，基本的配置已经完成，剩下的那些axios封装，router、vuex使用，网上的文章基本很全面，所以不多赘述，有兴趣的，也可以按照上面弄一遍，毕竟vite开发体验太爽了

本文属个人理解，如有错误，期待你的提出及交流，谢谢。

扫码进入前端交流群

扫码进入前端交流群