目录

1、Vue.js

2、element Lib下载

3、测试网页

4、资源下载

1、Vue.js

下载网址：

安装 — Vue.js

element page不更新_elementui

2、element Lib下载

下载地址： GitHub - ElementUI/lib: Element release lib

element page不更新_本地化_02

下载后示例：

element page不更新_elementui_03

element page不更新_element page不更新_04

3、测试网页

样式引入

<link rel="stylesheet" href="element_lib/theme-chalk/index.css">

JS引入

<!-- import Vue before Element -->
  <script src="vue.js" type="text/javascript"  charset="utf-8"></script>
  <!-- import JavaScript -->
  <script src="element_lib/index.js" type="text/javascript"  charset="utf-8"></script>
<html>
<head>
  <meta charset="UTF-8">
  <title>古典小说</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="element_lib/theme-chalk/index.css">
</head>
<style>
p{text-indent:2em;
  color:#606266;
  line-height:200%;
 }
 .el-row{
  margin-bottom: 20px;
 }
</style>

<body>
  <div id="app">
    <el-container>
      <el-header>
        <el-row >
          <el-col :span="12"  align="middle">
            <el-link type="primary" href="http://www.gudianxiaoshuo.com" target="_blank">本软件由古典小说网开发，欢迎关注  今日头条号：古典小说  微信公众号：古典小说网</el-link>
          </el-col>
          <el-col :span="12"  align="middle">
            <el-link type="primary" href="http://www.2345.com/?kqq869321632" target="_blank">搜小说</el-link>
          </el-col>
        </el-row>  
      </el-header>

      <el-divider></el-divider>
      <el-row>
        <el-col align="middle">
          <p>水浒传</p>
        </el-col>
      </el-row>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6"> <el-link type="info" href="0001_第一回 王教头私走延安府 九纹龙大闹史家村.html" target="_blank">第一回 王教头私走延安府 九纹龙大闹史家村</el-link></el-col>
          <el-col :span="6"> <el-link type="info" href="0002_第二回 史大郎夜走华阴县 鲁提辖拳打镇关西.html" target="_blank">第二回 史大郎夜走华阴县 鲁提辖拳打镇关西</el-link></el-col>
          <el-col :span="6"> <el-link type="info" href="0003_第三回 赵员外重修文殊院 鲁智深大闹五台山.html" target="_blank">第三回 赵员外重修文殊院 鲁智深大闹五台山</el-link></el-col>
          <el-col :span="6"> <el-link type="info" href="0004_第四回 小霸王醉入销金帐 花和尚大闹桃花村.html" target="_blank">第四回 小霸王醉入销金帐 花和尚大闹桃花村</el-link></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"> <el-link type="info" href="0001_第一回 王教头私走延安府 九纹龙大闹史家村.html" target="_blank">第一回 王教头私走延安府 九纹龙大闹史家村</el-link></el-col>
          <el-col :span="6"> <el-link type="info" href="0002_第二回 史大郎夜走华阴县 鲁提辖拳打镇关西.html" target="_blank">第二回 史大郎夜走华阴县 鲁提辖拳打镇关西</el-link></el-col>
          <el-col :span="6"> <el-link type="info" href="0003_第三回 赵员外重修文殊院 鲁智深大闹五台山.html" target="_blank">第三回 赵员外重修文殊院 鲁智深大闹五台山</el-link></el-col>
          <el-col :span="6"> <el-link type="info" href="0004_第四回 小霸王醉入销金帐 花和尚大闹桃花村.html" target="_blank">第四回 小霸王醉入销金帐 花和尚大闹桃花村</el-link></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"> <el-link type="info" href="0001_第一回 王教头私走延安府 九纹龙大闹史家村.html" target="_blank">第一回 王教头私走延安府 九纹龙大闹史家村</el-link></el-col>
          <el-col :span="6"> <el-link type="info" href="0002_第二回 史大郎夜走华阴县 鲁提辖拳打镇关西.html" target="_blank">第二回 史大郎夜走华阴县 鲁提辖拳打镇关西</el-link></el-col>
          <el-col :span="6"> <el-link type="info" href="0003_第三回 赵员外重修文殊院 鲁智深大闹五台山.html" target="_blank">第三回 赵员外重修文殊院 鲁智深大闹五台山</el-link></el-col>
          <el-col :span="6"> <el-link type="info" href="0004_第四回 小霸王醉入销金帐 花和尚大闹桃花村.html" target="_blank">第四回 小霸王醉入销金帐 花和尚大闹桃花村</el-link></el-col>
        </el-row>



      </el-main>
    </el-container>
    
 

  </div>
</body>

  <!-- import Vue before Element -->
  <script src="vue.js" type="text/javascript"  charset="utf-8"></script>
  <!-- import JavaScript -->
  <script src="element_lib/index.js" type="text/javascript"  charset="utf-8"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {  }
      },
      methods:{
        open (){

          this.$message('右键，选择大声朗读即可');
        }
      },
      mounted(){
        console.log("页面加载完成");
        // this.open();
      }
      
    })

  </script>

</html>

显示效果：

element page不更新_前端_05

4、资源下载

我把本地化 elementUI 上传到资源里了，也可以直接下载