element ui 菜单封装_vue模块化(echart+element ui)

最近看了下vue的框架,随手做了个项目,记录分享下

技术框架: vue.js + webpack + element ui + echart

首先看下npm package.js

上面的图主要是配置的是npm 打包命令和引入vue-route vue的路由文件和element ui 文件下面这个是引入echart.js 文件, 基本资料就这些。

首先我们开始构建一个vue-cli项目

1.首先node环境(这里就不多啰嗦了)

2.执行vue-cli命令 npm install --global vue-cli (这里你可以全局装，也可以装到项目路径)

3.检查下 vue是否装好 vue -V (能看到版本号就是安装成功了)

4.用vue新建一个项目 vue init webpack my-project ESLint规范建议开启，加强代码规范(中间遇到 ESLint可以自己选择开启或者关闭)

5.弄好项目后 npm install 下初始化下包

6.最后进入项目路径执行 npm run dev 命令如果能看到页面证明项目搭建成功

更加详细的配置请参考 http://www.cnblogs.com/pearl07/p/6247389.html

上面已经完成了vue-cli项目的基本构建 vue+webpack已经集成了

这时候我们需要构建两个页面看下路由功能

ctrl + c (停止当前服务器)

然后 npm install vue-router --save-dev 把vue-router包导进来

然后我们用组件化思想去控制代码把路由当成一个组件来考虑

结构目录如上,

首先我们在main.js 里面把 router引进去,

,然后再router目录下 index.js 定义路由

这里我们就定义好了 hello 和home 两个路由结构了然后再 app.vue里面把路由写好,router-link标签 to(路径)即可,

到这里路由差不多是完成了,

接下来我们引入element ui 和 echarts.js 和引入路由定义路由的方式大同小异

执行 npm install *** --save-dev 就能导入相应的包了然后再main.js 里面导入进去值得注意的是这个css别忘了引入

echart的引入和使用

最后效果图

项目地址:https://github.com/huyinxuan/vue-project 有兴趣的可以去看看项目刚刚写有些简陋....有问题提出来大家可以讨论下!

时间： 04-16

element ui 菜单封装_vue模块化(echart+element ui)相关推荐

element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
element 修改分页样式_vue想改变element分页样式
我想要把左边靠左右边pager靠右 .el-pagination .btn-next { background: center center no-repeat #fff; background-s ...
element ui 空格_空格是您的UI朋友。大量使用它。
element ui 空格 Originally published at marcandrew.me on July 30th, 2020. 最初于 2020 年7月30日在 marcandrew ...
element导航菜单添加搜索功能
element官方文档中他是一个树状结构的菜单,这个菜单没有属性可以去对他进行菜单的搜索,或者模糊查询我自己给这个菜单封装了一个查询功能,下面是代码: 布局代码: //index.vue的代码 & ...
Vue UI 组件库（移动端常用 UI 组件库，PC 端常用 UI 组件库，Element UI基本使用，Element UI按需引入）
文章目录 Vue UI 组件库 7.1 移动端常用 UI 组件库 7.2 PC 端常用 UI 组件库 7.3 Element UI基本使用 7.4 Element UI按需引入 Vue UI 组件库 ...
前端漫漫-Element UI报错：Unknown custom element: ＜el-menu＞
前端漫漫-Element UI报错:Unknown custom element: 问题描述:编写VUE文件,从Element UI官网复制组件信息的时候,引用了Element UI的html标签,但 ...
element select 不回显_Jsoup中Element对象的使用
<?xml version="1.0" encoding="UTF-8" ?> <students ><student numbe ...
WPF简单UI菜单设计
UI效果如下: XAML 设计: <Window x:Class="简单菜单设计.MainWindow"xmlns="http://schemas.microsof ...

element ui 菜单封装_vue模块化(echart+element ui)

element ui 菜单封装_vue模块化(echart+element ui)相关推荐

最新文章

热门文章