vue-cli+elementui搭建單頁面后臺(tái)demo（table,form,router糖耸，組件傳值）（以及中途遇到的 npm打包、axios榔袋，第三方插件等問題）

1、前臺(tái)展示

首頁：

首頁

添加頁：

添加音頻模態(tài)框
添加專輯模態(tài)框

音頻列表頁：

音頻列表模態(tài)框

修改頁：

修改

數(shù)據(jù)統(tǒng)計(jì)頁：

數(shù)據(jù)統(tǒng)計(jì)
數(shù)據(jù)統(tǒng)計(jì) 分類

vue可使用 <script> 引入滩报，

這里使用的是npm vue-cli命令行形式：

代碼

1.代碼結(jié)構(gòu)

代碼結(jié)構(gòu)

2.具體代碼

App.vue 正常引入項(xiàng)目組件

<template>
  <div id="app">
    <bar></bar>
  </div>
</template>
 
<script>
import bar from "./components/Bar";
export default {
  name: "App",
  components: {
    bar
  }
};
</script>
 
<style>
#app .el-table {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
}
.el-table td, .el-table th{
  padding: 1px 0;
}
</style>

main.js 全局環(huán)境引入
注意：css文件引入的位置很重要售睹，決定打包后的自定義 樣式覆蓋問題

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'  
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
 
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router/index.js 路由配置文件

import Vue from 'vue'
import Router from 'vue-router'
import CateSort from '@/components/routerTemplate/CateSort'
import DataAnalysis from '@/components/routerTemplate/DataAnalysis'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'CateSort',
      component: CateSort
    },
    {
      path: '/CateSort/:id',
      name: 'CateSort',
      component: CateSort
    },
    {
      path: '/DataAnalysis',
      name: 'DataAnalysis',
      component: DataAnalysis
    }
  ]
})

自定義主要組件（頁面展示）：

Bar.vue 頭部導(dǎo)航欄 ，主要的含路由的地方

<template>
  <div>
    <el-menu :default-active="this.$route.path" router mode="horizontal">
      <el-menu-item index="1">
        <a href="http:/*****n/index.php" target="_blank">首頁</a>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">{{ check }}</template>
        <el-menu-item index="/CateSort/34">故事</el-menu-item>
        <el-menu-item index="/CateSort/35">兒歌</el-menu-item>
      </el-submenu>
      <el-menu-item>
        <a href="http://******_album.php" target="_blank">待審核專輯</a>
      </el-menu-item>
      <el-menu-item index="/DataAnalysis">數(shù)據(jù)統(tǒng)計(jì)</el-menu-item>
    </el-menu>
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
  </div>
</template>
 
<script>
//el-menu開啟路由時(shí) :default-active="this.$route.path" router   ，路由地址替換index中
export default {
  name: "Bar",
  data() {
    return {
      api_url: "htt******ory.php",
      activeIndex: "4",
      check: '分類'
    };
  },
  methods: {}
};
</script>

catesort.vue 專輯分類列表頁（默認(rèn)展示首頁）

<template>
  <div>
    <el-row class="toolList">
      <el-input size="small" placeholder="請輸入內(nèi)容" v-model="tableInit.keyword" class="input"></el-input>
      <el-button icon="el-icon-search" size="small" @click="searchKeyword()">搜索</el-button>
      <el-button type="primary" size="small" @click="addNew()">添加</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%" height="650" border>
      <el-table-column prop="id" label="ID" min-width="2" align="center"></el-table-column>
      <el-table-column prop="name" label="專輯名" min-width="5"></el-table-column>
      <el-table-column label="封面圖" min-width="3" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.pic" width="50" height="50" class="head_pic" />
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="簡介" min-width="10"></el-table-column>
      <!-- <el-table-column prop="user_num" label="用戶數(shù)" min-width="2" align="center"></el-table-column> -->
      <el-table-column prop="real_num" label="收聽數(shù)" min-width="3" align="center"></el-table-column>
      <el-table-column prop="cate_name" label="分類" min-width="3" align="center"></el-table-column>
      <el-table-column prop="age_name" label="年齡段" min-width="3" align="center"></el-table-column>
      <el-table-column prop="recom" label="排序" min-width="2" align="center"></el-table-column>
      <el-table-column min-width="8" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="openModify(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" @click="mp3List(scope.$index, scope.row)">音頻列表</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 主體表格 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableInit.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="tableInit.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableInit.total"
    ></el-pagination>
    <!-- 頁碼 -->
    <el-dialog
      title="新增音頻/專輯"
      width="50%"
      top="5vh"
      :visible.sync="dialogTableVisible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      :close-on-click-modal="false"
    >
      <UploadForm></UploadForm>
    </el-dialog>
    <!-- 新增dialog -->
    <el-dialog
      :title="dialogModify.title"
      width="50%"
      top="5vh"
      :visible.sync="dialogModify.Visible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      :close-on-click-modal="false"
      :before-close="resetForm"
    >
      <ModifyForm :albumInfo="dialogModify.albumInfo" v-on:childByValue="childByValue"></ModifyForm>
    </el-dialog>
    <!-- 修改專輯dialog -->
    <el-dialog
      :title="dialogMp3List.title"
      width="80%"
      top="2vh"
      :visible.sync="dialogMp3List.Visible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      :close-on-click-modal="false"
      :before-close="resetForm"
    >
      <AudioList :mp3Info="dialogMp3List.mp3Info" v-on:childByValue="childByValue"></AudioList>
    </el-dialog>
    <!-- 音頻列表dialog -->
  </div>
</template>
 
<script>
import axios from "axios";
import UploadForm from "../cateTemplate/UploadForm";
import ModifyForm from "../cateTemplate/ModifyForm";
import AudioList from "../cateTemplate/AudioList";
export default {
  name: "Bar",
  components: { UploadForm, ModifyForm, AudioList }, //新增專輯胯努、音頻頁面
  data() {
    return {
      api_url: "http://*****ry.php",
      tableInit: {
        limit: 10,
        currentPage: 1,
        cate: 34,
        total: 900,
        keyword: "" //搜索關(guān)鍵詞
      },
      tableData: [], //表格數(shù)據(jù)
      dialogTableVisible: false, //模態(tài)框狀態(tài)
      dialogModify: {
        Visible: false, //修改模態(tài)框狀態(tài)
        title: "",
        albumInfo: {}
      },
      dialogMp3List: {
        Visible: false, //mp3list修改模態(tài)框狀態(tài)
        title: "",
        albumInfo: {}
      }
    };
  },
  created: function() {
    var that = this;
    that.tableInit.cate = that.$route.params.id;
    that.changeCateOrPage(1);
  },
  watch: {
    $route(to, from) {
      var that = this;
      that.tableInit.cate = that.$route.params.id;
      that.tableInit.currentPage = 1;
      that.tableInit.keyword = "";
      that.changeCateOrPage(1);
    }
  },
  methods: {
    childByValue: function(childValue) {
      // childValue就是子組件傳過來的值
      this.dialogModify.Visible = childValue;
    },
    //修改模態(tài)框關(guān)閉時(shí)回掉
    resetForm(done) {
      //this.$refs["modifyForm"].resetFields();
      done();
    },
    //刪除功能
    handleDelete(a, b) {
      var that = this;
      that
        .$confirm("此操作將刪除該專輯, 是否繼續(xù)?", "提示", {
          confirmButtonText: "確定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          axios
            .get(that.api_url, {
              params: {
                method: "delete_album",
                id: b.id
              }
            })
            .then(function(response) {
              that.tableData.splice(a, 1);
              if (response.data.ret) {
                that.$message({
                  duration: 1000,
                  message: response.data.msg,
                  type: "success"
                });
              } else {
                that.$message.error(response.data.msg);
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消刪除"
          });
        });
    },
    //搜索功能
    searchKeyword() {
      var that = this;
      that.tableInit.currentPage = 1;
      that.changeCateOrPage(1);
    },
    //顯示新增專輯音頻組件
    addNew() {
      this.dialogTableVisible = true; //默認(rèn)頁面不顯示為false,點(diǎn)擊按鈕將這個(gè)屬性變成true
    },
    //顯示修改專輯組件
    openModify(a, b) {
      var that = this;
      that.$nextTick(() => {
        that.dialogModify.Visible = true; //默認(rèn)頁面不顯示為false,點(diǎn)擊按鈕將這個(gè)屬性變成true
        that.dialogModify.title = "《" + b.name + "》修改";
        that.dialogModify.albumInfo = b;
      });
    },
    //展示mp3list
    mp3List(a, b) {
      var that = this;
      that.$nextTick(() => {
        that.dialogMp3List.Visible = true; //默認(rèn)頁面不顯示為false,點(diǎn)擊按鈕將這個(gè)屬性變成true
        that.dialogMp3List.title = "《" + b.name + "》音頻列表";
        that.dialogMp3List.mp3Info = b;
      });
    },
    //修改每頁條數(shù)
    handleSizeChange(val) {
      var that = this;
      that.tableInit.limit = val;
      that.tableInit.currentPage = 1;
      that.changeCateOrPage(1);
    },
    //翻頁
    handleCurrentChange(val) {
      var that = this;
      that.changeCateOrPage(val);
    },
    changeCateOrPage(page) {
      var that = this;
      axios
        .get(that.api_url, {
          params: {
            method: "get_story_album_list",
            cate: that.tableInit.cate,
            page: page,
            limit: that.tableInit.limit,
            keyword: that.tableInit.keyword
          }
        })
        .then(function(response) {
          that.tableData = response.data.data;
          that.tableInit.total = Number(response.data.count);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style>
.toolList {
  padding-top: 5px;
  padding-bottom: 5px;
}
.input {
  width: 200px !important;
}
</style>

cateTemplate/uploadform.vue 新增頁面
注意：form表單提交時(shí) post方式以及數(shù)據(jù)類型需要調(diào)整調(diào)整 qs

<template>
  <el-form
    :rules="rules"
    ref="form"
    :model="form"
    :hide-required-asterisk="true"
    label-width="80px"
  >
    <el-form-item label="類型">
      <el-switch
        v-model="form.delivery"
        active-text="新增專輯"
        inactive-text="新增音頻"
        @change="typeChange"
      ></el-switch>
    </el-form-item>
    <!-- 操作分類 -->
    <div v-if="form.delivery">
      <el-form-item label="封面圖">
        <el-upload
          class="avatar-uploader"
          accept="image/jpg, image/jpeg"
          :action="api_url"
          :data="{method:'upload',type:'images'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <div
            slot="tip"
            class="el-upload__tip"
            style="line-height: 5px;"
          >注意：請上傳jpg/jpeg類型伶椿，且寬高比為1:1 的圖片</div>
          <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="專輯名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="專輯描述" prop="desc">
        <el-input type="textarea" :rows="2" placeholder="請輸入內(nèi)容" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="分類" prop="album">
        <el-select v-model="form.album" placeholder="請選擇專輯分類">
          <el-option label="故事" value="34"></el-option>
          <el-option label="兒歌" value="35"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年齡段" prop="age">
        <el-select v-model="form.age" placeholder="請選擇年齡段">
          <el-option label="孕期" value="1"></el-option>
          <el-option label="0-3歲" value="2"></el-option>
          <el-option label="3-6歲" value="3"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <!-- 新增專輯 -->
    <div v-else>
      <el-row>
        <el-col :span="7">
          <el-form-item label="專輯名">
            <el-select v-model="album" placeholder="請選擇分類" @change="searchAlbum">
              <el-option label="故事" value="34"></el-option>
              <el-option label="兒歌" value="35"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="album_id" label-width="10px">
            <el-select v-model="form.album_id" filterable placeholder="請選擇專輯">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <el-form-item label="音頻文件">
      <el-upload
        class="upload-demo"
        ref="upload"
        accept="audio/mpeg"
        :action="api_url"
        :data="{method:'upload',type:'mp3'}"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handelSuccess"
        :file-list="fileList"
        :auto-upload="true"
        :multiple="true"
      >
        <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
        <div slot="tip" class="el-upload__tip">注意：多選导狡，音頻文件名即是在app播放列表中音頻名旱捧，請確定好文件名再上傳踩麦！</div>
      </el-upload>
    </el-form-item>
    <!-- 添加音頻 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">立即提交</el-button>
      <!-- <el-button @click="resetForm()">重置</el-button> -->
    </el-form-item>
    <!-- 提交 -->
  </el-form>
</template>
<script>
import { type } from "os";
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      api_url: "http******y.php",
      album: "",
      fileList: [],
      //表單數(shù)據(jù)
      form: {
        name: "",
        desc: "",
        delivery: false,
        imageUrl: "",
        album_id: "",
        mp3_url_arr: []
      },
      options: "",
      //驗(yàn)證規(guī)則
      rules: {
        name: [
          { required: true, message: "請輸入專輯名稱", trigger: "blur" },
          { min: 1, max: 50, message: "長度在 1 到 50 個(gè)字符", trigger: "blur" }
        ],
        age: [{ required: true, message: "請選擇年齡段", trigger: "change" }],
        album: [{ required: true, message: "請選擇分類", trigger: "change" }],
        album_id: [
          { required: true, message: "請選擇特定專輯", trigger: "change" }
        ],
        desc: [{ required: true, message: "請?zhí)顚憣］嬅枋?, trigger: "blur" }]
      }
    };
  },
  methods: {
    //獲取專輯列表
    searchAlbum(cate_id) {
      var that = this;
      axios
        .get(that.api_url, {
          params: {
            method: "get_album",
            cate_id: cate_id
          }
        })
        .then(function(response) {
          that.options = response.data.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //類型修改重置表單值
    typeChange(type) {
      this.$refs["form"].resetFields();
    },
    //封面圖方法
    handleAvatarSuccess(res, file) {
      //this.form.imageUrl = URL.createObjectURL(file.raw);
      if (res.code) {
        this.form.imageUrl = res.data.url;
        this.$message({
          message: res.msg,
          type: "success"
        });
      } else {
        this.$message({
          message: res.msg,
          type: "warning"
        });
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上傳圖片大小不能超過 2MB!");
      }
      return isJPG && isLt2M;
    },
    //音頻方法
    handleRemove(file, fileList) {
      this.form.mp3_url_arr = [];
      fileList.forEach(item => {
        this.form.mp3_url_arr.push({
          name: item.response.data.name,
          url: item.response.data.url,
          dura: item.response.data.dura
        });
      });
    },
    handlePreview(file) {
      console.log(file);
    },
    handelSuccess(response, file, fileList) {
      this.form.mp3_url_arr.push({
        name: response.data.name,
        url: response.data.url,
        dura: response.data.dura
      });
    },
    //提交
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (that.form.delivery && that.form.imageUrl == "") {
            this.$message({
              message: "封面圖不能為空！",
              type: "warning"
            });
            return false;
          }
 
          axios
            .post(
              that.api_url,
              qs.stringify({
                method: "save_story",
                form_data: that.form
              }),
              {
                headers: { "Content-Type": "application/x-www-form-urlencoded" } //post
              }
            )
            .then(function(response) {
              if (response.data.ret) {
                that.$message({
                  duration: 1000,
                  message: response.data.msg,
                  type: "success",
                  onClose: function() {
                    window.location.reload();
                  }
                });
              } else {
                that.$message.error(response.data.msg);
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$message({
        duration: 1000,
        message: "ceshihhhhhhh",
        type: "success",
        onClose: function() {
          window.location.reload();
        }
      });
    }
  }
};
</script>
 
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

cateTemplate/AudioList.vue、modifyForm.vue莫湘、modifyBoxForm.vue 與新增表單相似
音頻 audio標(biāo)簽的使用

      <el-table-column label="音頻" min-width="8" align="center">
        <template slot-scope="scope">
          <audio ref="audio" controls="controls" type="audio/mpeg" :src="scope.row.high_url"></audio>
        </template>
      </el-table-column>

DataAnalysis.vue 數(shù)據(jù)統(tǒng)計(jì)組件逊脯，簡單的列表頁

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" height="650" border>
      <el-table-column prop="day" label="日期" min-width="2" align="center"></el-table-column>
      <el-table-column prop="view_num" label="收聽數(shù)" min-width="5"></el-table-column>
      <el-table-column prop="user_num" label="用戶量" min-width="3" align="center"></el-table-column>
      <el-table-column min-width="5" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="openDetail(scope.$index, scope.row)">詳情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 主體表格 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableInit.currentPage"
      :page-sizes="[50, 100]"
      :page-size="tableInit.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableInit.total"
    ></el-pagination>
    <!-- 頁碼 -->
    <el-dialog
      :title="dialogModify.title"
      width="98%"
      top="1vh"
      :visible.sync="dialogModify.Visible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      :close-on-click-modal="false"
      :before-close="resetForm"
    >
      <LogDetail :day="dialogModify.day" v-on:childByValue="childByValue"></LogDetail>
    </el-dialog>
    <!-- 修改專輯dialog -->
  </div>
</template>
 
<script>
import axios from "axios";
import LogDetail from "../logTemplate/LogDetail";
export default {
  components: { LogDetail},
  data() {
    return {
      api_url: "http://b***ory.php",
      tableInit: {
        limit: 50,
        currentPage: 1,
        cate: 34,
        total: 900,
        keyword: "" //搜索關(guān)鍵詞
      },
      tableData: [], //表格數(shù)據(jù)
      dialogModify: {
        Visible: false, //修改模態(tài)框狀態(tài)
        day: "",
      }
    };
  },
  created: function() {
    var that = this;
    that.changePage(1);
  },
  watch: {
  },
  methods: {
    childByValue: function(childValue) {
      // childValue就是子組件傳過來的值
      this.dialogModify.Visible = childValue;
    },
    //修改模態(tài)框關(guān)閉時(shí)回掉
    resetForm(done) {
      //this.$refs["modifyForm"].resetFields();
      done();
    },
    //顯示修改專輯組件
    openDetail(a, b) {
      var that = this;
      that.$nextTick(() => {
        that.dialogModify.Visible = true; //默認(rèn)頁面不顯示為false,點(diǎn)擊按鈕將這個(gè)屬性變成true
        that.dialogModify.title = '詳情';
        that.dialogModify.day = b.day;
      });
    },
    //修改每頁條數(shù)
    handleSizeChange(val) {
      var that = this;
      that.tableInit.limit = val;
      that.tableInit.currentPage = 1;
      that.changePage(1);
    },
    //翻頁
    handleCurrentChange(val) {
      var that = this;
      that.changePage(val);
    },
    changePage(page) {
      var that = this;
      axios
        .get(that.api_url, {
          params: {
            method: "get_story_log_list",
            page: page,
            limit: that.tableInit.limit
          }
        })
        .then(function(response) {
          that.tableData = response.data.data;
          that.tableInit.total = Number(response.data.count);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style>
.toolList {
  padding-top: 5px;
  padding-bottom: 5px;
}
.input {
  width: 200px;
}
</style>

LogDetail.vue 專輯排行 與 音頻排行組件 主要是兩張表军洼，以及切換日期。

<template>
  <div>
    <el-row class="f_row">
      <el-col :span="2" v-for="(item,i) in dated_list" :key="i">
        <el-button
          v-if="i === check"
          type="primary"
          size="mini"
          round
          @click="changeDay(item,i)"
        >{{ item }}</el-button>
        <el-button v-else size="mini" round @click="changeDay(item,i)">{{ item }}</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="11">
        <AlbumLog :day="detailDay"></AlbumLog>
      </el-col>
      <el-col :span="13">
        <BoxLog :day="detailDay"></BoxLog>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import axios from "axios";
import AlbumLog from "./AlbumLog";
import BoxLog from "./BoxLog";
export default {
  props: {
    day: {}
  },
  components: { AlbumLog, BoxLog },
  data() {
    return {
      api_url: "http://b*****ry.php",
      dated_list: [],
      detailDay: "",
      check: 2
    };
  },
  created: function() {
    var that = this;
    that.detailDay = that.day;
    that.getDated(that.day);
  },
  watch: {
    day(newValue, oldValue) {
      var that = this;
      that.day = newValue;
      that.detailDay = newValue;
      that.getDated(newValue);
    }
  },
  methods: {
    childByValue: function(childValue) {
      // childValue就是子組件傳過來的值
      this.dialogModify.Visible = childValue;
    },
    //修改模態(tài)框關(guān)閉時(shí)回掉
    resetForm(done) {
      //this.$refs["modifyForm"].resetFields();
      done();
    },
    //切換日期
    changeDay(day, i) {
      var that = this;
      that.detailDay = day;
      that.check = i;
    },
    //獲取日期
    getDated(day) {
      var that = this;
      axios
        .get(that.api_url, {
          params: {
            method: "get_dated",
            day: day
          }
        })
        .then(function(response) {
          that.dated_list = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style>
.f_row {
  padding-bottom: 5px;
}
.el-table {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
}
.el-link {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
}
</style>

BoxLog.vue 與 AlbumLog.vue 結(jié)構(gòu)一樣

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" height="600" border>
      <el-table-column type="index" width="40%"></el-table-column>
      <el-table-column prop="box_id" label="id" min-width="3" align="center"></el-table-column>
      <el-table-column prop="box_name" label="音頻名" min-width="5"></el-table-column>
      <el-table-column prop="view_num" label="收聽數(shù)" min-width="3" align="center"></el-table-column>
      <el-table-column prop="cate_name" label="分類" min-width="3" align="center"></el-table-column>
      <el-table-column prop="age_name" label="年齡" min-width="3" align="center"></el-table-column>
      <el-table-column prop="album_name" label="專輯名" min-width="5">
        <template slot-scope="scope">
          <el-link type="primary"  @click="openAlbumBox(scope.$index, scope.row)">{{ scope.row.album_name }}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 主體表格 -->
  
    <el-dialog
      :title="dialogModify.title"
      width="75%"
      top="2vh"
      :visible.sync="dialogModify.Visible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      :close-on-click-modal="false"
      :before-close="resetForm"
    >
      <AlbumBox :ListInfo="dialogModify.ListInfo" v-on:childByValue="childByValue"></AlbumBox>
    </el-dialog>
    <!-- 修改專輯dialog -->
  </div>
</template>
 
<script>
import axios from "axios";
import AlbumBox from "./AlbumBox";
export default {
  props: {
    day: {}
  },
  components: {AlbumBox},
  data() {
    return {
      api_url: "http:/*****tory.php",
      tableInit: {
        limit: 100,
        currentPage: 1,
        cate: 34,
        total: 900,
        keyword: "" //搜索關(guān)鍵詞
      },
      tableData: [], //表格數(shù)據(jù)
      dialogModify: {
        Visible: false, //修改模態(tài)框狀態(tài)
      }
    };
  },
  created: function() {
    var that = this;
    that.changePage(1);
  },
  watch: {
    day(newValue, oldValue) {
      var that = this;
      that.day = newValue;
      that.changePage(1);
    }
  },
  methods: {
    childByValue: function(childValue) {
      // childValue就是子組件傳過來的值
      this.dialogModify.Visible = childValue;
    },
    //修改模態(tài)框關(guān)閉時(shí)回掉
    resetForm(done) {
      //this.$refs["modifyForm"].resetFields();
      done();
    },
    //顯示專輯音頻列表
    openAlbumBox(a, b) {
      var that = this;
      b.day = that.day;
      that.$nextTick(() => {
        that.dialogModify.Visible = true; //默認(rèn)頁面不顯示為false,點(diǎn)擊按鈕將這個(gè)屬性變成true
        that.dialogModify.title = "《"+b.album_name+"》"+b.age_name+","+b.cate_name;
        that.dialogModify.ListInfo = b;
      });
    },
    //修改每頁條數(shù)
    handleSizeChange(val) {
      var that = this;
      that.tableInit.limit = val;
      that.tableInit.currentPage = 1;
      that.changePage(1);
    },
    //翻頁
    handleCurrentChange(val) {
      var that = this;
      that.changePage(val);
    },
    changePage(page) {
      var that = this;
      axios
        .get(that.api_url, {
          params: {
            method: "get_story_box_log_list",
            page: page,
            limit: that.tableInit.limit,
            day: that.day
          }
        })
        .then(function(response) {
          that.tableData = response.data.data;
          that.tableInit.total = Number(response.data.count);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style>
.toolList {
  padding-top: 5px;
  padding-bottom: 5px;
}
</style>

2演怎、問題：

打包遇到的問題

a匕争、npm run build 打包時(shí)存儲(chǔ)目錄需要修改：
config文件夾下的index.js

    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',//修改為相對路徑當(dāng)前文件夾下

b、修改build-webpack.base.conf.js爷耀，解決引入字體圖標(biāo)，比如font-awesome的圖標(biāo)路徑出錯(cuò)的問題跑杭，在webpack.base.conf.js里面修改limit要改大，把10000改為90000窄做。

規(guī)范性驗(yàn)證Ｗ檠狻Ｔ愫臁！

去除eslint驗(yàn)證陈肛，修改修改webpack.base.conf.js阳藻，注釋下面那行匾南！ 或者在初始化的時(shí)候不選擇eslint

    rules: [
      // ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },

引入element-ui(文檔很清楚)

element-ui

加載element-ui：

npm install element-ui --save-dev 
#或者 npm i element-ui -S

配置element-ui: 在main.js中引入element.js和樣式

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'   //引入element
import 'element-ui/lib/theme-chalk/index.css'
//import axios from 'axios'
//import VueAxios from 'vue-axios'
 
Vue.config.productionTip = false
//Vue.use(ElementUI,VueAxios,axios)
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

webpack打包進(jìn)行丑化壓縮遇到（TypeError: Cannot read property 'compilation' of undefined）問題

安裝環(huán)境的使用一定要-save-dev或者是-save＜醒帷１哿！肄方！

版本升級或降級

1播演、npm i uglifyjs-webpack-plugin@1.0.0 --save
 
2、npm i optimize-css-assets-webpack-plugin@2 --save

Vue axios發(fā)post請求后臺(tái)接收不到參數(shù)（有多種方式洲炊，這里使用qs轉(zhuǎn)換）：

【引入 qs ，這個(gè)庫是 axios 里面包含的狂巢，不需要再下載了】

import qs from 'qs'
          axios
            .post(
              that.api_url,
              qs.stringify({
                method: "save_story",
                form_data: that.form
              }),
              {
                headers: { "Content-Type": "application/x-www-form-urlencoded" } //post
              }
            )
            .then(function(response) {
              console.log(response.data);
              if (response.data.ret) {
                that.$message({
                  duration: 1000,
                  message: response.data.msg,
                  type: "success",
                  onClose: function() {
                    window.location.reload();
                  }
                });
              } else {
                that.$message.error(response.data.msg);
              }
            })
            .catch(function(error) {
              console.log(error);
            });
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末雌续，一起剝皮案震驚了整個(gè)濱河市受啥，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌藤肢，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,968評論 6贊 482
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異温学，居然都是意外死亡逃延，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來料按，“玉大人，你說我怎么就攤上這事∧倏穑” “怎么了？”我有些...
    開封第一講書人閱讀 153,220評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵炎码，是天一觀的道長。 經(jīng)常有香客問我，道長和敬，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,416評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任变骡，我火速辦了婚禮塌碌，結(jié)果婚禮上瓢捉，老公的妹妹穿的比我還像新娘搂漠。我一直安慰自己靶壮，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般逮光。 火紅的嫁衣襯著肌膚如雪走诞。 梳的紋絲不亂的頭發(fā)上戴陡，一...
    開封第一講書人閱讀 49,144評論 1贊 285
  • 城市分裂傳說
    那天喜庞，我揣著相機(jī)與錄音，去河邊找鬼晰房。 笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的海蔽。 我是一名探鬼主播域仇，決...
    沈念sama閱讀 38,432評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼垦细，長吁一口氣：“原來是場噩夢啊……” “哼家坎！你這毒婦竟也來了苏携？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,088評論 0贊 261
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤儡遮，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后被环，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體唇聘，經(jīng)...
    沈念sama閱讀 43,586評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡宪肖，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年蜕衡，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蒜绽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片骡和。...
    茶點(diǎn)故事閱讀 38,137評論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡婆赠，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出妙黍，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 33,783評論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布妇垢，位于F島的核電站迎罗，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜结借，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一圃酵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦岭洲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至母廷，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背舷暮。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人叉庐。 一個(gè)月前我還...
    沈念sama閱讀 45,595評論 2贊 355
  • 代替公主和親
    正文 我出身青樓肢执，卻偏偏與公主長得像耻陕，于是被迫代替她去往敵國和親膘怕。 傳聞我的和親對象是個(gè)殘疾皇子鹉梨，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評論 2贊 345