一个过了菜鸟期的前端在单独用Vue开发项目时遇到一些菜鸟级的问题

原创 壹個玖零後 随笔 vueJs 825阅读 2018-08-03 18:07:20 举报

以前都是和团队一起做开发,所以项目的架构都是由同事搭建的,在搭建的过程中遇到的坑都被同事填了,我只要安心把我负责的部分完成就行,,,这一次我自己单独负责一个项目,本着锻炼个人能力的初衷,我坚持从零开始做这个项目,可是我没想到Vue里面的坑这么多,下面是我在做项目的时候遇到的一些坑:

1、项目中导入jQuery

很小的一个坑,以前都没注意,原来安装好jQuery后不是直接导入就能用的,还要进行配置,在webpack.base.conf.js中配置



代码:

2、项目中导入bootstrap

安装好bootstrap之后在main.js中调用bootJ和bootCSS,这里有一个小的坑,就是当你自己有设置项目的背景颜色,最后在打包项目的时候你自己设置的背景颜色和一小部分样式会被bootCSS里面的样式覆盖掉,这个可能和打包文件的顺序有关,,所以我建议把bootCSS放到和你调用其它样式的地方一起调用。

2.1、安装boot导入项目中之后就一定能用吗,在这里我又遇到了一个坑就是,你还要安装popper.js之后boot才起作用,popper要安装到dependencies目录下;

3、在开发的过程中需要向后台请求数据,在Vue框架下,我们一般使用axios,在这里又有一个坑,那就是axios 用post方式传递参数时,后端接受不到,,所以还要引入qs才行,一般我们装好axios时候就已经附带了qs,具体的代码如下:

3.1、axios 用post方式传参,还有一种办法也能行,从网上看到的

3.2、axios 用get方式传参时,我们前端是不需要配置就能传,但是后端需要配置才能接收;我自己在本地用PHP测试的时候发现如果不配置,get传递也无法接收,还有无法跨域访问,,这个配置做后端的应该都知道,所以就不多说了,,,

PHP实现跨域访问:

4、crypto-js aes 加解密

首先在项目中安装npm install --save crypto-js;
然后在项目中引入crypto-js,具体代码如下:

最初引入crypto-js使用时不是上面这样的,我是按照官网介绍去使用的,然后就遇到坑了,最后花了我好长时间才解决这个问题,具体过程我就不说了,总之一言难尽,下面是我遇到的BUG:
一开始打印出[object object],这样取不到值,然后我用JSON.parse()去解析,结果报错了

我在网上搜了一下这个错误,网上有说是因为本地缓存的问题导致的,但是用localStorage.clear()清了缓存后,发现还是报错,,,,,,

5、在Vue框架中使用vue-clipboard2实现复制粘贴功能

先安装依赖:npm install --save vue-clipboard2;
在main.js中引入

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
一定要在vueJS后面引入
使用方法:

以上是我在网上找到的别人介绍的如何使用vue-clipboard2,步骤很简单,我按照上面的介绍使用后发现并没有报错,而且点击复制按钮之后还提醒我复制成功,,,,,我再按Ctrl+v进行粘贴,然后坑出现了,,,,发现根本无法进行粘贴,,,我又在网上找其它的使用方法,发现网上写的使用方法基本一样,这就让我郁闷了,最后在GitHub上看到这一句话:

把这段代码加上去果然可以实现复制粘贴的功能了,我不知道为什么在网上搜到那么多人的博客都没有写这个,可能这个是后来新加的吧,具体代码如下:

6、vue兼容IE

1.安装babel-polyfill (npm install babel-polyfill --save-dev)
2.webpack.base.conf.js中配置,配置如下:

评论 ( 5 )
最新评论
呵呵弟 2018-08-24 14:10:42 5F

还得 说一下 axios 基本上都会用到拦截器
然后 vuecli 是可以跨域的

壹個玖零後 3F 2018-08-09 17:52:43 4F

liuyan55 2018-08-07 15:01:50 3F

在index.html引入不行吗?

1024649179 1F 2018-08-06 13:45:43 2F

应该是使用到了某些jQuery的插件

呵呵弟 2018-08-06 13:13:44 1F

vuecli项目,引jq是用啥?