5. Vue简单问题汇总(持续更新...)

1.Vue项目支持图片、字体等操作

   解决办法：安装url-loader 和 file-loader来支持图片、字体等文件

   安装规则：①cmd命令行进入该项目中

                     ②通过命令，安装url-loader和file-loader

                              npm install --save-dev url-loader

                              npm install --save-dev file-loader

2.Vue项目，图片路径通过参数传递，无法正常显示图片

    解决办法：

              ①将参数使用requrie对图片路径进行引用，这样通过变量传递的就不是字符串，而是图片资源了

                  

              ②创建一个名称为static的文件夹，该文件夹与src目录同级，然后将静态文件放入static目录即可。然后变量就可以不需要require对路径进行引用了，使用普通路径即可

                   

    注意：使用第②种就是不会被url等加载器处理的

               如下图，第一种是通过方法②引入的，

                              第二种是通过方法①require引入的，被当成模块被url-loader处理，加入了hash值

               这个需要看网站本身的性质和具体业务以及个人取舍了，当然也可以混合着用，灵活一点没有死的处理方法！

3.Vue项目报错：Do not use built-in or reserved HTML elements as component id:'title'

 解决办法：这是因为组件的命名和html标签重复导致警告，所以创建组件的时候要注意组件命名与html标签区分开。

4.Vue报错：Cannot read property 'matched' of undefined

解决办法：该错误主要错在VueRouter的配置上。如下图所示

5.Vue中./和@/的区别

       ./ 表示相对路径，具体代表当前目录下的同级目录，遵从的是从后往前找文件。

      @/的意思：表示的是相对路径，因为这个在根目录/build/webpack.base.conf.js文件中@是配置的，可自行修改。

6.WebStrom中，使用@/符，提示："Module is not installed"

解决办法：WebStorm默认无法识别 Webpack 的 alias，需要配置一下。在 Settings > Languages & Frameworks > JavaScript > Webpack 里，WebStorm 应该差不多，把webpack.base.config.js 的路径填进去就行，部分可能需要重启 IDE。

 

---

附：Vue篇目录：

    1.Vue组件之间传值问题                              2.v-model 用在组件中

    3.Vue.js 实战 调查问卷WebApp项目          4.vue-cli + webpack搭建Vue开发环境

    5. Vue简单问题汇总(持续更新...)                 6.Vue组件之间数据通信之Bus总线

    7.Vue-Router导航钩子(附Demo实例)         8.ES6箭头函数与普通函数的区别  

    9.Vuex的使用                                             10.Vuex组件中的mapState、mapGetters、mapMutations、mapActions等辅助函数

   11.组件中调用Vuex的state，getters，mutations，actions，modules的数据传递、传参问题

   12.Vuex命名空间namespaced                   13.Vue axios的使用      

---