vue + vue-router + mint 开发记录

    Javascript·vue

最近公司的项目正式开始使用 vue 的 cli脚手架进行开发。 开发过程中踩的一些坑,做一个简单的总结。

文件保存目录方面

弄清楚在webpack中的配置里面, /src/assets 是会由webpack自动编译后按照规则输出到/dist,而 /static则会原封不动的复制到 /dist

基于以上原因, 建议项目中的 sass文件、img文件都保存到assets下,对于img文件等的引用使用相对路径即可。
一些开发阶段的demo图片等资源可以存放在 /static 下,用于测试。

关于/src/assets/中的静态资源编译规则,可以参考这里:http://hq5544.github.io/vue-webpack/static.html

router 问题

可以使用

1
2
3
4
<!--方式一-->
<router-link :to="{name: 'enroll', query:{id:1}">
<!--方式二-->
<router-link :to="{name: 'enroll', params:{id:1}}">

第一种方式,参数接收可以使用,地址栏的查询字符串接收。
而第二种方式,需要在路由中设置形如:

1
2
3
{
path: path: '/detail/:id',
}

的方式,在目标页面,使用 this.$route.params.xxx 的方式接收参数。同时,地址栏的表现也会不一样。 第一种地址栏为查询字符串, 第二种为path中设置的格式。
特别的一点, 在提交表单等内容后,若用户点击返回按钮,不想让用户返回到之前的表单页,则可以使用 replace 代替,push,或者在router-link中 增加属性 replace

关于infinite scroll 记住位置的实现思路。

在 router.beforeEach() 中将滚动位置写入localStorage(以页面名称为键名),然后再 router.afterEach() 中,读取并滚动到指定位置。 同时对无限滚动列表开启缓存。
注意: 若启用页面动画,则以上动作将失效。 可以将记住位置 以及 滚动到指定位置的功能放在动画的 回调事件中,达到同样的效果。

关于配合服务端项目,将spa 放入子目录相关的问题

路由使用传统的hash模式,问题较少,但是如果为了更美观的路径以及减少页面跳转参数的复杂度等方面考虑,改为 history模式,将会麻烦许多。 官方给了一个nginx配置的例子,只是针对根目录,实际使用中,一般是要放在子目录的,因此配置较为繁琐,如果理解不明的话,可能会浪费很多时间。下面说一下思路
主要配置参数都在 webpack部分, 来看 /config/index.js 中的几个参数:

  1. 如果需要放在子目录的话,那么 build.assetsPublicPath 必须使用相对目录,即 ‘./‘ 这代表了,输出到dist文件中 assets的引用路径是相index.html的路径,而不是相对于根目录的路径。
  2. 在 /router/index.js 中,所有的路径要统一为服务器端设置的子目录路径,例如,服务器端的路径为 http://www.abc.com/path/to/dist/ 则路由index.js 中的路径也要统一为 /path/to/dist/router-name
  3. 在nginx 配置中,使用转发, 将对应目录下找不到的文件,统一转发到 dist/index.html 只有这样才能找到 vue的路由,从而找到对应视图(这一句很重要,配置不对就会导致打开后页面完全空白)。
    下面是一个 nginx配置的示例:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    server {
    listen 80
    root D:/Webs/path/to/dist;
    index index.html;
    server_name localhost;
    location /your-sub-dir/ {
    try_files $uri $uri/ /index.html last;
    }
    }

关于使用vue 进行跨域请求的问题

其实跨域请求可以通过服务端增加 header allow-access-origion的方式将跨域请求的域添加进来,这样就可以使用axios请求同域一样的方式进行。 如果服务端设置有困难,那及建议的方式是引入 jsonp的 npm包。 具体的可以npm搜索jsonp 查看对应的参数。

关于使用axios 传递表单类型数据的问题

默认的axios发送给服务端的数据为 json类型,需要服务端以实体的形式才能接收到,例如php需要使用 php://input 才能接收到输入流,传统的 get post 无法取到。 如果有些情况下无法获取值,那可以将要发送的json格式通过qs转换为 querystring的方式,然后修改请求的headers,实现代码如下:

1
2
3
4
5
6
7
//先导入qs
import Qs from 'qs'
//在发送的时候修改头部信息。
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
data: Qs.stringify(postData)

关于过渡动画和缓存(keepAlive)问题

可以在过渡动画的回调事件中进行记住列表位置等操作。 如果是无限滚动的列表,可以通过keepAlive来取消重复加载数据的问题。

页阅读量:  ・  站访问量:  ・  站访客数: