vue3 ts开发,
本文主要介绍从零开始构建vite vue3 ts规范的基本项目。这个项目已经用vite开始了，按照vite官方的顺序开始吧。和对vite vue3 ts项目的搭建过程感兴趣的朋友一起看看吧。
目录
项目初始安装路由器和pinia安装ESlinteslint vue规则需要切换安装更漂亮的安装stylelint安装husky安装commitlint总结参考：最近比较闲，准备着手为下一个新项目搭建基础模板。在建造的过程中有许多问题。现在我总结一下给你用。
项目初始化
这个项目已经被vite启动了，所以是按照vite官方的顺序启动的。使用此处的命令行构建基本项目：
yarn创建vite my-vue-app - template vue
执行后的项目结构如下：
然后我们开始装东西(腥风血雨要开始了！)。
安装router和pinia
安装这两个的过程比较简单。基本上按照官方文件就可以了。接下来，执行命令：
纱线添加vue-路由器@4
使用以下代码在根目录中创建一个新的路由器文件夹和一个新的index.ts文件：
从“vue-router”导入{ createRouter，createWebHashHistory，RouteRecordRaw}
从“@/components/HelloWorld.vue”导入HelloWorld
const routes:ArrayRouteRecordRaw=[
{
路径：“/”，
名称：“HelloWorld”，
组件：HelloWorld
}
]
const router=createRouter({
history: createWebHashHistory()，
路线
})
导出默认路由器
这需要在main.ts文件中引入。
从“vue”导入{ createApp }
从导入路由器。/路由器
从导入应用程序。/App.vue
createApp(应用程序)。使用(路由器)。挂载(#app)
此时，当您执行代码时，您会发现控制台报告一个错误，如下所示：
这是因为vite无法识别@这个其实和webpack一样的配置。只是重定向它。打开vite.config.ts并添加以下内容：
从“vite”导入{ defineConfig }
从“路径”导入路径
从 @vitejs/plugin-vue 导入vue
//https://vitejs.dev/config/
导出默认定义配置({
插件：[vue()]，
解决：{
别名：[
{
查找：“@”，
替换：path.resolve(__dirname， src )，
},
],
},
})
这个时候还是不行，因为不能识别路径，需要安装@types/node。
纱线添加@类型/节点-D
同时需要在tsconfig.node.json中添加compilerOptions.allowSyntheticDefaultImports: true，如下：
编译器选项:{
allowSyntheticDefaultImports:true
}
这将解决之前的错误。接下来是pinia的安装：
纱线添加针
Pinia可以说是vuex现在的潮流，一定要尝尝。将store和index.ts文件添加到文件中。
从“pinia”导入{ defineStore }
const use store=defineStore( main ，{
状态：()={
返回{
计数器：0，
名称：“无线电mM”
}
},
动作：{
重置(){
这个。$reset()
}
}
})
导出默认用户存储
里面的语法我大致用过，非常好用。这里只展示最简单的例子。就在main.ts再介绍一遍
从“vue”导入{ createApp }
从导入路由器。/路由器
从“Pinia”导入{ createPinia}
从导入应用程序。/App.vue
createApp(应用程序)。使用(createPinia())。使用(路由器)。挂载(#app)
安装ESlint
可以说安装eslint是一件比较麻烦的事情。看了很多文章，参考了别人文章的配置，但途中还是踩了不少坑。有了插件只知道怎么装，不知道要解决什么问题。所以这次我的展示比较长，目的是介绍每个插件的用途。走吧。运行命令：
npx eslint -初始化
按照以下步骤完成基本eslint配置：
选择ESlint用途
什么模块引入方式
什么框架使用eslint
是否使用typescript
运用环境选择
选择流行规则
选择Airbnb规则
用什么类型文件做载体
是否开始安装
用什么工具安装
完成上述步骤后，您可以看到一个eslintrc.js文件已经添加到项目中，但这只是开始。接下来我们来看看各种坑。
eslint的vue规则需要切换
错误报告如下。您可以在app.vue中看到它，这表明需要一个根元素。其实vue3已经不需要写根元素了。
此时，您需要修改eslintrc.js文件，如下所示：
模块.导出={
环境：{
浏览器：没错，
es2021:对，
vue/setup-compiler-macros :true，//这是为了与API(如defineProps)兼容
},
扩展：[
-插件：vue/基本，
插件：vue/vue3-推荐，//与vu E3语法规范兼容
airbnb-base ，
],
解析器： vue-eslint-parser //这个插件实际上是用来解析模板语法的。
语法分析选项：{
ecmaVersion:“最新”，
解析器：“@typescript-eslint/parser”，
sourceType:“模块”，
},
插件：[
vue ，
@typescript-eslint ，
],
规则：{
},
};
这时候再看其他文件，就会出现换行式的错误。这是因为eslint是unit的默认，也就是lr行的结尾。现在，您可以直接在eslintrc.js文件中添加新规则：
linebreak-style:[error ， windows]
注意，如果加了之后没有效果，需要重启vscode才能有效果，实际上很多新加的东西都需要重启才能有效果。此时整个项目没有错误，然后进行下一步。
安装prettier
单纯安装eslint只会提示你代码格式错误，不会帮你自动修改。这个时候你就需要这个更漂亮的来实现这个功能。执行以下命令：
纱线添加eslint-plugin-beauty eslint-config-beauty-D
此时，需要再次修改eslintrc.js文件，如下所示：
模块.导出={
环境：{
浏览器：没错，
es2021:对，
},
扩展：[
插件：vue/vue 3-推荐，
airbnb-base ，
插件：更漂亮/推荐，
],
语法分析选项：{
ecmaVersion:“最新”，
解析器：“@typescript-eslint/parser”，
sourceType:“模块”，
},
插件：[
vue ，
@typescript-eslint ，
],
规则：{
更漂亮/更漂亮:错误，
linebreak-style:[erro ， window]
},
};
下面是对这些插件的解释：ESLint-plugin-pretier。这个插件主要是禁用一些不必要的与pretier冲突的eslint规则。当lint-config-pretier不符合pretier规则时，它会报告一个错误，可以通过eslint - fix命令来修复这个错误。
同时，您需要添加prettierrc.js文件并编写以下内容：
模块.导出={
PrintWidth: 80，//每行代码的长度(默认为80)
TabWidth: 2，//每个制表符相当于多少个空格(默认为2)
UseTabs: false，//是否用tab缩进(默认为false)
SingleQuote: true，//使用单引号(默认为false)
Semi: false，//在声明的末尾使用分号(默认为true)
Trailcomma: es5 ，//对多行使用尾随逗号(默认为无)
BracketSpacing: true，//在对象的文字量的大括号之间使用空格(默认为true)
布雷克萨梅林：错，
ArrowParens: avoid ，//只有一个参数的arrow函数的参数是否用括号括起来(默认为avoid)
Endfline: crlf ，//添加该属性时，可以删除eslint中的linebreak-style。
}
然后我们可以向package.json添加一个新命令：
脚本:{
lint:script: eslint - ext。js，jsx，ts，tsx - fix -安静。/,
}
然后就可以运行命令，感受两大巨头的加持(没有代码，完全没有感觉):
纱线纤维：脚本
当然，这只能在运行命令时修复。我们想要的是代码在保存的时候可以自动格式化。此时，我们需要在vscode的setttings.json文件中添加以下内容：
[vue]: {
editor . default formatter : es benp . prettle-vs code ，
editor.codeActionsOnSave: {
source.fixAll.eslint: true，
},
},
同时，需要为您的vscode安装两个插件，如下所示：
这时候保存的时候就可以格式化代码了。当然，我们也可以让这些错误格式在运行项目时报告错误。安装插件
yarn add vite-plugin-eslint -D
然后在vite.config.ts文件中添加：
从“vite-plugin-eslint”导入viteEslint
//具体配置
{
插件：[
//省略其他插件
viteEslint()，
]
}
现在你可以试着重新启动项目，ESLint的错误已经能够及时显示到命令行窗口中了。
-补充- 在你运行纱线纤维：脚本命令的时候，会出现下面的错误：
这里需要一个个问题慢慢解决，首先是导入/扩展问题，主要是爱彼迎规范中的配置是跟我们某视频剪辑软件项目不一样的，所以在埃斯林特规则中需要加入下面：
导入/扩展:[
错误，
忽略重新打包，
{
js:“从来没有",
jsx:"从不",
ts:"从不",
tsx:"从不",
},
],
而解决依赖位置报错问题导入/无无关依赖项，其实他这个报错是错误的，但是同样解决，同样是新增规则：
import/no-externally-dependencies :[ error ，{ devDependencies: true }]，
接下来是比较麻烦的导入/否-未解决，这个参考的国外友人的配置解决的。
首先需要安装插件：
yarn add-D eslint-import-resolver-type脚本
接下来需要在。eslintrc.js文件中添加如下(和rules同级):
设置：{
导入/解析器：
类型脚本：{}，//这会将rootdir/tsconfig.json加载到埃斯林特
},
},
关于这个配置其实还有射流研究…版本的解决办法，可以参考这个网站最后展示。eslintrc.js文件
模块。导出={
环境：{
浏览器：没错，
es2021:对，
vue/设置-编译器-宏：真的，
},
扩展：[
插件：vue/vue 3-推荐，
airbnb-base ，
插件：更漂亮/推荐，
],
解析器： vue-eslint-parser ，
语法分析选项：{
ecmaVersion:"最新",
解析器：" @typescript-eslint/parser "，
源类型："模块",
},
插件：[vue ， @typescript-eslint]，
规则：{
更漂亮/更漂亮:错误，
linebreak-style: [error ， windows]，
导入/扩展:[
错误，
忽略重新打包，
{
js:“从来没有",
jsx:"从不",
ts:"从不",
tsx:"从不",
},
],
import/no-externally-dependencies :[ error ，{ devDependencies: true }]，
},
设置：{
导入/解析器：
类型脚本：{}，//这会将rootdir/tsconfig.json加载到埃斯林特
},
},
}
安装stylelint
这个就是样式的格式化插件，不废话直接安装：
纱线添加样式线头样式棉绒-更漂亮样式lint-配置-更漂亮样式棉绒-配置-凹槽-订单样式lint-配置-标准样式lint-配置-标准-scss样式lint-config-推荐-vue -D
同样的需要新建。stylelintrc.js文件，写入以下内容：
模块。导出={
//注册stylelint的较美丽插件
插件：[ stylelint-beauty ]，
//继承一系列规则集合
扩展：[
//标准规则集合
stylelint-config-standard ，
//标准规则集合的半导体色敏传感器版本
stylelint-config-standard-scss ，
//样式属性顺序规则
stylelint-config-recess-order ，
//接入较美丽规则
stylelint-config-appeller ，
样式棉绒-更漂亮/推荐，
stylelint-config-recommended-vue
],
//配置规则
规则：{
//开启较美丽自动格式化功能
更漂亮/更漂亮：没错，
//"非空源":空//样式不能是空
}
};
再次同样的，需要在设置。数据文件中添加配置，目标同样是为了保存文件自动格式化。
[vue]: {
编辑。默认格式化程序“:”是benp。漂亮-对比代码，
editor.codeActionsOnSave: {
source.fixAll.eslint: true，
“真的”
},
},
stylelint.validate: [css ， less ， scss ， vue]，
这时候可以在package.json文件添加命令：
脚本：{
lint:style : style lint-fix \ src/* */* .{css，scss}\
}
其实跟上面的埃斯林特的命令差不多。当然，同样有运行时报错的插件，如下：
yarn add @ Amat lash/vite-plugin-stylelint-D
然后在轻快地配置文件中添加如下的内容：
从“@ Amat lash/vite-plugin-stylelint”导入viteStylelint
{插件：
[
//省略其他插件
viteStylelint({
//排除对某些文件的检查
exclude: /node_modules/})，
]
}
显示最终文档的内容：
从“vite”导入{ defineConfig }
从“路径”导入路径
从 @vitejs/plugin-vue 导入vue
从“vite-plugin-eslint”导入viteEslint
从“@ Amat lash/vite-plugin-stylelint”导入viteStylelint
导出默认定义配置({
插件：[
vue()，
viteEslint()，
viteStylelint({
//排除对某些文件的检查
排除：/node_modules/，
}),
],
解决：{
别名：[
{
查找：“@”，
替换：path.resolve(__dirname， src )，
},
],
},
})
同样，您可以在vscode中安装以下插件。
安装husky
这个安装主要是针对卡点的。在提交信息时，将检查代码格式，以确保统一的在线代码规范。执行以下命令：
纱线添加husky -D
立即初始化huskynpx husky安装，以husky作为项目开始前的步骤，如下：{
脚本:{
//将在安装npm依赖项后自动执行
后安装: husky安装
}
}
添加Husky hook并在终端执行以下命令：npx Husky add.husky/pre-commit NPM-run-lint
注意window系统下双引号内容需要连接符，mac系统则不需要，那么您将在。项目根目录的husky目录，包含git提交前要执行的脚本。现在，当您执行git commit时，您将首先执行npm run lint脚本，然后您将在通过lint检查后正式提交代码记录。但是会出现这样的情况，就是我只修改了一个文件，这个检查还是全检，所以这个时候就需要另外一个工具了。Lint-staged用于解决上述的全尺度扫描问题，它只能检查Lint存放在临时存储区的文件，大大提高了代码提交的效率。
纱线添加-D皮棉-分级
然后在package.json中添加以下配置：
lint-staged :
**/*.{js，jsx，tsx，ts}: [
npm运行lint:脚本，
git添加
],
**/*.scss: [
npm运行lint:style ，
git添加
]
}
接下来，我们需要在Husky中应用lint-stage，回到。husky/预提交脚本，并用以下脚本替换原始npm运行lint:
npx -无绒布-暂存
这样，我们实现了代码提交时的增量Lint检查。
安装commitlint
不知道你有没有碰到过。当你在一个团队中工作，当你的同事提交代码时，只使用“提交”这个词来提交信息！不知道他改了什么功能或者新需求，或者改了什么bug！这时候就要规范提交资料了！
yarn add commit link @ commit link/CLI @ commit link/config-conventi on-D
接下来，创建一个新的commitlintrc.js:
module . exports={ extends:[ @ commit link/config-conventi on ]}；
这个插件提交的规范主要由两部分组成，即类型和主题。的常见类型值包括：
专长：增加新功能。修复：修复Bug。杂务：一些不影响功能的变化。单据：特指对单据的修改。Perf:性能优化。重构：代码重构。测试：添加一些测试代码等等。接下来，我们将把commitlint的功能集成到Husky的hook中，并在终端执行以下命令：
npx哈士奇补充。HUSKY/commit-msg npx-no-install commit link-eHUSKY _ GIT _ PARAMS
然后我们就可以完成提交信息的规范。当提交的信息不符合规范时，提交的操作将被终止并提示错误。到目前为止，我们已经完成了这个从零开始的建设项目。
总结
这个构建过程中没有安装css处理插件，但是在vite中安装sass和less相对简单。比如sass可以直接跑纱加sass (本文其实很多插件都是以sass为模板安装的)，所以这次我踩了这里的坑。我期待着下一次旅行。仓库地址
参考：
《深入浅出vite》
从0开始，我将带你携手共建一套标准化的Vue3.x项目工程环境。
这就是这篇关于从头开始构建vite vue3 ts规范的基本项目的文章。有关构建vite vue3 ts项目的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。