vue 部分页面使用rem vue页面实现

转载

mob6454cc65110a 2024-06-04 01:23:20

文章标签 vue 部分页面使用rem vue Vue ico bootstrap 文章分类 机器学习人工智能

实现技术：webpack构建工具：

jquery：

bootstrap：

vue+vue-resource

效果图：

vue 部分页面使用rem vue页面实现_vue 部分页面使用rem

我目录结构：

vue 部分页面使用rem vue页面实现_Vue_02

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

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

main.vue

//头部导航栏 
<template id="main1">
  <div>

    <!-- 主体界面 -->
    <div>
      <ul v-for="item in list" :key="item.id" class="padding_ul">
        <div class="box_p">
          <div class="img_float">
            <img
              src="http://pic30.nipic.com/20130619/9885883_210838271000_2.jpg"
              alt
              width="42px"
              height="42px"
            />
          </div>

          <div class="detals_float">
            <h4>
              <a href="#">{{item.title}}</a>
            </h4>
            {{item.reply}}个回复 · {{item.viewcount}}次浏览 · {{item.issueDate}}
          </div>
        </div>
      </ul>
    </div>

    <!-- 分页栏
    需要一个页数：pageNum
    需要一个总页数：total
    <span class="sr-only">(current)</span>
    -->
    <div>
      <nav aria-label="...">
        <ul class="pagination">
          <li @click="getInfo(currentPage-1)">
            <span>
              <span aria-hidden="true">«</span>
            </span>
          </li>
          <!-- 不知道为么报红，但是没有错 -->
          <li v-for="value in pageNum">
            <span @click="getInfo(value)">
              {{value}}
              <span class="sr-only">(current)</span>
            </span>
          </li>

          <!-- class="disabled" aria-hidden="true" -->
          <li @click="getInfo(currentPage+1)">
            <span>
              <span aria-hidden="true">»</span>
            </span>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import Vue from "../../../node_modules/vue/dist/vue.js";
import VueResource from "vue-resource";

Vue.use(VueResource);
// HTTP相关
Vue.http.options.emulateJSON = true;
Vue.http.options.crossOrigin = true;
// 日期过滤器
Vue.filter("dataformat", function(msg) {
  //function中的第一个参数被固定死了
  var y = msg.year();
  var m = msg.getMonth() + 1;
  var d = msg.getDate();
  return y + "-" + m + "-" + d;
});

export default {
  created: function() {
    this.$http
      .get(
        "http://127.0.0.1:3000/getInfo?pageNum=" + 1 + "&pageSize=" + 10 + ""
      )
      .then(function(result) {
        console.log(result.data[0]);
        this.list = result.data;
      });
  },
  data() {
    return {
      pageNum: 6,      //
      pageSize: 10,    //设置当前页显示多少条记录
      currentPage: 1, //当前页数，默认设置为零
      list: [
        {
          id: 1,
          headimg: "http:",
          title: "修复标题不能为空问题",
          reply: 10,
          viewcount: 20,
          issueDate: new Date(),
          urls: "https"
        },
      
      ]
    };
  },
  methods: {
    // 当点击 分页栏的123456时 自动获取数据
    //
    getInfo(ClickNum) {
      console.log(ClickNum);
      if (ClickNum >= 1 && ClickNum <= this.pageNum) {
        this.$http
          .get("http://127.0.0.1:3000/getInfo?pageNum=" + ClickNum)
          .then(function(result) {
            console.log(result.data[0]);
            this.list = result.data;
          });
        this.currentPage = ClickNum;
      } else {
        alert("没有" + ClickNum);
      }
    }
  }
};
</script>








<style scoped>
.padding_ul {
  padding: 0;
  margin: 0;
}
.box_p {
  padding: 10px;
  padding-left: 0;
  margin-left: 0;
}
.img_float {
  float: left;
  margin-right: 10px;
}
</style>

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

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ncc论坛</title>
   
    <style>
    .bg{
      
      /* background-color: aqua; */
            
    }
    </style>
</head>
<body>
    <div class="bg">
    <div id="app">
    <index></index>
    </div>
    <!-- <div class="main1"></div> -->
</div> 
</body>
</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

<template>
 
  <div class="zhengti_them">
    <!-- 导航栏 -->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
            aria-expanded="false"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">ncc社区</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search" />
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>

          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#">个人github</a>
            </li>
            <li>
              <a href="#">面试题</a>
            </li>
            <li class="dropdown">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
              >
                个人信息
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Action</a>
                </li>
                <li>
                  <a href="#">Another action</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li role="separator" class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>

    <!-- 下面是页面主体部分 -->
    <div class="main">
      <div class="page-header">
        <h1>
          <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
          <small>ncc论坛</small>
        </h1>
      </div>
      <div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active">
            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">最新</a>
          </li>
          <li role="presentation">
            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">30天最热</a>
          </li>
          <li role="presentation">
            <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">7天最热</a>
          </li>
          <li role="presentation">
            <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">更多情况</a>
          </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">
            <div class="main1">
            <main1></main1>
            </div>
          </div>
          <div role="tabpanel" class="tab-pane" id="profile">
             <main2></main2>
          </div>
          <div role="tabpanel" class="tab-pane" id="messages">
             <main3></main3>
          </div>
          <div role="tabpanel" class="tab-pane" id="settings">
             <main4></main4>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import $ from "jquery";
import Vue from "../../../node_modules/vue/dist/vue.js"
import "bootstrap/dist/js/bootstrap.min.js";
// import mytopBar from './topBar.vue'


$("#myTabs a").click(function(e) {
  e.preventDefault();
  $(this).tab("show");
});
$('#myTabs a[href="#profile"]').tab("show"); // Select tab by name
$("#myTabs a:first").tab("show"); // Select first tab
$("#myTabs a:last").tab("show"); // Select last tab

$("#myTabs li:eq(2) a").tab("show"); // Select third tab (0-indexed)
import main1 from './main1.vue'
import main2 from './main2.vue'
import main3 from './main3.vue'
import main4 from './main4.vue'

 export default {
components:{
  main1,main2,main3,main4
}
 }

</script>

<style>
.zhengti_them{
  background-color: #EFEFEF;
}
.index_main {
  background-color: #efefef;
}
.main {
  background-color: #fff;
  margin-top: 31px;
  margin-left: 2%;
  margin-right: 2%;
  padding: 19px;
}
.main{
  padding: 50px;
}
</style>

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/},
         
      ]
      }
  

}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。