nuxt概念梳理

记录nuxt概念梳理

Posted by kung on August 27, 2020

目录结构

├── 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