vite+ts+eslint搭建vue3.0开发模版
本文模版地址
- 创建项目文件夹，执行 npm 初始化命令
mkdir project
cd project
npm init -y
- 安装 vite
npm i vite -D
- 安装 vite vue 支持
npm i vue@next @vue/compiler-sfc # vue框架
npm i -D @vitejs/plugin-vue # vite 解析vue文件
- 配置 vite vue 支持
新建 vite.config.js 文件
import * as path from 'path';
import { defineConfig } from 'vite';
import VuePlugin from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [VuePlugin()],
resolve: {
alias: {
// 配置别名
'@': path.resolve(__dirname, './src')
}
}
});
- 添加 typescript 支持
npm i -D typescript @vuedx/typecheck @vuedx/typescript-plugin-vue
@vuedx/typecheck 和@vuedx/typescript-plugin-vue 不安装似乎也没啥影响，npm 上的描述是一个命令行检查 vue 项目的工具。在我的理解中一般使用于 githooks。
配置tsconfig.json
{
"compilerOptions": {
"target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "ESNEXT" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
"jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
"lib": ["esnext", "dom"],
/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */,
/* Module Resolution Options */
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
"types": ["vite/client"] /* Type declaration files to be included in compilation. */,
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
/* Advanced Options */
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
"exclude": ["node_modules", "dist", "public", "tests"]
}
新建 shims-vue.d.ts 使 typescript 支持 vue 文件
declare module '*.vue' {
import {Component} from 'vue';
const _default: Component;
export default _default;
}
- 新建入口文件 index.html， vite 的入口文件不再是 js，而是常规的 html
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<div id="app">div>
<script type="module" src="./src/index.ts">script>
body>
html>
- 新建 index.ts，用于使用 vue3.0 项目初始化代码
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 挂载节点
app.mount('#app');
<template>
<div>hello vue3.0div>
template>
<script lang="ts">
export default {
name: 'App',
setup() {}
};
script>
至此，vue3.0项目就已经搭建完成了。接下来，我们添加一些辅助功能，比如说eslint、prettier等。
- 添加eslint支持和prettier支持，这里eslint的规范我选择了腾讯alloy团队的alloy规范
npm i -D eslint babel-eslint eslint-config-alloy vue-eslint-parser eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier
由于alloy规范的vue组织文件方式与个人习惯不符，因此进行了部分修改，具体文件如下：
module.exports = {
extends: ['alloy', 'alloy/vue', 'alloy/typescript', 'prettier'],
plugins: ['prettier', 'vue'],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
env: {
// 你的环境变量（包含多个预定义的全局变量）
//
// browser: true,
node: true
// mocha: true,
// jest: true,
// jquery: true
},
settings: {
'import/resolver': {
alias: {
map: [['@', './src']],
extensions: ['.ts', '.js', '.jsx', '.json', '.vue']
}
}
},
globals: {
// 你的全局变量（设置为 false 表示它不允许被重新赋值）
//
// myGlobal: false
},
rules: {
// 自定义你的规则
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/component-tags-order': [
'error',
{
order: ['template', 'script', 'style']
}
]
}
};
添加eslint格式化命令
npx eslint --fix --ext src/**/*.{vue,less,css,scss}
添加prettier格式化命令
npx prettier --write --loglevel warn src/**/*.{js,jsx,json,ts,tsx,css,less,scss,vue,html,md}
- 添加stylelint支持
npm i -D stylelint stylelint-config-standard stylelint-order stylelint-config-property-sort-order-smacss stylelint-config-prettier stylelint-config-recommended-vue
stylelint具体配置文件如下：
const sortOrderSmacss = require('stylelint-config-property-sort-order-smacss/generate');
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-prettier-scss'],
plugins: ['stylelint-order'],
rules: {
'order/properties-order': [sortOrderSmacss({ order: 'flexible' })],
},
overrides: [
{
files: ['*.scss', '**/*.scss'],
customSyntax: 'postcss-lit',
},
{
extends: ['stylelint-config-recommended-vue'],
files: ['*.vue', '**/*.vue'],
},
],
};
添加stylelint格式化命令
npx stylelint --fix src/**/*.{vue,less,postcss,css,scss} --cache --cache-location node_modules/.cache/stylelint/
- 添加git commit提交规范支持
npm i -D commitizen # 使用工具生成符合规范的commit message
npx commitizen init cz-conventional-changelog --save-dev --save-exact # 初始化项目以使用cz-conventional-changelog适配器
npm i -D @commitlint/config-conventional @commitlint/cli #使用commitlint工具检验commit格式是否符合规范
配置commitlint使用传统的config配置文件，在项目根目录生成就可以了
/**
* feat：新增功能
* fix：bug 修复
* docs：文档更新
* style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
* refactor：重构代码(既没有新增功能，也没有修复 bug)
* perf：性能, 体验优化
* test：新增测试用例或是更新现有测试
* build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
* ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
* chore：不属于以上类型的其他类型，比如构建流程, 依赖管理
* revert：回滚某个更早之前的提交
*/
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'feat',
'fix',
'docs',
'style',
'refactor',
'perf',
'test',
'build',
'ci',
'chore',
'revert'
]
],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never']
}
};
- 添加husky支持，（需要先初始化git仓库）
git init
npm i -D husky
npx husky init
配置comitizen钩子
在.husky文件夹下找到commit-msg文件（不存在则创建），在其最后一行添加
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# 已存在文件只需添加下面一行命令
npx commitlint --edit $1
官网说可以通过命令添加，但是我在window10环境下执行无效
npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'
配置预提交格式化，或者将相关命令转为npm命令
在.husky文件夹下找到pre-commit文件（不存在则创建），在其最后一行添加
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# 已存在文件只需添加以下命令
npx eslint --fix --ext src/**/*.{vue,less,css,scss}
npx prettier --write --loglevel warn src/**/*.{js,jsx,json,ts,tsx,css,less,scss,vue,html,md}
npx stylelint --fix src/**/*.{vue,less,postcss,css,scss} --cache --cache-location node_modules/.cache/stylelint/
git add .
- 最后添加editorconfig支持
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true