详解搭建一个vue-cli的移动端H5开发模板_vue搭建移动端h5项目 - CSDN文库

3 浏览量更新于2023-03-03 评论 3 收藏 55KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解搭建一个详解搭建一个vue-cli的移动端的移动端H5开发模板开发模板

简介简介

vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板，其中已经搭建好基本的开发框架，可帮助您实现快速开发。技术

栈：vue + vux + axios + less

源码地址：https://github.com/Michael-lzg/vue-mobile

功能功能

搭建项目目录

配置 css 预处理器

配置 UI 组件库 vux

解决移动端适配

配置页面路由缓存

axios 请求封装

工具类函数封装

toast 组件封装

dialog 组件封装

底部导航组件封装

列表页 demo

表单页 demo

搭建项目目录

按如下文件目录搭建项目框架

src 主要源码目录

|-- assets 静态资源，统一管理

|-- components 公用组件，全局组件

|-- javascript JS相关操作处理

|-- ajax axios封装的请求拦截

|-- utils 全局封装的工具类

|-- datas 模拟数据，临时存放

|-- router 路由，统一管理

|-- store vuex, 统一管理

|-- views 视图目录

配置配置 css 预处理器预处理器

1.安装依赖

npm install less less-loader --sava-dev

2.在 build/webpack.base.conf.js 里参照如下代码进行配置

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader"

}

配置配置 vux

1.安装依赖

npm install vux vux-loader --save

2.在 build/webpack.base.conf.js 里参照如下代码进行配置

const vuxLoader = require('vux-loader') //把vux-loader引入

module.exports = vuxLoader.merge(webpackConfig, {

//把新旧配置进行merge（放到页面最底部）

plugins: ['vux-ui'] })

3.局部注册使用

<group>

<cell title="title" value="value" />

</group>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38730201

粉丝: 4
资源: 924

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈