目录结构
├── app.html // 模版文件
├── assets //静态资源,会被webpack打包
├── backpack.config.js //打包配置,一般不会动
├── build //nuxt打包后自动生成
├── components //封装的公共业务组件
│ ├── home //首页公共组件
│ ├── icon-item.vue //首页图标
│ ├── layouts //布局公共组件
│ ├── native-upload.vue //原生上传组件
│ ├── pickTime.vue //时间选择控件
│ ├── pop-select.vue //多仓库选择控件
│ ├── title-item.vue //公共标题
│ └── web-upload.vue //web端图片上传
├── config //公共配置文件
│ ├── axios.js //axios请求库配置文件
│ └── index.js
├── layouts //nuxt布局文件,全局
│ ├── default.vue
│ ├── error.vue //错误处理
│ └── nav.vue
├── lib //公共类
│ ├── bridge.js
│ ├── math.js
│ └── utils.js
├── middleware //nuxt中间件
│ └── auth.js
├── my-theme //主题文件
│ └── index.less
├── nuxt.config.js //nuxt主配置文件,修改代理等配置在此,具体配置参考nuxt.js官网
├── pages //业务页面
├── plugins //插件
│ ├── apis.js //全局请求接口封装
│ ├── bridge.js //H5和原生交互(非必须,需要和原生端沟通一致)
│ ├── http.js //请求库封装this.$http.xxx
│ ├── qs.js //请求参数处理this.$qs.xxx
│ ├── quill.js //富文本
│ ├── ui.js //UI库
│ └── utils.js //工具类this.$Utils.xxx
├── server
│ ├── api
│ ├── apis.js //后端请求接口,调用this.$APIS.xxx
│ └── index.js
├── static //静态资源,不会被打包
│ ├── css
│ │ ├── them1.css //主题文件1
│ │ └── them2.css //主题文件2
│ ├── fonts
│ ├── img
│ └── js
└── store //nuxt已经封装vuex状态管理
├── index.js
└── sale.js
技术栈
vue、nuxt(基于vue框架)、vant(ui框架基础)、axios(http请求库)、querystring
概念梳理导图
启动步骤
- 1.安装依赖包:npm install
- 2.本地开发:npm run dev
- 3.打包静态html文件:npm run dist
常见问题记录
- 1.
换皮肤方案
查看app.html,搜索--themeColor
,页面会根据url里的themeColor动态改变主题色
//url->http://localhost:3000?themeColor=red
document.body.style.setProperty('--themeColor', getQueryVariable('themeColor'));
其他文档
- 前端换肤 https://juejin.im/post/5ca41617f265da3092006155#heading-3