Vue项目中遇到的问题（总结）

Vue项目中遇到的问题：

使用vue读取本地json文件：

      需要安装vue-resource插件，然后使用它的$http.get来读取json文件                                                 
     json文件应该是必须放在static目录下

• npm install vue-resource
• 在main.js文件中添加：

import VueResource from 'vue-resource' Vue.use(VueResource) 
import VueResource from 'vue-resource' Vue.use(VueResource)

• 最后读取json数据：

   this.$http.get('static/map/china.json').then(res => {
          console.log("json数据为:" + res.body)
   //此处的res对象包含了json的文件信息和数据，我们需要的json数据存在于body属性中
      })

将代码在浏览器显示（Vue使用Highlight.js高亮代码）

1.搜索Highlight官网

  npm i highlight.js

2.创建下面文件夹 highlight + highlight.js(注意层级关系)

3.在js文件中放入如下代码：

// highlight.js 代码高亮指令
import Vue from 'vue';
import Hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

let Highlight = {};
Highlight.install = function (Vue, options) {
// 先有数据再绑定，调用highlightA
Vue.directive('highlightA', {
       inserted: function(el) {
       let blocks = el.querySelectorAll('pre code');
       for (let i = 0; i < blocks.length; i++) {
           const item = blocks[i];
           Hljs.highlightBlock(item);
       };
   }
});
// 先绑定，后面会有数据更新，调用highlightB
   Vue.directive('highlightB', {
   componentUpdated: function(el) {
       let blocks = el.querySelectorAll('pre code');
       for (let i = 0; i < blocks.length; i++) {
           const item = blocks[i];
           Hljs.highlightBlock(item);
           };
       }
   });
};
export default Highlight; 

4.在main.js 中

// highlight.js代码高亮指令
import Highlight from './assets/highlight/highlight'
Vue.use(Highlight);

5.在具体要显示的页面里面 就OK了
在要使用高亮的地方使用v-highlight指令

6.如果想改背景颜色的风格

动态组件is的使用

$ajax()的用法

Vue框架里使用Swiper

1.下载swiper

	npm install swiper

2.引入swiper

import Swiper from ‘swiper’;
import ‘swiper/dist/css/swiper.min.css’;

3.使用swiper

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../../static/images/ad1.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../static/images/ad2.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../static/images/ad3.jpg" alt="">
      </div>
    </div>
  </div>

mounted里面调用

   mounted(){
       var mySwiper = new Swiper('.swiper-container', {
         autoplay:true,
         loop:true
       })
     },

注意:

如果想要从后台请求图片放上去 new Swiper要写在网络请求成功的函数里面，否则不会出来数据。

六、自己手动封装插件

上面的index.js文件里面写法如下：

main.js中：

在自己需要用的地方（直接写）

如果定义的插件比较多，，可以有如下写法：