<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>
讯享网
1 安装配置前准备的工作
讯享网
2准备安装工作
2种方法
一种选择ts
一种不选择ts(基础条件是选择3开发)
讯享网
讯享网
内容讲解
讯享网
创建好进行优化一下
assets文件
讯享网
把assets里面的logo删除
删除app.vue里面的style数据 只保留
讯享网
home文件
home文件
components文件夹
然后把components里的helloworld.vue删除
router文件夹
讯享网
然后在view文件夹里面删除about.vue文件 整个文档删除
vue.config.js文件
然后一个项目就诞生了

Eslink校验
中文官网
Vscode安装相应的插件


1 安装eslint
讯享网
2 生成配置文件
3 修改.eslint.cjs配置文件
讯享网
具体一些其他的可以根据规则来配置
.eslintignore忽略文件
讯享网
运行脚本
讯享网
prettier格式化工具
VS Code安装其对应的插件

安装依赖包
讯享网
同样是在src同级目录下安装.prettierrc.json文件夹
.prettierrc.json添加规则
.prettierignore忽略文件
讯享网
通过npm run lint去检测语法,如果出现不规范格式,通过npm run fix 修改
Vue3 项目中如何关闭 ESLint
关闭eslink
styleLint工具配置
// sass sass-loader可单独安装
讯享网
.stylelintrc.cjs配置文件
官网:https://stylelint.bootcss.com/
.stylelintignore忽略文件 PS根目录创建
讯享网
运行脚本
// 最后配置统一的prettier来格式化我们的js和css,html代码
当我们运行pnpm run format的时候,会把代码直接格式化
husky配置
讯享网
安装Husky
husky官网
lint-staged
讯享网
package.json
在package.json的scripts下中添加如下代码:

pre-commit
在.husky → pre-commit文件中添加想要执行的命令
讯享网
接下来可以进行提交了,提交前会自动对代码进行校验!
commitLint配置
安装
讯享网
创建 commitlint.config.js 配置文件
在husky的配置加入CommitlIint配置,v1.0.1版本以后为HUSKY_GIT_PARAMS,v0.14.3为GIT_PARAMS
讯享网
提交规范
讯享网
commitlint.config.js文件配置
讯享网
统一包管理工具下载依赖
vue3+ts项目
在根目录创建scritps/preinstall.js
讯享网
_src文件夹别名配置
用webpack构建的项目
1 在项目新建vue.config.js,编辑vue.config.js内容如下:
讯享网
使用vite构建的项目
在vite.config.js中进行别名的配置
讯享网
环境变量配置
环境变量配置
讯享网
.env.development
.env.production
讯享网
.env.test
mock模拟数据
mock模拟数据
讯享网
vite.config.js
讯享网
项目创建


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/170675.html