Code Monkey home page Code Monkey logo

vue3-base-template-h5's Introduction

开始

删除 package-lock.json 和 yarn.lock

npm intall 和 yarn 各执行一次,生成新的固定版本

约定

Component

所有的 Component 文件都是以大写开头 (PascalCase),这也是官方所推荐的。

但除了 index.vue。

例子:

@/components/BackToTop/index.vue

@/components/Charts/Line.vue

@/views/example/components/Button.vue

JS 文件

所有的.js 文件都遵循横线连接 (kebab-case)。

例子:

@/utils/open-window.js

@/views/svg-icons/require-icons.js

@/components/MarkdownEditor/default-options.js

Views

在 views 文件下,代表路由的.vue 文件都使用横线连接 (kebab-case),代表路由的文件夹也是使用同样的规则。

例子:

@/views/svg-icons/index.vue

@/views/svg-icons/require-icons.js

简介

vue3 h5 的基础通用模板,采用 rem 适配,postcss.config 可以设置设计稿宽度,现在是 750

内置 tailwindcss,由于 tailwindcss 使用的是 rem 为基本单位,所以写宽高字体大小等只能使用 基类-[100px] 的形式,如 w-[100px]、text-[16px]

内置自动导入函数插件 无需手动引入 vue vue-router pinia 的函数

内置自动导入组件插件 无需手动引入 vant 组件

采用 vite 构建,使用 gzip 压缩、rollup 拆分打包

技术栈

  • vue3
  • vue-router
  • typescript
  • pinia
  • scss

UI 框架

  • vant3

  • tailwindcss
  • axios
  • animate.css
  • js-cookie
  • lodash-es
  • nprogress
  • validator

vue3-base-template-h5's People

Contributors

li-0221 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.