一、组件的划分创建

方法一:

把页面上需要复用的模块,拆分成组件。比如,页面的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":"", //json中键必须加双引号,值也需要加
"msg":"WOCUOWU",
"result":[
{
"productId":"",
"productName":"小米1",
"productPrice":"",
"productImg":"images/1.jpg"
},
{
"productId":"",
"productName":"小米2",
"productPrice":"",
"productImg":"images/2.jpg"
},
{
"productId":"",
"productName":"小米3",
"productPrice":"",
"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;
}

持续更新中......

Vue项目三、项目中碰到的问题详解的更多相关文章

  1. Vue通信、传值的多种方式,详解

    Vue通信.传值的多种方式,详解 转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一.通过路由带参数进行传值 ①两个组件 A ...

  2. gvoory脚本中关于HttpClient使用详解实例

    一.gvoory脚本中关于HttpClient使用详解实例 HttpClient:是一个接口 首先需要先创建一个DefaultHttpClient的实例 HttpClient httpClient=n ...

  3. 巨人大哥谈Web应用中的Session(session详解)

    巨人大哥谈Web应用中的Session(session详解) 虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术. ...

  4. java 日志体系(三)log4j从入门到详解

    java 日志体系(三)log4j从入门到详解 一.Log4j 简介 在应用程序中添加日志记录总的来说基于三个目的: 监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析工作: 跟踪代 ...

  5. Ocelot简易教程(三)之主要特性及路由详解

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...

  6. vue-cli 中的 webpack 配置详解

    本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...

  7. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  8. VS2010 Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)

    步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NE ...

  9. 【通信】JDK中的URLConnection参数详解

    JDK中的URLConnection参数详解 来自:http://www.blogjava.net/supercrsky/articles/247449.html 针对JDK中的URLConnecti ...

随机推荐

  1. spring boot web 开发及数据库操作

    推荐网站http://springboot.fun/ 1.json 接口开发 2.自定义 filter 3.自定义 property 4.log 配置 5.数据库操作 6.测试

  2. java正则(贪婪、勉强)

    贪婪.勉强和侵占量词间的不同 在贪婪.勉强和侵占三个量词间有着细微的不同. 贪婪(*, ?, +):读入整个串,从后往前匹配 勉强(*?, ??, +?):从前往后匹配 侵占(*+, ?+, ++): ...

  3. 关联规则之FpGrowth算法

    Aprori算法利用频繁集的两个特性,过滤了很多无关的集合,效率提高不少,但是我们发现Apriori算法是一个候选消除算法,每一次消除都需要扫描一次所有数据记录,造成整个算法在面临大数据集时显得无能为 ...

  4. Derby数据库的使用

    一. Derby数据库平台的搭建 ●  JDK 1.6版本及之后的版本为Java平台提供了一个数据库管理系统,简称Derby数据库.   ●  连接Derby数据库需要有关的类,这些类以jar文件的形 ...

  5. miRNA|housekeeping|RNAi|siRNA|Oncomirs|miRBase|PMRD|TargetScan|miRDeep|miRNA target|seed regions|

    生物信息学-miRNA 转录组的分类: Noncoding RNA可分为负责Regulatory和housekeeping,housekeeping就是组织日常功能miRNA便是Regulatory ...

  6. 关于后端下载后端返回的blob类型文件的下载

    关于后端返回blob类型的文件下载记录,在请求的时候前端设置响应类型 responseType: 'blob', const blob = new Blob([r], {type: r.type}); ...

  7. Pycharm 2019 破解激活方法

    转载:https://blog.csdn.net/guofang110/article/details/87793264 使用破解补丁方法虽然麻烦,但是可用激活到2099年,基本上是永久激活了,毕竟在 ...

  8. JXJJOI2018_T3_catch

    题目描述 Lemon因为偶然的原因,当上了警察局长.而一上任,他就碰到了个大麻烦:追捕周克华. 周克华是人尽皆知的抢劫杀人犯,而就在几天前,他在Lemon辖区内的银行门口,枪杀了一名储户后逃之夭夭.L ...

  9. 第十届javaB(5)

    试题 E: 迷宫 本题总分:15 分[问题描述] 下图给出了一个迷宫的平面图,其中标记为 1 的为障碍,标记为 0 的为可 以通行的地方.010000 000100 001001 110000迷宫的入 ...

  10. Myeclipse 错误An internal error has occurred 解决办法

    1. 给MyEclipse的快捷方式加个参数再重新启动一次.      步骤如下:右键选中快捷方式属性选项,在快捷方式页,目标一项最后加上-clean选项,如"C:\MyEclipse6\e ...