2025年vue安装脚手架命令(vue3脚手架安装)

vue安装脚手架命令(vue3脚手架安装)svg xmlns http www w3 org 2000 svg style display none svg

大家好,我是讯享网,很高兴认识大家。



 <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

讯享网

项目创建

小讯
上一篇 2025-05-12 08:42
下一篇 2025-05-23 10:00

相关推荐

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