VUE-H5-TEMPLATE

Vue-h5-template project takes small shopping mall as the basic content demonstration, uses Vue3.0+Typescript+Vant to build the basic Template for mobile H5 page development, and provides some general solutions and extended functions.

Basic instructions

  • documentation
  • Computer preview
  • The back-end service
  • Update log

Preview of some pages:

Home page Business details extension

Mobile phone scan preview:

Install and use

# Project download
# Cloning projects slow? Try replacing 'github.com' with 'github.com.cnpmjs.org' in the address
$ git clone [email protected]:Ewall1106/vue-h5-template.git

Install and run
$ yarn & yarn dev
Copy the code

features

The development of specification

  • EslintCheck and error
  • PrettierUniform code Style
  • StyleLintStyle style
  • TypescriptSyntax support

Initial Configuration

  • vwMobile adaptation
  • cssThe preprocessor
  • Browser default style handling
  • promisedemotion
  • fast-clickTo deal with

Basis function

  • vuex4.0Packaging and use
  • vue-router4.xRoute configuration and permission control
  • axios+typescriptEncapsulation and request
  • composition-apiAnd the customhooksencapsulation

Component related

  • vantInstallation and use of components
  • scrollHorizontal scroll component encapsulation
  • svg-iconIcon component

Other aspects

  • vscodedebugging
  • .

The directory structure

| - public / / public | - config / / config configuration file | - SRC | | - API / / interface list | | - assets / / picture resources | | | - components / / public components | - hooks / / global hooks | | - the ICONS / / SVG icon | | - the router / / routing | | - store / / vuex | | - styles / / public style | | - types / / File statement | | | - utils / / tools function | - views / / various pages | | | - / home/front page | | | | - components / / local components | | | | - hooks / / local hooks | | | | -- index. Vue / / page | | | - user / / user | | | -... / /... . | | - App vue / / main page | | -- main. Js / / entry documents. | - eslintrc. Js / / eslint configuration. | - prettierrc / /. | - prettier configuration Babel. Config. Js / / Babel configuration file | -- changelog. Md / / update log | -- package. Json / / client rely on | -- postcss. Config. | - js / / postcss configuration file Vue. Config. Js / / vue related configuration file | -...Copy the code

Catalog Description:

  • directorycomponentsAll common components undertsxDevelop.
  • directoryviewsIs used by business components undersfcIn the form of development.
  • Why is that? For common components, usetsxDevelopment is more flexible, rendering performance is better, and testing is easier. For business components, usesfcCan be played out in a better wayvueThe advantages of simplicity.