vue全家桶搭建前端页面注意细节及遇到的难题

点击访问项目

传送门

先秀一波

vue全家桶搭建前端页面注意细节及遇到的难题

一、使用vue脚手架创建项目
二、插件注册具体细节(以下操作是在 main.js)
三、路由、页面、及其组件配置
四、跳转到同一页面时，页面数据不刷新
五、页面刷新导致 vuex 数据丢失
六、多个请求发送出现相互依赖
七、@功能
八、数据渲染，无法渲染监听事件
九、使用 history 模式上线，导致某些资源访问不到
十、解决第四点埋下的坑
十一、部分效果图
十二、总结

一、使用vue脚手架创建项目

不懂点这里

下载源码

下载相关插件

二、插件注册具体细节(以下操作是在 main.js)

element-ui （ PC端组件库）

// main.js文件中
import 'element-ui/lib/theme-chalk/index.css'
// 按需加载
import { Message } from 'element-ui'
import { Button } from 'element-ui'
// 在 html 中直接<el-button></el-button> 只要注册即可无需挂载
Vue.use(Button)//挂载 在js环境下使用直接可这样使用 this.$message.error("错误");
Vue.prototype.$message = Message

具体使用可以看这里

axios （ ajax 的封装）

import axios from 'axios'// 在请求地址前加api (如请求localhost:8080/a 实际请求路由 localhsot:8080/api/a)
axios.defaults.baseURL = '/api';
// 设置超时时间
axios.defaults.timeout = 8000;// axios 挂载 vue 原型上 后期直接使用 this.axios 直接使用即可
Vue.prototype.axios = axios// 发请求时直接 this.axios.get("/a", {params});

bootstap （响应式布局）

import 'bootstrap/dist/css/bootstrap.min.css'

vue-cookie （操作 cookie ）

import VueCookie from 'vue-cookie'
// 注册
Vue.use(VueCookie)
// 挂载
Vue.prototype.$cookie = VueCookie;

vue-lazyload ( 图片懒加载 )


import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad,{loading:'/imgs/loading-svg/loading-bars.svg'
})// 使用时 <img v-lazy="ph.mainImage" alt="" />

vue-router （ vue 路由）

// 路由引入时要在其他css样式引入后,避免造成上线后，样式未生效。
import router from './router'
new Vue({router,render: h => h(App),
}).$mount('#app')

// router.js
import Vue from 'vue'
import Router from 'vue-router'
const router = new Router({routes: [] // 配置路由 注意：是 routes 不是 router
})
export default router

vuex （状态管理）

import store from './store/index'
new Vue({store,render: h => h(App),
}).$mount('#app')

index 是 vuex 的入口文件。具体配置

三、路由、页面、及其组件配置

前期在搭建静态页面及组件时，并没有发现太大的问题，这里就不细写，懂的都懂，哈哈哈哈！
主要是路由这部分，一个权限的问题：没有登录前是不能进入到主页面的。
查阅 vue 官方文档 vue-router 核心插件库中有 router.beforeEach() 方法（全局前置守卫）可以解决这个问题。
接下来就是判断是否登录的标志，标志是在后端开发的时候，用户登录成功，后端给 cookie 设置一个好密钥。因此只要判断 cookie 中的某一个值是否存在即可。

/*to(去哪里) from(从哪里来) next(只是一个方法而已，说白了就是让其通过或者跳转到相对应路径)
*/
router.beforeEach((to, from, next) => {if (to.path == "/login") {next()} else if (to.path == "/register") {next()} else {if (Cookie.get(constant.COOKIE)) {next()} else {next('/login')}}
})

在这里我遇到一个问题：在 main.js 中我将 vue-cookie 挂载到 vue 实例上了，所以我自然而然的使用 this.$cookie.get(constant.COOKIE); 但这样写是不对的。因为在 router 中 this 并不是指向 vue 的，因此只能将插件直接在 router.js 中直接引入。

import Cookie from 'vue-cookie'

还有一点：后端设置 cookie 时 httpOnly 不能设置为 true, 否则前端是无法获取到的。

四、跳转到同一页面时，页面数据不刷新

业务描述：用户可以进入到其他用户主页面时，出现了数据不更新的情况。

// router.js
path: '/Otherprofile/:username',

查阅官方资料得到的结论是：vue跳转到同一路径时，路由参数改变，数据不更新，最主要的地方是：引用了相同的组件的时候，页面就无法更新。
网上的解决方法有很多：
方案一：watch监听路由参数变化（不包括传递的参数），并重新渲染（谨慎选择）；
方案二：provide和inject结合使用(推荐使用)；
方案三：直接在 app.vue 中的 <router-view> 添加一个 key 值

<template><div id="app"><!--通过绑定一个fullPath, 直接识别页面路径的完整地址，当地址发生改变（包括参数改变）则重新渲染页面。--><router-view :key="$route.fullPath"></router-view></div>
</template>

而我一开始选择的方案是：结合方案一以及方案二的一部分原理：父组件通过监听 route 的变化，一旦发生改变，这些方案二的相关操作。
由于前期代码不断修改后，没有保存代码，具体代码无法展示。
但这种方法，到后期上线时，出现了 bug：进入到其他人主页后，跳转到个人首页时，无法访问到编译后的 js 文件（第十点会具体提到）。
最终我选择了方案三。

五、页面刷新导致 vuex 数据丢失

业务描述：由于对于当前用户的信息在前端是比较重要的（很多请求都需要用户信息的凭证）。
因此想到了用 vuex 状态管理。
到了后期，又出现了一个问题，业务需要时不时刷新页面，这就导致了 vuex 数据丢失。
查阅资料有一个解决方法：结合 sessionStorage 以及监听器。
监听刷新时，将 vuex 数据存入到 sessionStorage 中。

// 根据业务，我在 app.js中设置监听器window.addEventListener("beforeunload", () => {const state = this.$store.state;window.sessionStorage.setItem("store", JSON.stringify(state));});init() {let store = window.sessionStorage.getItem("store")if (store) {this.$store.dispatch("saveUserInfo", JSON.parse(store).userInfo);// 避免造成污染sessionStorage.removeItem("store"); } else {// 获取用户信息this.axios.get("/user/isLogin").then((res) => {if (res) {this.$store.dispatch("saveUserInfo", res);}});}}

但项目完成后，细想其实这个功能使用 vuex 是不对的，vuex 只要用在一个变量值可以控制多个页面的行为，或者多个变量控制一个页面。
比如：项目中有一个功能点（进入到其他人主页是判断当前用户是否关注了此人）使用了vuex 我认为就适合。
所以，最开始用户信息就应该使用 sessionStorage 即可。

六、多个请求发送出现相互依赖

业务描述：用户进入到主页面时，需要发送多条请求，但后俩条请求的参数时基于第一条请求来的数据（第一条获取用户信息，二三条通过用户信息获取关注人以及粉丝信息）。
解决方法：（1）直接链式调用、（2）根据用户需求在发送二三条请求（用户要查看粉丝或者关注人时，触发点击事件在发送请求。）

七、@功能

业务描述：发布微博时可以@自己所关注的用户。
可以原生开发，但为了开发速度，我使用用了一个插件 vue-at，完全符合业务要求。

<at-ta :members="members" name-key="fullName"><template v-slot:item="s"><img :src="s.item.picture" /><span>{{ s.item.nickName }} - {{ s.item.userName }}</span></template><el-inputid="textarea"type="textarea"class="element-editor resizeNone"v-model="fullcontent"rows="7"></el-input>
</at-ta>

import AtTa from "vue-at/dist/vue-at-textarea";
export default {name: "inputitem",data() {return {members: [],fullcontent: "",};},
}

八、数据渲染，无法渲染监听事件

业务描述：发布微博可以@用户，向后端发送请求获取的是纯文本，因此前端需要用正则表达式来匹配，进而将其嵌套到a标签中，用户点击时可以跳转到相应个人主页。
正则表达式匹配成功，并且添加了点击事件，但使用 {{content}} 是无法渲染的。

后来想到一种方法直接在 a 添加 href 属性，可以跳转，但在个人主页我是通过检测 router 路由的变化，来更新页面的，而使用 href 是无法同步到 router 的路由的，因此这个方法被否决了。

查阅 vue 官方文档，看到可以使用渲染函数 render

render(createElement) {// contentList 是你要渲染的内容数组（已经通过正则表达式匹配过的）return createElement(contentList)},

但在我的项目中，很难去使用，要考虑到很多问题，比如说我如何将对象数组中的某一个字段（内容）放到同一个数组中，渲染完毕后，又如何分发到对应对象数组中，这部分应该是可以实现的。（本人基础也不是很牢固，需要去查资料才可以实现）

九、使用 history 模式上线，导致某些资源访问不到

项目如果不是部署在根路径下的就必须使用 history 模式。比如localhost:8080/login（根路径下） localhost:8080/weibo/login （子路径下）
不使用 history 模式时，会在访问路径下添加 #
而我主要出现的问题是在，首先对于前后端代码上线我是零基础的，一直处在摸索中。

第一个处错的地方：router.js 中的 base 值应该是你 nginx 中的访问路径值，我写成了项目在服务器的地址。（我项目地址和访问地址是不一样的）
第一个地方改好后，运行项目是可以访问的，但又报了一个错误
查资料，可能是使用了 history 模式下，导致某些资源访问不到。这个地方花费了最长时间。
其实只要修改 vue.config.js 即可，内部就是修改 webpack 的打包配置。但我从来没有接触过 webpack 。也造成很大困难。
项目只要修改 publicPath: ‘./’，即可。按我的理解是访问静态资源是在上一层目录，不使用 history 就正常访问，如今你加了子路径，因此再访问静态资源时需要跳转到上一层。
还有一点访问一些静态资源尽量放在 public 文件夹中，而不是放在 assets 文件中，防止打包时造成不必要的错误。
在 app.Vue 全局引入时

十、解决第四点埋下的坑

前面几点解决后，上线部署，此时出现报了这个错误

不是一运行就报错的，而是进入到其他人主页后，跳转到其他页面就报这个错误。
意思是没有访问到编译后的 js 文件。

后来看了请求的地址和其他页面请求的地址，看到了多了一个 /Otherprofile 路径。
报着试一试的态度访问了 /weibo/js/chunk-07853974.d3c97a8d.js

很明显是路径访问错了，然后接下来：我就去看了路由的配置。

很明显：其他人主页是要进入到俩层路径的，而主页要进入一层路径。但这还不是最关键的。最关键的是 vue.config.js 中静态访问路径是访问上一级目录。

因此导致说：在一层路径下的上一级目录（/weibo）可以被 nginx 识别到，进而访问到 js 文件。而二层目录的上一级目录是 Otherprofile,不是 weibo，得是上上层目录。
因此解决方法是，进入到其他人主页不能使用俩级路径。
此时修改 router.js 两种方式：

path: '/Otherprofile',
path: '/:username',

我选择前者，然后再跳转路由时添加 username 即可：

 this.$router.push({path: "/Otherprofile",query: {otherName,},});// 获取参数this.$route.query.otherName

此时，第四点使用的监听路由变化就不能生效了，因为这里访问的路径都一样，只是传递的参数不一样，因此只能选择方案三。
如果选择后者，按理论也可以使用之前的方案，但在我的项目中，出现问题，有时会跳转到其他页面。
启动项目：
在本地是不会出现这个问题的，重新打包也会出现这个问题。但是，不知道被我怎么弄的，现在就没有出现这个问题。
查资料说是需要配置webpack，webpack 我也不熟，而且在 vue.config.js 中的配置方法跟 webpack 还有点不一样。
最终这个 bug 就不了了之。

十一、部分效果图

主页
广场页
设置页
个人主页

十二、总结

不足的地方：
原先设计是发布微博是可以添加图片，后期完善是想可以上传视频的。设想是利用阿里OSS（Object Storage Service）对象存储服务，原理及使用都会了点这里，但使用图片链接直接在浏览器访问时，是不能访问的，只会下载到本地电脑。而要实现这个功能，需要绑定域名，且域名需要备案，备案目前一直还过不了。
体会：
在写前端代码时遇到很多问题，一度真的想放弃，但过了几天还是埋头苦干。遇到问题就查资料，有时是自己粗心大意写错代码，有时是真的有坑，开发前期不知道，没有去避开这些坑，总体上开发过程中磕磕碰碰。特别是上线打包部署这部分，本身就对这部分一点基础都没有，就是摸着石头过河，一步步试。

vue全家桶搭建前端页面注意细节及遇到的难题相关推荐

使用vue全家桶搭建的vue小说阅读器，已部署到服务器可预览
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接请使用浏览器打开此链接 http://39.96.55.152(由于域名需要备案用的是ip地址),里面的小说接口调用的是追书神器, ...
使用vue全家桶搭建的vue小说阅读器，已部署到服务器可预览。
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接 http://39.96.55.152(由于域名需要备案用的是ip地址),里面的小说接口调用的是追书神器,然后我把里面的vip和收费 ...
vue全家桶搭建后台系统（小菜鸟篇一）
一.前言一直在vue的门边徘徊的小菜鸟终于下定决心来继续深入学习啦(
vue全家桶+Echarts+百度地图，搭建数据可视化系统
本文章篇幅略长,内容有点多大佬可根据目录选择性查阅新人可一步步来阅读 1 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未 ...
vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
vue全家桶+Echarts+百度地图，搭建数据可视化系统（项目）
vue全家桶+Echarts+百度地图,搭建数据可视化系统 1. 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未接触过Ech ...
Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...
使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(1.环境配置、实现登录功能)
1.前言技术栈:Vue全家桶+Element.ui组件库+Axios 功能:具有登录.配置个人信息.修改个人头像.发布评论.发布动态等功能话不多说,先看成品动图,也可点击此链接进行 ...
基于Vue全家桶制作的的高仿美团APP
美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...

vue全家桶搭建前端页面注意细节及遇到的难题

vue全家桶搭建前端页面注意细节及遇到的难题

一、使用vue脚手架创建项目

二、插件注册具体细节(以下操作是在 main.js)

三、路由、页面、及其组件配置

四、跳转到同一页面时，页面数据不刷新

五、页面刷新导致 vuex 数据丢失

六、多个请求发送出现相互依赖

七、@功能

八、数据渲染，无法渲染监听事件

九、使用 history 模式上线，导致某些资源访问不到

十、解决第四点埋下的坑

十一、部分效果图

十二、总结

vue全家桶搭建前端页面注意细节及遇到的难题相关推荐

最新文章

热门文章