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

一、组件的划分创建

方法一：

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

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

 

方法二：

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

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

 

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

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

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

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

在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。

 

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

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

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

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

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

 

四、命名

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

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

如果组件以驼峰式命名，那么导入的时候，需要用分隔命名加载到Dom中，否则不生效

 

五、调试神器

安装Vue调试神器 vue-devtools

 

六、slot的应用 

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

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

 

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

当要调用后台对接接口的时候，如果后台人员还没给到接口时，这时可以自己创建一些测试数据，先保证前端交互是正确的。一般后端会给的接口规范。按照后端给的接口规范，可以做一些测试数据。一般有固定的写法，首先要返回给前端一个状态(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"
        }

    ]
}

 

 八、开发环境中，跨域，

在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代理转发。

 

 九、分页

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

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

 

十、升序降序

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

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

 

 十一、插件 vue-infinite-scroll  制作分页

用法，可以去npm中搜索，里面会有应用方法

 

 十二、关于导航选中样式

<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;
 }

 

 

持续更新中......