商城项目操作参考

::: TIP 框架使用

商城客户端 VUE + YDUI + Axios

商城管理系统 layUI + jQuery + Ajax

:::

一、文件目录

assets  //静态文件images、js、css
components   //公用组件
rounter   //路由配置
store   //状态管理、公用变量管理
utils
   ---base.js  //公用方法
   ---http.js  //请求接口配置
views  //模板

二、由原有方式修改为打包方式

以首页为例
1、css和img直接复制到assets目录，公用layer、swiper已做封装。
2、页面图片调取方式

3、修改页面跳转<a> 为 <router-link :to="{ name: 'My', query: { uId: 123456}}">
    取数据  this.$route.query.uid

4、引入js、css，公用的css、js已经在main.js中引入
import router from "../router";
import Swiper from "../assets/js/swiper-3.4.2.min.js";
import "../assets/css/swiper-3.4.2.min.css";
import "../assets/css/index.min.css";
import MainNav from "@/components/MainNav.vue";  //公用组件

5、将原有js代码复制到模板

export default {
  name: "Index",

  这里。。。。

}

5.1、修改data:{} 为
data(){
  return {
     这里为定义
  }

}
5.2、修改接口调取方式  axios.post(url,param) 为 this.$post(url,param) 其他同理。接口地址规则/g/list（商品列表）实际传入/dapi/g/list，登陆/s/login  实际传入/uapi/s/login（注：dapi除登陆以外的路由，uapi登录、验证登录、退出登录路由）
5.3、修改layer公用方法 layerBlack('用户不存在'); 为 this.layerBlack('用户不存在');

6、常用静态变量已存入store/index.js中，调取时用 this.$store.state.provanceCodeArr  省会编号代码

7, 单VUE页面，引入css时，采用 <style  scoped>@import "../../assets/css/min.css";</style>  方式限定当前

8, script 中引入动静态图片路径，禁止使用相对路径，可https全路径，可require("@/assets/img/index/f-cart-m.png") 处理后使用

9, 组件代码污染全局，打包时出现重复样式表打包问题：

    <style scoped>
      @import "../../assets/css/paylogpub.min.css";
    </style>
    上述写法错误：
    修正为：
    <style scoped src="../../assets/css/paylogpub.min.css"></style>
    主：这样处理页面的样式当父组件里嵌套子组件的时候每个组件样式要放在单独的组件里，假如一起引入会造成子组件的样式是不起作用。

10, 黑白弹框使用yudi的框架，使用方法----
    _this.dialog.toast({mes: '已加入购物车', timeout: 1000});
    _this.dialog.confirm({
        title: ' ',
        mes: '您选择的配送地址，订单中有货物无法配送。',
        opts: [
          {
            txt: '地址更换',
            color: false,
            callback: () => {
              _this.dialog.toast({mes: '你点了取消', timeout: 1000});
            }
          },
          {
            txt: '调整订单',
            color: true,
            callback: () => {
              _this.dialog.toast({mes: '你点了确定', timeout: 1000});
              _this.$router.push({ path: "/cart/" });
            }
          }
        ]
    });
11, 引用组件，修改组件样式，两种方式：1，在组件中<style>css...</style> 2, 在组件外<style scoped>css...</style>

12，网络超时配置 http.js中  //axios.defaults.timeout = 5000;

规则：
    1,代码间隔2个空格