vite7: https://vite.dev/blog/announcing-vite7
node: https://nodejs.org/en/download
创建初始化
现在创建一个叫 forgetting 的项目
pnpm self-update
pnpm create vue@latest
# 引导构建
┌ Vue.js - The Progressive JavaScript Framework
│
◇ 请输入项目名称：
│ forgetting
│
◇ 请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
│ TypeScript, Router（单页面应用开发）, Pinia（状态管理）, ESLint（错误预防）, Prettier（代码格式化）
│
◇ 选择要包含的试验特性： (↑/↓ 切换，空格选择，a 全选，回车确认)
│ Oxlint（试验阶段）, rolldown-vite（试验阶段）
正在初始化项目 C:\Users\Windows\Desktop\study\vue\forgetting...
│
└ 项目初始化完成，可执行以下命令：
创建完成后，执行下边命令，运行起来。
cd forgetting
pnpm install
pnpm format
pnpm dev
提交版本。
git init -b main
git add .
git commit -m 'initialize'
删除默认页面，组件，样式
rm -rf ./src/views/*
rm -rf ./src/components/*
rm -rf ./src/assets/logo.svg
新增一个首页，运行起来
touch ./src/views/home/index.vue
# 添加以下内容
<template>
<div>
<h1>Welcome to the Home Page</h1>
</div>
</template>
修改 App.vue
<template>
<RouterView />
</template>
调整路由 router.ts
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/home/index.vue'),
},
],
})
export default router
去掉 assets/main.css 中的其他代码，保留。
@import './base.css';
#app {
margin: 0;
padding: 0;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
重新运行
pnpm dev
> forgetting@0.0.0 dev C:\Users\Windows\Desktop\study\vue\forgetting
> vite
Port 5173 is in use, trying another one...
ROLLDOWN-VITE v7.0.6 ready in 858 ms
➜ Local: http://localhost:5174/
➜ Network: use --host to expose
➜ Vue DevTools: Open http://localhost:5174/__devtools__/ as a separate window
➜ Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
➜ press h + enter to show help
可以执行代码检查
pnpm lint
> forgetting@0.0.0 lint C:\Users\Windows\Desktop\study\vue\forgetting
> run-s lint:*
> forgetting@0.0.0 lint:oxlint C:\Users\Windows\Desktop\study\vue\forgetting
> oxlint . --fix -D correctness --ignore-path .gitignore
Found 0 warnings and 0 errors.
Finished in 12ms on 8 files with 87 rules using 16 threads.
> forgetting@0.0.0 lint:eslint C:\Users\Windows\Desktop\study\vue\forgetting
> eslint . --fix
C:\Users\Windows\Desktop\study\vue\forgetting\src\views\home\index.vue
1:1 error Component name "index" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)
ELIFECYCLE Command failed with exit code 1.
ERROR: "lint:eslint" exited with 1.
ELIFECYCLE Command failed with exit code 1.
官方默认的vue文件名是以大写字母开头，多单词的形式。或以中横线连接。个人喜欢以名字+动词的形式来定义文件。即以单数名字作为文件夹名，动词作为文件名。比如，想要一个创建订单的页面可以这样：order/create.vue,如果想要一个订单列表的页面就是 order/list.vue。 这种规则和默认规则相冲，eslint 检查出错误来。所以可以手动修改该策略。
对于组件命名，还是喜欢用大写字母开头，多单词的形式。 components/MediaPlayer/MediaPlayer.vue 。
修改 eslint.config.ts，增加规则来允许上边所说的消息单个单词的文件命名。
{
rules: {
'vue/multi-word-component-names': 'off',
},
}
需要扩展和覆盖规则都可以在这里进行。因为是刚创建的项目，所以配置很干净除了新增这一条，其他都是默认的，完整如下：
import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginOxlint from 'eslint-plugin-oxlint'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
export default defineConfigWithVueTs(
{
name: 'app/files-to-lint',
files: ['**/*.{ts,mts,tsx,vue}'],
},
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
pluginVue.configs['flat/essential'],
vueTsConfigs.recommended,
...pluginOxlint.configs['flat/recommended'],
skipFormatting,
{
rules: {
'vue/multi-word-component-names': 'off',
},
}
)
再执行 pnpm lint 就不会报错了。
执行 pnpm format 格式化代码。中间不规范操作，都可以通过这个来自动纠正。
提交版本。 git add . && git commit -m '删除默认页面、组件、样式，配置支持单个单词文件名的eslint规则'
