vue-cli+elementui搭建單頁面後臺（table,form,router，組件傳值）（以及中途遇到的 npm打包、axios，第三方插件等問題）

1、前臺展示

首頁：

  

添加頁：

 

音頻列表頁：

修改頁：

數據統計頁：

 

vue可使用 <script> 引入，

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

2、代碼

1.代碼結構

2.具體代碼

App.vue                                      正常引入php項目組件

<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                   全局環境引入 

注意：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    頭部導航欄  ，主要的含路由的地方

<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">數據統計</el-menu-item>
    </el-menu>
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
  </div>
</template>

<script>
//el-menu開啓路由時 :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          專輯分類列表頁（默認展示首頁）

<template>
  <div>
    <el-row class="toolList">
      <el-input size="small" placeholder="請輸入內容" 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="用戶數" min-width="2" align="center"></el-table-column> -->
      <el-table-column prop="real_num" label="收聽數" 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: "" //搜索關鍵詞
      },
      tableData: [], //表格數據
      dialogTableVisible: false, //模態框狀態
      dialogModify: {
        Visible: false, //修改模態框狀態
        title: "",
        albumInfo: {}
      },
      dialogMp3List: {
        Visible: false, //mp3list修改模態框狀態
        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;
    },
    //修改模態框關閉時回掉
    resetForm(done) {
      //this.$refs["modifyForm"].resetFields();
      done();
    },
    //刪除功能
    handleDelete(a, b) {
      var that = this;
      that
        .$confirm("此操作將刪除該專輯, 是否繼續?", "提示", {
          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; //默認頁面不顯示爲false,點擊按鈕將這個屬性變成true
    },
    //顯示修改專輯組件
    openModify(a, b) {
      var that = this;
      that.$nextTick(() => {
        that.dialogModify.Visible = true; //默認頁面不顯示爲false,點擊按鈕將這個屬性變成true
        that.dialogModify.title = "《" + b.name + "》修改";
        that.dialogModify.albumInfo = b;
      });
    },
    //展示mp3list
    mp3List(a, b) {
      var that = this;
      that.$nextTick(() => {
        that.dialogMp3List.Visible = true; //默認頁面不顯示爲false,點擊按鈕將這個屬性變成true
        that.dialogMp3List.title = "《" + b.name + "》音頻列表";
        that.dialogMp3List.mp3Info = b;
      });
    },
    //修改每頁條數
    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表單提交時 post方式以及數據類型需要調整調整  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="請輸入內容" 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: [],
      //表單數據
      form: {
        name: "",
        desc: "",
        delivery: false,
        imageUrl: "",
        album_id: "",
        mp3_url_arr: []
      },
      options: "",
      //驗證規則
      rules: {
        name: [
          { required: true, message: "請輸入專輯名稱", trigger: "blur" },
          { min: 1, max: 50, message: "長度在 1 到 50 個字符", 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: "請填寫專輯描述", 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標籤的使用

      <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      數據統計組件，簡單的列表頁

<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="收聽數" 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: "" //搜索關鍵詞
      },
      tableData: [], //表格數據
      dialogModify: {
        Visible: false, //修改模態框狀態
        day: "",
      }
    };
  },
  created: function() {
    var that = this;
    that.changePage(1);
  },
  watch: {
  },
  methods: {
    childByValue: function(childValue) {
      // childValue就是子組件傳過來的值
      this.dialogModify.Visible = childValue;
    },
    //修改模態框關閉時回掉
    resetForm(done) {
      //this.$refs["modifyForm"].resetFields();
      done();
    },
    //顯示修改專輯組件
    openDetail(a, b) {
      var that = this;
      that.$nextTick(() => {
        that.dialogModify.Visible = true; //默認頁面不顯示爲false,點擊按鈕將這個屬性變成true
        that.dialogModify.title = '詳情';
        that.dialogModify.day = b.day;
      });
    },
    //修改每頁條數
    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;
    },
    //修改模態框關閉時回掉
    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  結構一樣

<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="收聽數" 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: "" //搜索關鍵詞
      },
      tableData: [], //表格數據
      dialogModify: {
        Visible: false, //修改模態框狀態
      }
    };
  },
  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;
    },
    //修改模態框關閉時回掉
    resetForm(done) {
      //this.$refs["modifyForm"].resetFields();
      done();
    },
    //顯示專輯音頻列表
    openAlbumBox(a, b) {
      var that = this;
      b.day = that.day;
      that.$nextTick(() => {
        that.dialogModify.Visible = true; //默認頁面不顯示爲false,點擊按鈕將這個屬性變成true
        that.dialogModify.title = "《"+b.album_name+"》"+b.age_name+","+b.cate_name;
        that.dialogModify.ListInfo = b;
      });
    },
    //修改每頁條數
    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  打包時存儲目錄需要修改：

config文件夾下的index.js

    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',//修改爲相對路徑當前文件夾下

b、修改build-webpack.base.conf.js，解決引入字體圖標，比如font-awesome的圖標路徑出錯的問題，在webpack.base.conf.js裏面修改limit要改大，把10000改爲90000。

規範性驗證！！！

去除eslint驗證，修改修改webpack.base.conf.js，註釋下面那行！ 或者在初始化的時候不選擇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打包進行醜化壓縮遇到（TypeError: Cannot read property 'compilation' of undefined）問題

安裝環境的使用一定要-save-dev或者是-save！！！！

版本升級或降級

1、npm i [email protected] --save

2、npm i optimize-css-assets-webpack-plugin@2 --save

Vue axios發post請求後臺接收不到參數（有多種方式，這裏使用qs轉換）：

【引入 qs ，這個庫是 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);
            });