[转载]Vue 2.x 实战之后台管理系统开发(一)
2. 开发前须知
我的后台管理系统项目运用了如下框架/插件:
- Vue 2.x —— 项目所使用的 js 框架,我所使用的版本是:2.1.10
- vue-router 2 —— Vue 2.x 配套路由,我所使用的版本是:2.3.0
- Element —— UI 框架,饿了么出品,我所使用的版本是:1.2.8
- Echarts —— 图表插件,百度出品,我所使用的版本是:3.4.0
- 在 UI 框架的选择上,除了 Element,iView 也不错,大家可以按需选择。
- 对于所使用的框架/插件,尽可能先快速过一遍文档,这样可以知道有什么现成的东西可以使用,避免自己做多余的工作。
3. 构建项目框架
准备
对于大陆用户,建议将 npm 的注册表源设置为国内的镜像,如 淘宝 NPM 镜像,可以大幅提升安装速度。
运行如下语句即可使用淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用方法为:将 npm
改为 cnpm
示例:npm install
=> cnpm install
安装
根据 官方指南 执行如下命令行语句:
# 安装 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
安装 vue-cli webpack 模板
在
Use ESLint to lint your code? (Y/n)
这一项,如果不打算使用语法检测,可以直接选择n
,如果决定安装但是又暂时不想启用,后文有如何禁用的说明。
这时你的浏览器会自动打开 localhost:8080
页面,说明项目环境搭建成功,我们已经有了一个基于 webpack 模板的项目框架。
模板项目
可能遇到的问题
问题:
运行 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 的话直接重新安装一个新版本,安装包 这里 下载。
- 升级 npm 的话可以直接运行命令行语句:
cnpm install npm@latest -g
参考: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 模板项目结构
相关文档
官网安装指南
vue-cli
vuejs-templates: webpack
4. 框架/插件使用
可能遇到的问题
问题:
当你随便写了一点代码然后点击保存后,浏览器中会显示如下报错信息:
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>
可以按需引入的模块列表见 github.com/ecomfe/echa…
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
相关文档/文章:
ESLint
Element
ECharts
jquery 配置参考
Vue框架引入JS库的正确姿势
原文链接:https://juejin.im/post/58f3799ca22b9d006cfa8d81
转载于:https://www.cnblogs.com/sybboy/p/9002804.html
[转载]Vue 2.x 实战之后台管理系统开发(一)相关推荐
- Vue 2.x 实战之后台管理系统开发(二)
1. 导语 承接上文:Vue 2.x 实战之后台管理系统开发(一) 在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了.在开发过程中 ...
- Thinkphp实战教程后台管理系统开发
目录 ├─Thinkphp5 后台管理开发.png ├─Thinkphp5 后台管理开发.xmind ├─Thinkphp实战教程后台管理系统开发-1.课程介绍及大纲.mp4 ├─Thinkphp实战 ...
- 视频教程-vuecli实战商城后台管理系统-Vue
vuecli实战商城后台管理系统 帝莎学院创始人&CEO,目前主要从事全栈开发.Python.PHP.小程序.App.Web等技术的研究和开发.专注于实战类教程,授课风趣幽默,讲解条理清晰.通 ...
- 【JavaWeb】JavaWeb项目实战——品牌后台管理系统
JavaWeb项目实战--品牌后台管理系统 项目概述 功能介绍 成果展示 项目实现 使用Maven构建项目 Maven介绍 具体操作 使用Mybatis封装对数据库的操作 在Mysql中建表,并添加数 ...
- 大事件后台管理系统开发实战(下)
文章目录 续前篇:大事件后台管理系统开发实战(中) 1. 文章类别 1.1 点击编辑按钮展示修改文章分类的弹出层 1.2 为修改文章分类的弹出层填充表单数据 1.3 更新文章分类的数据 1.4 删除文 ...
- 视频教程-SSM后台管理系统开发实战-Java
SSM后台管理系统开发实战 5年IT从业经验,目前职位是Java高级工程师.架构师,在gitchat发布有<SSM博客系统开发实战>达人课,CSDN博客专家,博客专栏作者,梦境网项目独立开 ...
- 搭建Vue版Ant Design Pro后台管理系统
搭建Vue版Ant Design Pro后台管理系统 此文章通过基于Vue实现的Ant DesignPro脚手架快速构建一个后台管理系统的前端 相关文档链接 1.[Ant Design Pro of ...
- SSM后台管理系统开发实战
一.简介: 通过这个课程带大家从零开发一款功能全面的后台管理系统,包括项目搭建.功能实现到最后的Linux系统部署全过程.本课程使用SpringMVC + Spring + Mybatis作为主体框架 ...
- vue-manage-system 后台管理系统开发总结
前言 vue-manage-system,一个基于 Vue.js 和 element-ui 的后台管理系统模板,从2016年年底第一个commit,到现在差不多两年了,GitHub上也有了 5k st ...
最新文章
- 阿里三面让我现场改造Spring框架,明天带他去爬山!
- 频繁模式(frequent pattern)
- Python常用函数与技巧总结(二)
- asp.net调用opencv类库,实现图像处理显示
- 北大率先官宣朱松纯加盟,现身燕园,任职AI研究院院长,“AI发展离不开哲学思考”...
- SAP中会计凭证和物料凭证的对应关系
- php的declare命令
- 管理11gRAC基本命令 (转载) 很详细
- 聊一聊ws2_32.dll和wsock32.dll
- 一步步编写操作系统 59 cpu的IO特权级1
- 前端和后端怎么进行数据交互的_前端VS后端
- 2020小美赛【A题翻译+思路】
- 使用脚本把360极速浏览器修改为极速模式
- plotly系列 | 绘制散点图组合箱线图(联合图)
- COAP协议全面分析
- 无线射频专题《协议类,IEEE 802.11/802.11b/802.11a/802.11g/802.11n/802.11ac标准简介》
- 计算机任务驱动法教学应用,“任务驱动法”在职教计算机教学中的应用
- win10自动修复-无限循环【通用完美】超简单解决办法
- 商米机V2和V1内置打印机说明
- 主机通过代理上网虚拟机网络连接配置
热门文章
- Spring 核心方法 refresh 刷新流程简要概述及相关源码扩展实现(一)
- 艾瑞数据显示搜狐视频稳居第二 美剧营销占先机
- 什么蓝牙耳机打游戏没有延迟?吃鸡蓝牙耳机无延迟排行榜
- Python爬取小姐姐内衣信息,寻找小姐姐们的偏好
- 文件名的改变不会改变md5值
- Django数据库(SQlite)入门使用教程
- JSP上传图片限制大小像素
- 微信小程序canvas画价格走势图(三)
- php ppt自动播放,ppt如何循环播放,ppt如何添加视频设置自动播放(ppt转换成视频)...
- 历届试题 包子凑数 C语言,蓝桥杯 试题 历届试题 包子凑数 dp+欧几里得算法