【九月打卡】第9天 【2022版】Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战 第十讲

课程名称： Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程章节： 实战项目 - 项目的联调，测试与发布上线

主讲老师： Dell

课程内容：

今天学习的内容包括：
config/index.js/proxytable中书写前后端数据来源。

enpack-dev-server 默认不支持ip打开项目，
因此需要在package.json配置中进行添加：–host 0 0 0 0 结果如下：
“dev”: “webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js”,

打包上线：

1. npm run build

2. 将生成的dist文件中的内容给后端

后端放在根目录下

调试project路径：

config/index.js 中

build -> assetsPublicPath: ‘/project’

课程收获：

10.1 心得：

config > index.js 修改
proxyTable:{
’/api’: {
target：“http://****” //服务器端口
}
}

10.2 心得：

1.先看控制台输出
2.console.log
3.设置断点
一般按照顺序进行执行，设置断点甚至看程序逻辑是最后的方法

10.3 心得：

问题1：在城市列表中，在侧边字母列表上滑动时，页面会跟着动。
解决方法：prevent阻止拖动的默认行为，防止页面跟着拖动
@touchstart.prevent=“handleTouchStart”

问题2：部分安卓手机会出现白屏
原因：低版本android不支持promise
解决方案：需要安装babel-pollyfill，判断如果没有promise包，则自动安装。
操作：

1. npm install babel-polyfill --save
2. main.js中引入: import ‘babel-polyfill’

如还不行，则是手机不支持webpack-dev-server，则只能打包上线后再测试。

如出现list不能滚动的情况，切换一下测试机，并加上：

updated () {
    this.scroll.refresh()
  },
  activated() {
    this.scroll.refresh()
  },

package.json
修改 scripts 中的 dev --host 0.0.0.0
"dev": “webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js”,
可以在本地调试 ，手机可以通过 内网访问， window 命令行中 ifconfig 查看本机ip地址

10.4 心得：

进入项目目录：npm run build。生成一个dist目录（就是要上线的内容）。
后端放到了根路径下，即可访问。
一般后端会创建一个单独放前端代码的目录，这样就需要更改vue打包编译的根目录，要在前端config/index.js的bulid中，将assetPublishPath：’/目录名称’，目录名称需要和后端创建的目录名称相同

在我们的文件夹中运行 npm run build生成一个"dist"打包文件，把他给到后端的同事，放在后端的根目录了，此时只需运行后端的地址即localhost就可以运行我们网站了
若把文件移动到了后端根目录的一个文件夹下，则需要修改assetsPublicPath的路径

10.5 心得：

manifest.js：配置文件
vendor.js： 各个组件文件共用的js
app.js：所有页面的业务逻辑
不需要同时加载业务逻辑js,
如果项目大的话超过mb，按需加载：在router/index.js文件。 component: ()=>import('@/pages/Home/Home')，所有组件都可以异步加载。如加载首页project2.js,列表页project3.js 反之，项目小，就不需要使用异步加载，反而会降低项目性能

/css/app.xxx.css.map，sourcemap 文件，调试压缩后的css

/css/app.xxx.cs，所有文件用到的css

/js中

manifest.js webpack打包生成的设置文件

vendor.xxx.js中放置各个页面和组件共用的代码

app.xxx.js所有业务逻辑

异步组件主要是app.xxx.js

需要什么加载什么

修改/router/index.js：

去除直接引入在component地方使用箭头函数

component: () => import(’@/pages/home/Home’)

app.js很小的话没必要拆分，请求一个HTTP请求代价远比加载js代码高

10.7 心得：

后续学习：
1.仔细过一遍vue官方文档
2.vue-router(项目中使用了核心的一点内容）
3.vuex
4.vue服务器端渲染 （新手可以放后一点）
5.官方生态系统插件（官网学习→Vue资源）
6.vue源码可以去GitHub通过commit追溯开发的过程