Vue 2.x 实战之后台管理系统开发_转载

红太狼 2022-01-26 06:37 279阅读 0赞

# Vue 2.x 实战之后台管理系统开发 #

# 1. 导语 #

下文：[Vue 2.x 实战之后台管理系统开发（二）][Vue 2.x]

> 该文章将从头到尾梳理我是如何使用 Vue 2 开发一个后台管理项目的，我会将自己遇到的问题贴出，希望可以帮助到其他人。

# 2. 开发前须知 #

我的后台管理系统项目运用了如下框架/插件：

1.  [Vue 2.x][Vue 2.x 1] —— 项目所使用的 js 框架，我所使用的版本是：2.1.10
2.  [vue-router 2][] —— Vue 2.x 配套路由，我所使用的版本是：2.3.0
3.  [Element][] —— UI 框架，饿了么出品，我所使用的版本是：1.2.8
4.  [Echarts][] —— 图表插件，百度出品，我所使用的版本是：3.4.0

>  *  在 UI 框架的选择上，除了 [Element][]，[iView][] 也不错，大家可以按需选择。

*  对于所使用的框架/插件，尽可能先快速过一遍文档，这样可以知道有什么现成的东西可以使用，避免自己做多余的工作。

# 3. 构建项目框架 #

### 准备 ###

> 对于大陆用户，建议将 npm 的注册表源设置为国内的镜像，如 [淘宝 NPM 镜像][NPM]，可以大幅提升安装速度。

运行如下语句即可使用淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

*  1

使用方法为：将 \`npm\` 改为 \`cnpm\` 示例：\`npm install\` => \`cnpm install\`

### 安装 ###

根据 [官方指南][Link 1] 执行如下命令行语句：

# 安装 vue
    $ cnpm install vue 
    # 全局安装 vue-cli，该工具提供开箱即用的构建工具配置
    $ cnpm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目 my-project（项目名称）
    $ vue init webpack my-project
    # 进入项目目录
    $ cd my-project
    # 安装依赖
    $ cnpm install
    # 运行项目（不需要使用到下载功能时，没有必要使用 cnpm）
    $ cnpm run dev
    # 或者（效果一样）
    $ npm run dev

![3491081109-5926d012131d2_articlex][]

> 在 `Use ESLint to lint your code? (Y/n)` 这一项，如果不打算使用语法检测，可以直接选择 `n`，如果决定安装但是又暂时不想启用，后文有如何禁用的说明。

这时你的浏览器会自动打开 `localhost:8080` 页面，说明项目环境搭建成功，我们已经有了一个基于 webpack 模板的项目框架。

![3066498117-5926d00f80988_articlex][]

### 可能遇到的问题 ###

**问题：**  
运行 `npm run dev` 后报错：

To use this template, you must update following to modules:
    npm: 2.15.1 should be >= 3.0.0

遇到这个问题说明你的 nodejs 版本也不高，因此最好更新 node 版本及 npm 版本。

**解决：**

*  升级 node 的话直接重新安装一个新版本，安装包 [这里][Link 2] 下载。
 *  升级 npm 的话可以直接运行命令行语句：

cnpm install npm@latest -g

*  1

参考：[node 安装及 npm 升级方法][node _ npm]

### 项目结构 ###

> `#` 备注项为 webpack 模板内置。  
> `##` 备注项为按照个人喜好新增的文件夹/文件。

.
    ├── build/                      # webpack config files / webpack 配置文件
    │   └── ...
    ├── config/
    │   ├── index.js                # main project config / 项目主要配置
    │   └── ...
    ├── src/                        # 主要的项目开发文件都在这个目录下：            
    │   ├── main.js                 # app entry file / 应用入口文件
    │   ├── App.vue                 # main app component / App 父组件
    │   ├── components/             # ui components / 可复用的 ui 组件
    │   │   └── ...
    │   ├── assets/                 # module assets (processed by webpack) / 模块资源（经过 webpack 处理，如文件合并，图片压缩等）
    │   │   └── ...
    │   ├── page/                   ## 以页面为单位的 .vue 文件
    │   │   ├── index.vue           ## 一级 router-view，顶部导航栏和左侧侧边导航栏
    │   │   ├── 404.vue             ## 404 页面
    │   │   ├── menu1/              ## 二级 router-view，导航切换后的页面内容
    │   │   │   └── ...
    │   │   └── menu2/              ## 按照菜单项创建文件夹对文件进行组织管理
    │   │       └── ...
    │   └── router/                 
    │       └── index.js            # 路由配置文件
    ├── static/                     # pure static assets (directly copied) / 纯静态资源（直接拷贝使用，不经过 webpack 处理）
    ├── .babelrc                    # babel config
    ├── .eslintrc.js                # eslint config
    ├── .editorconfig               # editor config
    ├── index.html                  # index.html template
    ├── package.json                # build scripts and dependencies
    └── ...

参考：[webpack 模板项目结构][webpack]

### 相关文档 ###

[官网安装指南][Link 3]  
[vue-cli][]  
[vuejs-templates: webpack][vuejs-templates_ webpack]

# 4. 框架/插件使用 #

### 可能遇到的问题 ###

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

那是因为项目默认开启了 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
          },
          ...
        ]
      },

![2344933850-5926d00763bcb_articlex][]

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

### Element ###

**npm 安装 Element：**

cnpm i element-ui -S

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

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

在根据[官方指南][Element 1]安装了 [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)

![389392591-5926d00d67660_articlex][]

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

## Echarts ##

参考文档：[在 webpack 中使用 ECharts][webpack _ ECharts]  
**npm 安装 ECharts：**

cnpm install echarts --save

*  1

**引入 ECharts：**  
全部引入：

var echarts = require('echarts'); // 默认使用 require('echarts') 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大
    
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        ...
    });

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

<template>
      
      <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>
    
    <style>
    .echarts-line {
      width: 100%;
      height: 320px;
    }
    </style>

可以按需引入的模块列表见  
[https://github.com/ecomfe/ech…][https_github.com_ecomfe_ech]

### 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/div>: '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"
        })
      ]
    }

![2766933760-5926d00ddbac9_articlex][]

![1515991141-5926d00ede20f_articlex][]

### 相关文档/文章： ###

[ESLint][]  
[Element][Element 2]  
[ECharts][webpack _ ECharts]  
[jquery 配置参考][jquery]  
[Vue框架引入JS库的正确姿势][Vue_JS]

# 5. 总结 #

> 到此为主，所有准备工作都做好了，可以尽情地开发页面内容了。  
> 如果对 **Vue** 或 **vue-router** 的使用有所疑问，查看官方文档基本就能将问题解决了。  
> 有空的时候我再将其他开发过程中遇到的问题整理出来。

转自：  
[https://segmentfault.com/a/1190000009558295][https_segmentfault.com_a_1190000009558295]

[Vue 2.x]: https://segmentfault.com/a/1190000009650448
[Vue 2.x 1]: http://cn.vuejs.org/v2/guide/
[vue-router 2]: https://router.vuejs.org/zh-cn/
[Element]: http://element.eleme.io/#/zh-CN/
[Echarts]: http://echarts.baidu.com/index.html
[iView]: https://www.iviewui.com/
[NPM]: http://npm.taobao.org/
[Link 1]: https://vuefe.cn/v2/guide/installation.html#NPM
[3491081109-5926d012131d2_articlex]: https://sfault-image.b0.upaiyun.com/349/108/3491081109-5926d012131d2_articlex
[3066498117-5926d00f80988_articlex]: https://sfault-image.b0.upaiyun.com/306/649/3066498117-5926d00f80988_articlex
[Link 2]: https://nodejs.org/en/download/
[node _ npm]: https://docs.npmjs.com/getting-started/installing-node
[webpack]: https://vuejs-templates.github.io/webpack/structure.html
[Link 3]: http://cn.vuejs.org/v2/guide/installation.html#
[vue-cli]: https://github.com/vuejs/vue-cli
[vuejs-templates_ webpack]: https://vuejs-templates.github.io/webpack/
[193489981-5926d00eebb5c_articlex]: https://sfault-image.b0.upaiyun.com/193/489/193489981-5926d00eebb5c_articlex
[2344933850-5926d00763bcb_articlex]: https://sfault-image.b0.upaiyun.com/234/493/2344933850-5926d00763bcb_articlex
[Element 1]: http://element.eleme.io/#/zh-CN/component/quickstart%23yin-ru-element
[babel-plugin-component]: https://github.com/QingWei-Li/babel-plugin-component
[389392591-5926d00d67660_articlex]: https://sfault-image.b0.upaiyun.com/389/392/389392591-5926d00d67660_articlex
[components.json]: https://github.com/ElemeFE/element/blob/dev/components.json
[webpack _ ECharts]: http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
[https_github.com_ecomfe_ech]: https://github.com/ecomfe/echarts/blob/master/index.js
[Axios]: https://github.com/mzabriskie/axios
[2766933760-5926d00ddbac9_articlex]: https://sfault-image.b0.upaiyun.com/276/693/2766933760-5926d00ddbac9_articlex
[1515991141-5926d00ede20f_articlex]: https://sfault-image.b0.upaiyun.com/151/599/1515991141-5926d00ede20f_articlex
[ESLint]: http://eslint.cn/
[Element 2]: http://element.eleme.io/#/zh-CN/component/installation
[jquery]: https://github.com/billyhoomm/Vue2.0-Blog-System/blob/master/build/webpack.base.conf.js
[Vue_JS]: http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651226400&idx=1&sn=8841ec09ac308c6c60c86e5f8641739f&chksm=bd4958a48a3ed1b2c079209ed0748abd602302cfa549b24f822c89670caa248c451a95ad5ab1&scene=27#wechat_redirect
[https_segmentfault.com_a_1190000009558295]: https://segmentfault.com/a/1190000009558295