VUE-H5-TEMPLATE
Vue-H5-Template 項目以小商城作為基本的內(nèi)容演示，使用 Vue3.0+Typescript+Vant 搭建 移動端h5頁面 開發(fā)所需的基礎(chǔ)模板，并提供一些通用型的解決方案及擴(kuò)展功能。
基本說明
https://github.com/Ewall1106/vue-h5-template
部分頁面預(yù)覽：
| 首頁 | 商詳 | 購物車 | 我的 |
|---|---|---|---|
 首頁
|
 商詳
|
 購物車
|
 我的
|
安裝使用
# 項目下載
# 克隆項目很慢？將地址中的 `github.com` 替換為 `github.com.cnpmjs.org` 試試
$ git clone git@github.com:Ewall1106/vue-h5-template.git
# 安裝運行
$ yarn & yarn dev
功能特性
開發(fā)規(guī)范
-
Eslint校檢及錯誤提示 -
Prettier統(tǒng)一代碼風(fēng)格 -
StyleLint樣式風(fēng)格 -
Typescript語法支持
初始化配置
-
vw移動端適配 -
css預(yù)處理器 - 瀏覽器默認(rèn)樣式處理
-
promise降級 -
fast-click處理
基礎(chǔ)功能
-
vuex4.0封裝及使用 -
vue-router4.x路由配置及權(quán)限控制 -
axios+typescript封裝及請求 -
composition-api及自定義hooks封裝
組件相關(guān)
-
vant組件的安裝及使用 -
scroll橫向滾動組件封裝 -
svg-icon圖標(biāo)組件
其它方面
-
vscode調(diào)試 - ....
目錄結(jié)構(gòu)
|-- public // public
|-- config // config配置文件
|-- src
| |-- api // 接口列表
| |-- assets // 圖片資源
| |-- components // 公共組件
| |-- hooks // 全局hooks
| |-- icons // svg圖標(biāo)
| |-- router // 路由
| |-- store // vuex
| |-- styles // 公共樣式
| |-- types // 文件聲明
| |-- utils // 工具函數(shù)
| |-- views // 各級頁面
| | |-- home // 首頁
| | | |-- components // 局部組件
| | | |-- hooks // 局部hooks
| | | |-- index.vue // 頁面
| | |-- user // 用戶
| | |-- .... // ...
| |-- App.vue // 主頁面
| |-- main.js // 入口文件
|-- .eslintrc.js // eslint配置
|-- .prettierrc // .prettier配置
|-- babel.config.js // babel配置文件
|-- changelog.md // 更新日志
|-- package.json // 客戶端依賴
|-- postcss.config.js // postcss配置文件
|-- vue.config.js // vue相關(guān)配置文件
|-- ...
目錄說明：
