创建vue项目

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了使用npm和Vite创建Vue项目的两种方法，以及如何利用npx初始化husky和commitlint来规范Git提交信息。此外，还详细讲解了在不同操作系统下配置gitHook的步骤，并特别提到了安装vantUI框架的注意事项，强调了版本选择对项目的影响。

两种方式

1、npm 创建

npm init vue

2、vite 创建

npm create vite@latest 项目名称 -- --template vue

3、gitHook使用
npx是一个工具，npm v5.2.0引入的一条命令（npx）

//初始化husky
npx husky-init

4、安装commitlist，代码提交规范化
网址：https://github.com/conventional-changelog/commitlint

# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

添加hook

//这句代码只有在liux与mac系统有效
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

//window系统需用下面代码
npx husky add .husky/commit-msg
//上面的代码会在项目中生成一个commit-msg文件，然后在文件中配置
npx --no-install commitlint --edit

例子如下：
在这里插入图片描述

5、安装 vant ui框架

//本应该是不用指定版本的，但是直接安装的版本是vant4.0以上的版本了，
//4.0版本与3.6版本有些组件有比较大区别了,但他俩都是属于vue3版本使用的ui
npm i vant@3.6.4