前端项目开发<Vue>

Posted 2023-04-01

参考技术A

说明： 在项目开发中，在一个js或css文件中如果导入其他目录下的相关文件，就需要通过如下方式,
示例：

但如果每次都导入同一目录下的文件，会比较麻烦，就可以通过设置简写路径达到同样的导入效果
配置方法如下，其中key值为自定义的简写名称（如stylePath），value值为配置的路径
示例：

在需要跳转的元素外包裹一层 <router-link></router-link> ，使用 to 语法即可跳转到指定的页面中

实际上，html会将 router-link 渲染成 <a> 标签
这就会导致被 router-link 包裹的元素中的文字显示成 <a> 默认的蓝色样式，可通过如下方式解决：

使用tag将 router-link 标记为 li 标签，这样既保证了 ul 中的子元素为 li ，又保证了html在渲染的时候，不会讲 router-link 渲染为 a 标签

如果某一页面多次被访问，并且其中的数据基本保持不变，则可以使用页面缓存的技术：

注： 当页面被缓存后，生命周期钩子 mounted 方法则只会在第一次进入的时候，执行一次，就不会再执行了。但生命周期钩子方法 activated 方法会每次调用

但如果页面的数据根据传过来的参数来判定是否需要缓存和刷新数据，则可以通过生命周期的钩子 activated 来实现数据的刷新

如果通过 keep-alive 进行页面的缓存，会将其包裹下的路由子页面都会被缓存，假如其中的某一子页面不需要被缓存，则可以通过 exclude 语法将不需要缓存的页面隔离出去，保证其每次都会重新加载请求：

注：

当在一个页面拖动到底部的某个位置的时候，再点击其中的一个元素进入到下一个页面，则进入的这个页面也会被拖到相同的位置，这就造成了多页面的拖动影响

在路由配置中，加入一项 scrollBescrollBehavior ，即每次进行路由切换的时候，让页面的初始位置为指定的x和y值

前端项目通过webpage 启动的，它不支持IP的形式进行页面访问，所以需要修改项目的默认配置项

在项目的根目录下的package.json文件中，进行如下配置：

注： 主页增加了 --host 0.0.0.0

在某些浏览器和手机上不支持一些es6和vue的新特性，就会出现兼容性的问题

通过使用第三方框架库 babel-polyfill 来解决兼容性问题

参考文章： https://blog.csdn.net/crazyfeeling/article/details/70241285

说明：