1810vue

src/assets 放静态资源 src/components 放组件(基础组件，公共组件) src/views 页面级组件一个组件对应的是一个页面 src/main.js 主入口 src/api api 文件夹 放 ajax 请求

• api 目录
  • index.js

1810mock 后端接口

• 1810mock 目录
  • app.js
  • banner.js
  • goods.json
  • fsfile.js 读写文件用的

Views 目录(页面)

• views
  • Car.vue
  • Home.vue
  • List.vue
  • My.vue

vue 知识点总结

1. () => import('./views/About.vue') 路由懒加载 import() 懒加载
2. 字体图标用法

• 远程引入
• 本地引入 import './assets/font.css';

3. 导航激活样式
   • router-link-exact-active 严格匹配
   • router-link-active / /list 可以配合 router-link 标签加 exact 属性进行严格匹配
4. Props with type Object/Array must use a factory function to return the default value. props 默认值是数组或者对象的使用函数 返回值的形式
5. export 和 import 目录 views/demo.vue api/demo.js

• export 导出的是一个定义 �(接口)
• export 不能导出具体值 export default 可以导出具体值
• export 和 import

export const a = 1;
export const b = 2;
//等价于
const a= 1
const b= 2
export {a,b}
// export 的引入方式1 作为整个对象引入
import * as obj from '/xx';
// export 的引入方式2 解构赋值的方式
import { a } from '/xx'

• export default 和 import

export default 1;
// export default 导出的引入方式
import x from '/xx';

6. async 和 await 异步终极解决方案

• async 表示函数里面有异步，async 的返回值是 promise
• await 通常跟 promise await+ promise 当前 promise 执行的结果
• cors 跨域 nginx webpack

7. ref 的用法

• 写在元素上是获取的原生 dom 元素
• 写在组件上获取的是组件的实例
• this.$refs.你命的名字 判断元素滚动到底部

scorllHeight < scrollTop + clientHeiht + 10;

8. 路由跳转

• route 路由信息对象 router 路由实例
• 事件 this.$router.push()
• router-link tag 用来转化标签名
• (1) 路由跳转 params 传参 需要配置路由 /:id /: 表示必须有但是不固定的值 (2) 如果 params 使用 path 需要用字符串拼接

� //params的案例
 :to="{ name: 'detail', params: { id: item.id } }"
  :to="{ path: `/detail/${item.id}` }"

� //query 用path和name都可以
  :to="{ path: `/detail/`, query: { id: item.id } }"

跨域的方式

1. webpack 代理 vue.config.js

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  }
};

2. cors 跨域 跨域资源共享(后端配置) // post get put delete Restful 风格的接口 post 新增 put 修改 get 获取 delete 删除
3. ngix 反向代理
4. window.name localtion.hash postmessage websocket node 中间层 �jsonp docment.domain(只是二级域名) qq.com vip.qq.com

express 的跨域中间件

npm i cors

插件使用

1. 轮播图插件使用
   • 下载 npm install vue-awesome-swiper --save
   • main.js 增加全局引入
   • 前端 请求数据 - > 前端拿到数据 -> 渲染页面

分页效果

20 1 页 1-5 2 页 6-10 3 页 11-15 4 页 16-20 localhost:3000/list?page=1

1. 上课之前讲下课程内容
2. 切换的时候注意

async await
     await + promise
 promise.then(data)
 data = await promise

��

组件化的好处

� 可复用 可组合 可维护 vue router 什么时候用 query 什么时候用 params

icon 组件封装 购物车 vue vuex filter(过滤器)