前言
自从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
开发体验太爽了
本文属个人理解,如有错误,期待你的提出及交流,谢谢。
扫码进入前端交流群
扫码进入前端交流群