Vue常见问题总结

1、vue项目搭建

npm install --g vue-cli //安装全局脚手架
npm install //安装依赖包
npm run dev //项目启动
npm run build //代码打包

2、npm下载缓慢，改用淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝镜像安装依赖包：

cnpm install [name]

3、报错信息：babel-runtime/core-js/json/stringify

cnpm install babel-runtime --save-dev

4、vue读取pdf文件

安装vue-pdf

参考链接：https://www.npmjs.com/package/vue-pdf

5、vue读取markdown文件

安装html-loader、markdown-loader

参考链接：https://www.npmjs.com/package/markdown-loader

6、vue在dom中循环判断

<div v-for="todo in todos" v-if="todo.state">{{todo.name}}</div>

7、vue在dom中引入图片

<img src="@/assets/images/logo.png">
<img :src="require('../assets/images/logo.png')">

8、vue引入静态包

在index.html中

<script type="text/javascript" src="static/lib/jquery-1.11.0.min.js"></script>

9、vue打包时图片路径错误

在build/utils.js中

return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //添加
})

 10、vue中设置全局变量的方法

（1）在main.js中，通过prototype设置全局变量/全局对象/全局方法

Vue.prototype.param = {};

（2）在静态js文件中，定义变量，并在index.html中全局引入

<script type="text/javascript" src="static/lib/jquery-1.11.0.min.js"></script>

（3）通过存储变量的方法，例如：localStorage，sessionStorage，jsCookie，Vuex等

11、vue-router使用懒加载

{
    path: '/plan',
    name: 'plan',
    component: () => import('@/views/Plan/Plan.vue')
}

12、vue-router路由跳转

this.$router.push('plan')

13、vue组件调用

详见我的博客：https://www.cnblogs.com/sharealex/articles/9945279.html

14、vue变量解除绑定

在vue中，数组和对象的复制时，使用let b = a，那么b的值会永远随着a的变化而变化

如果想取消两者之间的关联：

let b = JSON.parse(JSON.stringify(a));