Vue 2.x 实战之后台管理系统开发（一）

最新推荐文章于 2024-03-07 20:51:12 发布

wxy270

最新推荐文章于 2024-03-07 20:51:12 发布

阅读量478

点赞数

分类专栏： vue 文章标签： vue 编码

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

转载链接点击打开链接

可能遇到的问题

问题：
当你随便写了一点代码然后点击保存后，浏览器中会显示如下报错信息：

Eslint 报错

那是因为项目默认开启了 Eslint 功能，代码编写不规范就会报错。

解决：
可以这样禁用 Eslint：
build/webpack.base.conf.js

module: {
    rules: [
      // {
      //   test: /\.(js|vue)$/,
      //   loader: 'eslint-loader',
      //   enforce: "pre",
      //   include: [resolve('src'), resolve('test')],
      //   options: {
      //     formatter: require('eslint-friendly-formatter')
      //   }
      // },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      ...
    ]
  },

禁用 Eslint

直接注释掉相关规则就可以了。

Element

npm 安装 Element：

cnpm i element-ui -S

引入 Element：
官方文档：引入 Element
可以完整引入也可以按需引入，为了项目的大小考虑，还是选择按需引入比较好。

按照官方的使用说明做，就能成功将 Element 引入项目，这里就不照搬文档了。

在根据官方指南安装了 babel-plugin-component 并修改了 .babelrc 文件后，针对 按需引入 的方式举个例子：

#1 拷贝需要使用的组件代码

<el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

从上面的代码段中可以看出，我们需要引入三个组件：el-dropdown，el-dropdown-menu 和 el-dropdown-item。

#2 引入组件
在 main.js 中写入以下内容：

// 引入组件
import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui' // 使用驼峰方式书写组件名即可

// 使用组件
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)

按需引入 Element 组件

完整组件列表以 components.json 为准，也可以查看 项目地址\node_modules\element-ui\lib 目录下的文件（文件名即组件名）。

Echarts

参考文档：在 webpack 中使用 ECharts
npm 安装 ECharts：

cnpm install echarts --save

引入 ECharts：
全部引入：

var echarts = require('echarts'); // 默认使用 require('echarts') 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    ...
});

按需引入：
echarts-line.vue（基于 echarts 的折线图组件示例）

<template>
  <!--需要唯一的 id 来初始化图表-->
  <div class="echarts-line" :id="id">
  </div>
</template>
<script>
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');

// 引入折线图
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default {
  name: 'echarts-line',
  props: {
    id: String
  },
  mounted(){
    this.drawLine(this.id);
  },
  methods: {
    drawLine(id){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));
        // 绘制图表
        myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.echarts-line {
  width: 100%;
  height: 320px;
}
</style>

可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js

jQuery

有些人可能还无法离开 jQuery 的使用（例如我，不过建议是如果使用了 vue 进行开发，就没有必要使用 jQuery 了），并且也已经习惯了使用 Ajax（目前官方推荐的异步请求库为 Axios，vue-resource 已经停止更新维护）。

要想全局使用 jQuery 的话，可以这样做：
#1 下载 jquery 文件
将 jquery 文件放于 static 目录下，如：static/js/jquery-3.0.0.min.js

#2 webpack 配置文件
build/webpack.base.conf.js

...
var webpack = require("webpack") // 1. 确保引入 webpack，后面会用到

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      "jquery": path.resolve(__dirname, '../static/js/jquery-3.0.0.min.js') // 2. 定义别名和插件位置
    }
  },
  plugins: [
    // 3. 配置全局使用 jquery
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery"
    })
  ]
}

引入 webpack

配置 jquery