使用vue.js出现的问题

发表于 更新于

vue介绍

vue是一个前端框架，引入相应的js文件就可以了，和其他第三方框架集成也很简单，主要是解决前端大量操作dom元素的问题，前后端分离出现后，
html相比较jsp是非常不错的选择，但是html对于数据的处理和获取异常麻烦，所以vue解决了前后端分离静态资源对于数据方面的问题，并且不像
angular和react那样编写麻烦，所以有很多人都在用。

引入Vue后，发现vue功能不能用

引入的代码是这个

1
<script src="https://unpkg.com/vue"></script>

也可以在官网下载vue.js文件引入

主要是我在使用的时候，打开页面发现根本不起作用，所以我在网上百度了一下，发现很多都是答非所问，我又找了正确的源码来看，发现打开后可以用，说明不是电脑问题，
那么就一定是html文件里面出现了问题，我在找了一个半小时的问题所在后，发现了问题所在：

创建Vue对象的时候，一定要Vue首字母大写，不然就出错，当时脑抽了，对象名没有检查。

将vue的代码保存到js文件，然后html再引入后，发现动画效果的js文件不起作用

我当时引入后，发现动画的js文件没有作用，肯定是引入vue的js文件有问题，因为前一秒都是好的，引入后就出错，肯定是它的问题，我试着将引入的vue的js文件换到了
最先引入的位置，打开页面可以了，所以在引入vue的js文件的时候，一定要先引入，至于原因，我也不知道为什么。

脚手架vue-cli新建文件，下载速度慢的问题

使用 vue init webpack myWeb 命令可以建立vue项目（并且基于webpack），这样我们就可以省去很多时间去构建vue项目，然后一直yes到最后提示说下载方式，我们勾选no，然后我们
可以使用淘宝镜像命令（cnpm命令）去下载，可以让速度变得非常快，我刚开始学的时候发现自己非常sb，每次都是使用自带的，然后等半个小时才构建好项目。

在下载echarts后，配置main.js报错

在使用cnpm命令下载echarts框架后，在main.js使用 

1
2
import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)

代码后，发现运行报错，报错信息是找不到 ./comm/js/myCharts.js 路径下的文件，后面换了种方法就可以了
另一种方法

1
2
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在改静态html文件成vue项目的时候，jquery动画效果导入失效

因为vue里面的动画都是过渡动画，没有现成的，但是重写的话要绑定在data里面的样式参数，很麻烦，我百度了很久都没有一个完美的答案，后面我就想着直接安装jquery插件，然后照搬以前的动画代码
就可以了。首先安装jquery，使用cnpm命令，安装成功后再 webpack.base.conf.js 里的 module.exports 代码下写

1
2
3
4
5
6
plugins:[
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],

然后在相应的vue页面的script下引入 import $ from ‘jquery’ ，然后就可以正常的使用jquery了，就像平时写的一样，没有差别。

禁用eslint规范工具

在刚构建vue项目的时候，vue-cli会提示是否安装eslint插件，如果选择安装的话，就会发现你的很恶心的事，你必须要写的代码和规范一模一样才行，不然会报错，例如数组里面的逗号分隔，后面
必须接着一个空格，前面不能有空格，我真的醉了，不能写分号等等，所以需要禁用eslint的同学可以在 webpack.base.conf.js 里的 module.exports 代码下注释掉

1
2
3
4
5
6
7
8
9
10
const createLintingRule = () => ({
  // test: /\.(js|vue)$/,
  // loader: 'eslint-loader',
  // enforce: 'pre',
  // include: [resolve('src'), resolve('test')],
  // options: {
  //   formatter: require('eslint-friendly-formatter'),
  //   emitWarning: !config.dev.showEslintErrorsInOverlay
  // }
})

注意只注释里面的代码，箭头函数不能注释掉，不然会报错找不到createLintingRule对象。

二级路由没有默认页面

在使用二级路由的时候我们只需要添加如下代码

1
2
3
4
5
6
7
8
9
10
11
{
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
    {
        path: '/',
        component: Chart
    }
    ]
}

就有默认页面了，‘/’ 代表默认加载页面，后面的二级路由页面 path 就不要加 ‘/‘ 符号了。

二级路由的路径叠加问题

使用vue的二级路由后，我在使用router-link的时候，设置跳转路径后，调式时，如果跳转按钮只点击一下，没什么问题，但是如果多次点击同一个跳转按钮，那么
将会出现一个问题，请求路径会叠加，例如：点击一次路径 ‘/home/index’ ，点击两次后 ‘/home/index/index’ ,产生了路径叠加。我的跳转路径设置的是
子路由的路由’/index’。

我解决的方案是在router-link里面的to跳转路径填写完整的路径，就是连着父路由一起填写并且最开始一定要是/开头。
如果开头不填写/那么还是会路径叠加，/路径就是项目源文件路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<router-link class="link" to="/home/leisure"><span>Leisure</span></router-link>


{
  path: '/home',
  name: 'Home',
  component: Home,
  children: [
    {
      path: '/',
      component: Chart
    },
    {
      path: 'leisure',
      component: Leisure
    }
  ]
}

vue文件转到其他电脑，运行install报错

将原本的vue工程文件转移到其他电脑后，运行npm install命令后发现报了个错：

1
Error: Cannot find module 'array-includes'?

这是一个node_modules出错的问题，我们需要将这个文件夹删除后，再次进行安装命令就可以正常的跑起来了。