vue3 + vite + vantUI搭建h5项目

1.使用vue-cli初始化项目。

根据个人项目需求选择合适的插件。下面为我搭建的过程:

js 复制代码
npm create vue@latest
2.引入vantUI,下载vant
js 复制代码
npm i vant

下载按需引入插件

js 复制代码
npm i unplugin-vue-components -D

配置vite.config.ts,下面代码为在原配置的基础上添加部分。

js 复制代码
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    Components({
      resolvers: [VantResolver()]
    })
  ]
})
3.引入sass,下载sass、sass-loader
js 复制代码
npm i sass sass-loader -D

可以新建一些公共样式文件,存放在styles文件夹下。比如reset.scss,minin.scss,variables.scss等。并将这些文件在样式统一入口引入,设置入口文件为index.scss。

js 复制代码
@import './reset.scss';
@import './variables.scss';
@import './mixin.scss';

配置vite.config.ts

js 复制代码
export default defineConfig({
    css: {
     // css预处理器
     preprocessorOptions: {
      scss: {
        // 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
        // 给导入的路径最后加上 ;
        additionalData: '@use \'@/styles/index.scss\' as *;',
      }
    }
  }
})
4.引入husky

先查看项目是否有.git,如果没有需要生成

js 复制代码
git init

自动配置husky

js 复制代码
npx husky-init

执行后,项目中会生成.husky文件,并且在package.json中生成一条scripts命令。

重新修改pre-commit校验规则,设置只校验提交的代码。下载lint-staged

js 复制代码
npm i lint-staged -D

删除原pre-commit文件,执行下面命令生成新的校验规则

js 复制代码
npx husky add .husky/pre-commit 'npx lint-staged'

制定提交规范,下载@commitlint/cli、@commitlint/config-conventional

js 复制代码
npm i @commitlint/cli @commitlint/config-conventional -D

新建commitlint.config.cjs文件,制定相关规定

js 复制代码
// eslint-disable-next-line no-undef
module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'build']
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]
  }
}

执行下面命令生成校验规则

js 复制代码
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit'
相关推荐
Rhys..1 小时前
ES6是什么
前端·javascript·es6
Jammingpro2 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05156 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI8 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front9 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie9 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀9 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻9 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树10 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔10 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app