1.首先使用vite官網(wǎng)教程的命令行建立項(xiàng)目(vite官網(wǎng))
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 // 檢查語(yǔ)法
To check syntax and find problems // 檢查語(yǔ)法并查找問(wèn)題
> To check syntax, find problems, and enforce code style // 檢查語(yǔ)法、發(fā)現(xiàn)問(wèn)題和執(zhí)行代碼樣式
? What type of modules does your project use? //您的項(xiàng)目使用什么類型的模塊? .esm
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
? Which framework does your project use? //您的項(xiàng)目使用哪個(gè)框架政钟？ .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)
// 你的代碼在哪里運(yùn)行。。。（按＜space＞選擇李皇，按＜a＞切換全部，按＜i＞反轉(zhuǎn)選擇）
√ Browser
√ Node
---------------------------------------------------------------- 空格增選Node 回車
? How would you like to define a style for your project? //您希望如何定義項(xiàng)目的樣式
Use a popular style guide // 使用流行的風(fēng)格指南
> Answer questions about your style // 回答關(guān)于你的風(fēng)格的問(wèn)題
---------------------------------------------------------------- 用過(guò)A&Q來(lái)配置規(guī)則
? What format do you want your config file to be in?// 您希望配置文件的格式是什么?
> JavaScript
YAML
JSON
--------------------------------------------------------------配置文件使用js文件
? What style of indentation do you use? //你用什么樣的縮進(jìn)方式
> Tabs
Spaces
? What quotes do you use for strings? //字符串用什么引號(hào)
> Double
Single
? What line endings do you use? //用什么行尾
> Unix
Windows
? Do you require semicolons? // 需要分號(hào)嗎 · No / Yes
// 您選擇的配置需要以下依賴項(xiàng)：
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現(xiàn)在立即初始化配置文件
? Which package manager do you want to use? //您想使用哪個(gè)包管理器
> npm
yarn
pnpm
---------------------------------------------------------------- 包管理器選擇npm
安裝完成后（根目錄會(huì)生成.eslintrc.cjs文件）這個(gè)配置文件是默認(rèn)生成的宙枷，還不能用于項(xiàng)目后面會(huì)修改此配置文件掉房。
4.配置 package.json
"scripts": {
//...
"lint": "eslint \"src/**/*.{js,jsx,vue,ts,tsx}\" --fix"
},
解決 defineProps 定義問(wèn)題
// 修改 .eslintrc.cjs ，添加 globals 配置
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
}
5.安裝vite-plugin-eslint（eslint結(jié)合vite使用）
// 說(shuō)明: 該包是用于配置vite運(yùn)行的時(shí)候自動(dòng)檢測(cè)eslint規(guī)范 不符合頁(yè)面會(huì)報(bào)錯(cuò)
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開(kāi)啟eslint之后報(bào)錯(cuò)：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
創(chuàng)建配置文件： .prettierrc.cjs
module.exports = {
// 一行最多 80 字符
printWidth: 80,
// 使用 4 個(gè)空格縮進(jìn)
tabWidth: 4,
// 不使用 tab 縮進(jìn)慰丛，而使用空格
useTabs: false,
// 行尾需要有分號(hào)
semi: true,
// 使用單引號(hào)代替雙引號(hào)
singleQuote: true,
// 對(duì)象的 key 僅在必要時(shí)用引號(hào)
quoteProps: 'as-needed',
// jsx 不使用單引號(hào)卓囚，而使用雙引號(hào)
jsxSingleQuote: false,
// 末尾使用逗號(hào)
trailingComma: 'all',
// 大括號(hào)內(nèi)的首尾需要空格 { foo: bar }
bracketSpacing: true,
// jsx 標(biāo)簽的反尖括號(hào)需要換行
jsxBracketSameLine: false,
// 箭頭函數(shù)，只有一個(gè)參數(shù)的時(shí)候璧帝，也需要括號(hào)
arrowParens: 'always',
// 每個(gè)文件格式化的范圍是文件的全部?jī)?nèi)容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫(xiě)文件開(kāi)頭的 @prettier
requirePragma: false,
// 不需要自動(dòng)在文件開(kāi)頭插入 @prettier
insertPragma: false,
// 使用默認(rèn)的折行標(biāo)準(zhǔn)
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'lf'
}
Prettier結(jié)合ESLint
配置完成prettier肯定會(huì)和eslint發(fā)生沖突捍岳，所以接下來(lái)要調(diào)整一下.eslintrc.js文件，通過(guò)幾個(gè)擴(kuò)展睬隶，來(lái)完成vue3、ts页徐、prettier的規(guī)則和eslint插件結(jié)合使用
// 配置 .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 目錄并在其下面創(chuàng)建 index.ts苏潜，導(dǎo)出 store
import { createPinia } from 'pinia'
const store = createPinia()
export default store
在 main.ts 中引入并使用
import store from './store'
// 創(chuàng)建vue實(shí)例
const app = createApp(App)
// 掛載pinia
app.use(store)
定義State： 在 src/store 下面創(chuàng)建一個(gè) 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下創(chuàng)建文件夾变勇，router文件夾恤左，創(chuàng)建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中注冊(cè)
// 引入路由
import router from './router'
// 使用路由
app.use(store).use(router).mount("#app");
- app.vue更改
<template>
<!-- 放置路由容器 -->
<router-view></router-view>
</template>
注意
報(bào)錯(cuò)1.Failed to resolve import "../view/home.vue" from "src\router\index.ts".
解決方法：
//安裝一個(gè)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 // ******** 路徑配置新增
}
})
報(bào)錯(cuò)2： error Component name "home" should always be multi-word vue/multi-word-compo
// 修改.eslintrc.cjs
rules: {
"vue/multi-word-component-names":0
},
