Vue项目3、项目中碰到的问题详解

1、组件的划分建立

方法一：

把页面上须要复用的模块，拆分红组件。好比，页面的header、footer、面包屑、弹出框等拆分红组件。因此在src中应该有一个文件夹(components)专门放这些会复用的组件。

页面中不被复用的模块，好比content主体内容。会被作为一个主页面，在这个主页面中会去导入可复用组件组成一个能够被用户浏览的完整网页。因此在src中应该有一个文件夹（views）专门放这些主体页。

 

方法二：

把页面上全部的模块能拆分的都拆分红小组件。那些复用的组件，好比页面的header、footer、面包屑、弹出框等，放入一个文件夹(components)。

其它拆分的小组件，按照页面的名称的不一样，放入以页命名不一样的文件夹，过程：建立一个文件夹（pages），以后建立以页命名不一样的文件夹。好比Home页，除了header、footer，能够把表明主体内容的，展现1内容、展现2内容、展现3内容等放入一个文件夹（home），home中再建立一个Home.vue把这些组件导入进来，组成一个能够被用户浏览的完整网页。

 

2、关于项目静态资源的存放

src目录中有assets文件夹。再src目录外有一static文件夹。那项目中引用的静态资源文件应该如何选择存放位置呢？

assets：资源目录（放置一些图片等），这里的资源会被webpack构建,只支持相对路径形式eg: ../assets/[filename]。更倾向于放置组件（那些能够被复用的模块）中引用的资源（css及img），若是图片足够小会被打包成Base64

static：纯静态资源（不会变更的资源，如图片、字体），不会被webpack构建，必须使用绝对路径引用这些文件eg: /static/[filename]，直接被复制到打包目录。页面中（不被复用的vue页面）应用的资源放在这里。

在咱们实际的开发中，总的来讲：static放不会变更的文件 assets放可能会变更的文件。

 

3、关于项目组件导入资源文件

css导入-->直接能够用import导入。eg：导入base.css。在script中，用 import './../assets/css/base.css' 直接导入。

组件导入-->import NavHeader from '@/components/Header'

注意：import导入文件地址须要加引号（双引号/单引号），import导入文件后，结尾不须要符号（好比，逗号或者分号）

组件导入后，还要定义组件。用components:{Header,Footer} 

 

4、命名

vue的组件的命名支持驼峰命名,不支持链接线命名,使用是用链接线连接名称，包括属性的命名!

Vue局部注册 或者全局注册 组件时，组件定义要用 分隔命名，用驼峰命名是不生效的

若是组件以驼峰式命名，那么导入的时候，须要用分隔命名加载到Dom中，不然不生效

 

5、调试神器

安装Vue调试神器 vue-devtools

 

6、slot的应用 

在复用组件中，使用<slot></slot> ,调用单页中直接写将要代替插槽的内容，好比<span>列表</span>

若是使用多个插槽，就须要给插槽制定名字。好比。复用组件中使用<slot name="list"></slot><slot name="id"></slot>，则单页中写代替插槽内容为，<span slot="list">列表</span><span slot="id">id号</span>

 

7、前端调用后端接口数据

当要调用后台对接接口的时候，若是后台人员还没给到接口时，这时能够本身建立一些测试数据，先保证前端交互是正确的。通常后端会给的接口规范。按照后端给的接口规范，能够作一些测试数据。通常有固定的写法，首先要返回给前端一个状态(status),1表示接收成功，0表示接收失败。而后要返回结果。

我是在static中建立一个goods.json（商品列表信息），而后在里面放一些测试数据。

eg：goods.json

{   //json是一个对象
    "status":"0",     //json中键必须加双引号，值也须要加
    "msg":"WOCUOWU",
    "result":[
        {
            "productId":"0001",
            "productName":"小米1",
            "productPrice":"1100",
            "productImg":"images/1.jpg"
        },
        {
            "productId":"0002",
            "productName":"小米2",
            "productPrice":"1200",
            "productImg":"images/2.jpg"
        },
        {
            "productId":"0003",
            "productName":"小米3",
            "productPrice":"1300",
            "productImg":"images/3.jpg"
        }

    ]
}

 

 8、开发环境中，跨域，

在config中的index.js中跨域代理中设置所要跨域的连接。

proxyTable: {
       '/goods':{
        target: 'http://localhost:3000',
       },
       '/goods/*':{
        target: 'http://localhost:3000',
       },
       '/users':{
        target: 'http://localhost:3000',
       },
       '/users/*':{
        target: 'http://localhost:3000',
       },
       '/users/*/*':{
        target: 'http://localhost:3000',
       }
    }

注意：若在线上环境就不能用proxyTable要用ngix代理转发。

 

 9、分页

前端须要给后台参数  page当前页  pageSize 一页中要展现几条数据   sort排序（1升序，0降序 ）

后台中skip(跳过多少条数据)=(page-1)*pageSize

 

10、升序降序

在dada中定义一个sortFlag=true，将升降序的标签上加上事件，在事件中

sortGoods(){
  this.sortFlag=!this.sortFlag
}

 

 11、插件 vue-infinite-scroll  制做分页

用法，能够去npm中搜索，里面会有应用方法

 

 12、关于导航选中样式

<div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filtershow}">
          <dl class="filter-price">
            <dt>Price:</dt>
            <dd><a href="javascript:void(0)" @click="seleAllP" :class="{'cur':priceCheck=='all'}">All</a></dd>
            <dd v-for="(price,index) of priceFilter">
              <a href="javascript:void(0)" @click="selePrice(index)" :class="{'cur':priceCheck==index}">{{price.startPrice}} - {{price.endPrice}}</a>
            </dd>

          </dl>
        </div>

data () {
    return {
      priceCheck:"all",  //默认选中all
    }
  }

seleAllP:function(){
this.priceCheck='all';
},

 selePrice:function(index){
this.priceCheck=index;
 }

 

 

持续更新中......