vue-cli+elementui搭建单页面后台demo（table,form,router，组件传值）（以及中途遇到的 npm打包、axios，第三方插件等问题）

1、前台展示

首页：

首页

添加页：

添加音频模态框

添加专辑模态框

音频列表页：

音频列表模态框

修改页：

修改

数据统计页：

数据统计

数据统计 分类

vue可使用

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: ''
})

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 头部导航栏 ，主要的含路由的地方

catesort.vue 专辑分类列表页（默认展示首页）

cateTemplate/uploadform.vue 新增页面
注意：form表单提交时 post方式以及数据类型需要调整调整 qs

cateTemplate/AudioList.vue、modifyForm.vue、modifyBoxForm.vue 与新增表单相似
音频 audio标签的使用

DataAnalysis.vue 数据统计组件，简单的列表页

LogDetail.vue 专辑排行 与 音频排行组件 主要是两张表，以及切换日期。

BoxLog.vue 与 AlbumLog.vue 结构一样

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: ''
})

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);
            });