1.首先使用vite官网教程的命令行建立项目(vite官网)
npm create vite@latest my-vue-app --template vue-ts
Vite 需要 [Node.js](https://nodejs.org/en/) 版本 14.18+，16+。
[图片上传失败...(image-e0e2dc-1669102140935)]
2. 集成 eslint
1.安装ESLint
npm add -D eslint
2.初始化ESLint配置
npx eslint --init
3.配置初始化选择
? How would you like to use ESLint? // 您想如何使用ESLint？ .style
To check syntax only // 检查语法
To check syntax and find problems // 检查语法并查找问题
> To check syntax, find problems, and enforce code style // 检查语法、发现问题和执行代码样式
? What type of modules does your project use? //您的项目使用什么类型的模块? .esm
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
? Which framework does your project use? //您的项目使用哪个框架？ .vue
React
> Vue.js
None of these
? Does your project use TypeScript? » No / Yes
---------------------------------------------------------------- 使用TS yes
? Where does your code run? ...(Press <space> to select, <a> to toggle all, <i> to invert selection)
// 你的代码在哪里运行。。。（按＜space＞选择，按＜a＞切换全部，按＜i＞反转选择）
√ Browser
√ Node
---------------------------------------------------------------- 空格增选Node 回车
? How would you like to define a style for your project? //您希望如何定义项目的样式
Use a popular style guide // 使用流行的风格指南
> Answer questions about your style // 回答关于你的风格的问题
---------------------------------------------------------------- 用过A&Q来配置规则
? What format do you want your config file to be in?// 您希望配置文件的格式是什么?
> JavaScript
YAML
JSON
--------------------------------------------------------------配置文件使用js文件
? What style of indentation do you use? //你用什么样的缩进方式
> Tabs
Spaces
? What quotes do you use for strings? //字符串用什么引号
> Double
Single
? What line endings do you use? //用什么行尾
> Unix
Windows
? Do you require semicolons? // 需要分号吗 · No / Yes
// 您选择的配置需要以下依赖项：
The config that you‘ve selected requires the following dependencies:
eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now? // 是否立即安装它们 » No / Yes
---------------------------------------------------------------- 选择yes现在立即初始化配置文件
? Which package manager do you want to use? //您想使用哪个包管理器
> npm
yarn
pnpm
---------------------------------------------------------------- 包管理器选择npm
安装完成后（根目录会生成.eslintrc.cjs文件）这个配置文件是默认生成的，还不能用于项目后面会修改此配置文件。
4.配置 package.json
"scripts": {
//...
"lint": "eslint \"src/**/*.{js,jsx,vue,ts,tsx}\" --fix"
},
解决 defineProps 定义问题
// 修改 .eslintrc.cjs ，添加 globals 配置
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
}
5.安装vite-plugin-eslint（eslint结合vite使用）
// 说明: 该包是用于配置vite运行的时候自动检测eslint规范 不符合页面会报错
npm add -D vite-plugin-eslint
// 配置vite.config.ts
...
import eslintPlugin from 'vite-plugin-eslint'
...
plugins: [
...
eslintPlugin({
// 配置
cache: false // 禁用 eslint 缓存
})
]
5.安装eslint-parser
npm add -D @babel/core
npm add -D @babel/eslint-parser
解决vue3开启eslint之后报错：error Parsing error: ‘＞‘ expected
// .eslintrc.cjs
module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
},
};
3. 集成prettier
npm add -D prettier
npm add -D eslint-config-prettier //eslint兼容的插件
npm add -D eslint-plugin-prettier //eslint的prettier
// 也可以连着一起
npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev
创建配置文件： .prettierrc.cjs
module.exports = {
// 一行最多 80 字符
printWidth: 80,
// 使用 4 个空格缩进
tabWidth: 4,
// 不使用 tab 缩进，而使用空格
useTabs: false,
// 行尾需要有分号
semi: true,
// 使用单引号代替双引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾使用逗号
trailingComma: 'all',
// 大括号内的首尾需要空格 { foo: bar }
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf'
}
Prettier结合ESLint
配置完成prettier肯定会和eslint发生冲突，所以接下来要调整一下.eslintrc.js文件，通过几个扩展，来完成vue3、ts、prettier的规则和eslint插件结合使用
// 配置 .eslintrc.cjs
"extends": [
'plugin:prettier/recommended',
],
4. 集成sass
1.安装
npm install -D sass sass-loader
2.使用
<style lang="scss" scoped>
</style>
5. 集成pinia
1.安装
npm i pinia --save
2.使用
新建 src/store 目录并在其下面创建 index.ts，导出 store
import { createPinia } from 'pinia'
const store = createPinia()
export default store
在 main.ts 中引入并使用
import store from './store'
// 创建vue实例
const app = createApp(App)
// 挂载pinia
app.use(store)
定义State： 在 src/store 下面创建一个 user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'user', // id必填，且需要唯一
state: () => {
return {
name: '张三'
}
},
actions: {
updateName(name) {
this.name = name
}
}
})
获取State： 在 src/components/usePinia.vue 中使用
<template>
<div>{{ userStore.name }}</div>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
// 修改State actions中
userStore.updateName('李四')
</script>
6. 配置路由
1.安装
npm install vue-router@4
2.配置
//src下创建文件夹，router文件夹，创建index.ts文件；
import { createRouter, RouteRecordRaw, createWebHashHistory } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
redirect: "/home",
},
{
path: "/home",
component: () => import("@/views/home.vue"),
},
{
path: "/about",
component: () => import("@/view/about.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(), //哈希值模式
routes,
});
// 暴露出去
export default router;
3.在main.ts中注册
// 引入路由
import router from './router'
// 使用路由
app.use(store).use(router).mount("#app");
- app.vue更改
<template>
<!-- 放置路由容器 -->
<router-view></router-view>
</template>
注意
报错1.Failed to resolve import "../view/home.vue" from "src\router\index.ts".
解决方法：
//安装一个path的插件：
npm install --save-dev @types/node
修改vite.config.ts
/** 路径配置 start *****/
import { resolve } from 'path'
const pathResolve = (dir: string): any => {
return resolve(__dirname, ".", dir)
}
const alias: Record<string, string> = {
'@': pathResolve("src")
}
/**** 路径配置 end ******/
export default defineConfig({
resolve: { // *** 路径配置新增
alias // ******** 路径配置新增
}
})
报错2： error Component name "home" should always be multi-word vue/multi-word-compo
// 修改.eslintrc.cjs
rules: {
"vue/multi-word-component-names":0
},
