vue实现分页

实现技术：webpack构建工具：

                  jquery：

                  bootstrap：

                   vue+vue-resource

效果图：

 

我目录结构：

思路是：main1.vue 是index.vue的一个子组件，index.js又引用了index.vue组件，让其在index.html中显示。你也可以使用index.js直接引用main1.vue实现分页

 

主要文件就是这个main1.vue，看懂了就会使用了.(就三个部分，主体显示页面，分页栏，还有vue代码)

main.vue

//头部导航栏 

防止意外，我把其他的代码也贴上吧》

 

index.html

index.js

//import Vue from 'vue'
import Vue from "../node_modules/vue/dist/vue"
//import Vue from 'vue'
import VueRouter from 'vue-router' //导入vue-router
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.css'

import index from './main/index/index.vue'
Vue.use(VueRouter)//手动安装vue-router



var vm=new Vue({
  el:"#app",
 // render:c=> c(index),
 components:{
  index
 }

})
console.log("hello")

 

index.vue

 

webpack.config.js

const path=require('path')
var webpack = require('webpack')
//导入插件：只要是插件都要放到plugind节点那里面去
const htmlWebpackPlugin=require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//这个配置文件，其实就是一个js文件，通过node中的模块操作，向外暴露一个配置对象
module.exports={
   //入口：表示要打包那个文件
   entry:path.join(__dirname,'./src/index.js'),
   //输出相关的配置
   output:{
      path:path.join(__dirname,'./dist'),
      filename:'bundle.js',
   },
   plugins:[
    //  创建一个内存中生成HTML的插件对象
      new htmlWebpackPlugin({
          //指定需要在内存中生成的html模板页面
          template:path.join(__dirname,'./src/index.html'),
          //指定生成页面的名称
          filename:'index.html'
      }),
      new VueLoaderPlugin(),
      new webpack.ProvidePlugin({
         "$": "jquery",
         "jQuery": "jquery",
         "window.jQuery": "jquery"
     })
  ],
      module:{//这个节点配置所有第三方模块 加载器
         rules:[//所有第三方模块的匹配规则
            {test:/\.vue$/,use:'vue-loader'},  
            //\.css$/    使用正则匹配所有以.css结尾的文件
            //用['style-loader','css-loader'] 对css进行处理
            {test:/\.css$/, use:['style-loader','css-loader']   } ,
            //处理图片的loader
            //limit是划分图片是否转化成base64的分界线，大于limit值就会转化成base64格式
            //webpack会把我们的图片的名称改成hash值
            //让打包前和打包后图片名称是图片本名使用参数name
            //我们在写的时候最好使用hash的前八位加上文件名（防止图片替换）
            {test:/\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=146&name=[hash:8]-[name].[ext]'   },
            //处理字体文件的loader
            {test:/\.(eot|ttf|woff|woff2|svg)$/, use:'url-loader'},
            //配置babel来转化该记得es语法
          {test:/\.js$/ ,use:'babel-loader',exclude:/node_modules/},
         
      ]
      }
  

}