Vue 2.x 实战之后台管理系统开发(一)
2017-08-23 17:51
543 查看
转载链接 点击打开链接
当你随便写了一点代码然后点击保存后,浏览器中会显示如下报错信息:
Eslint 报错
那是因为项目默认开启了 Eslint 功能,代码编写不规范就会报错。
解决:
可以这样禁用 Eslint:
build/webpack.base.conf.js
禁用 Eslint
直接注释掉相关规则就可以了。
引入 Element:
官方文档:引入 Element
可以完整引入也可以按需引入,为了项目的大小考虑,还是选择按需引入比较好。
按照官方的使用说明做,就能成功将 Element 引入项目,这里就不照搬文档了。
在根据官方指南安装了
babel-plugin-component 并修改了 .babelrc 文件后,针对 按需引入 的方式举个例子:
#1 拷贝需要使用的组件代码
从上面的代码段中可以看出,我们需要引入三个组件:
#2 引入组件
在 main.js 中写入以下内容:
按需引入 Element 组件
完整组件列表以
components.json 为准,也可以查看
npm 安装 ECharts:
引入 ECharts:
全部引入:
按需引入:
echarts-line.vue(基于 echarts 的折线图组件示例)
可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js
Axios,vue-resource 已经停止更新维护)。
要想全局使用 jQuery 的话,可以这样做:
#1 下载 jquery 文件
将 jquery 文件放于 static 目录下,如:
#2 webpack 配置文件
build/webpack.base.conf.js
引入 webpack
配置 jquery
Element
ECharts
jquery 配置参考
Vue框架引入JS库的正确姿势
作者:Alexee
链接:http://www.jianshu.com/p/f82d55df7e54
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
可能遇到的问题
问题:当你随便写了一点代码然后点击保存后,浏览器中会显示如下报错信息:
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 中使用 EChartsnpm 安装 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
相关文档/文章:
ESLintElement
ECharts
jquery 配置参考
Vue框架引入JS库的正确姿势
作者:Alexee
链接:http://www.jianshu.com/p/f82d55df7e54
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章推荐
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作
- Vue实战之后台管理系统(二)
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
- [零基础学JAVA]Java SE实战开发-37.MIS信息管理系统实战开发[文件保存](1) 推荐
- 使用Vue-cli搭建后台简单管理系统vue.js2.0
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之调整首页显示
- ado.net视频教程-实战开发CRM企业客户管理系统
- 移动开发管理系统Rational ClearQuest后台数据库ORACLE数据到EXP300阵列步骤
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口调试
- 初入Vue 关于后台管理系统
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之调整首页显示
- SVN+Spring+SpringMVC+MyBatis+Mysql+Maven+Myeclipse整合开发实战:酒店管理系统
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
- 基于java极速WEB+ORM 框架:jfinal2.0开发的通用后台管理系统及源码
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口调试
- 后台:nodejs 前台:vue 全栈开发 外卖平台系统