关键词

Vue Highcharts ElementUI

GitHub

#思路根据需求，一共需要三个页面，第一个页面是各种指标的列表，点击对应的指标转到第二个页面，展示相应指标的股票排行表格，点击表格的某一行跳转到第三个页面显示该股票的日K图。在看了Element-ui的文档之后，看到el-dialog，觉得第三个页面可以直接从第二个页面弹出el-dialog实现，这样第二个页面就无需跳转可以一直展示。

创建project

用vue cli创建project

vue init webpack stockspec
PS D:\codes\vue\stockspec_vue> vue init webpack stockspec

? Project name stockspec
? Project description A Vue.js project
? Author mmdfish 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "stockspec".

实现

引入Element-ui ``` // stockspec/src/main.js import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-chalk/index.css’

Vue.use(ElementUI)


- 引入Highcharts的highstock

// stockspec/src/main.js import HighchartsVue from ‘highcharts-vue’ import Highcharts from ‘highcharts’ import stockInit from ‘highcharts/modules/stock’

stockInit(Highcharts) Vue.use(HighchartsVue)

- 页面设置
根据需求，创建两个页面，stockspec/src/component/stock.vue和stockspec/src/component/stockspec.vue。
加入路由，在stockspec/src/router/index.js中加入这两个页面的定义。

import stock from ‘@/components/stock’ export default new Router({ routes: [ { path: ‘/’, name: ‘HelloWorld’, component: HelloWorld }, { path: ‘/stock’, name: ‘Stock’, component: stock }, { path: ‘/stockspec’, name: ‘StockSpec’, component: stockspec }, ] })

- 指标列表入口
stockspec/src/component/stock.vue
用element-ui的[layout](https://element.eleme.cn/#/zh-CN/component/layout) 做最简单的布局，vue中一个template只能有一个组件，如果有多个组件会报错。解决方法是把这些el-row放在一个div中。stock里加入跳转stockspec的路由，用router-link做路由跳转，参数参考上一篇Django的request的参数。
这里一定要注意 router-link的用法，和path配对的是query，刷新页面数据不会丢失。和name配对的是params，刷新页面参数会丢失。具体看跳转时候现实的网址就能发现不同。

第五篇用Vue创建前端

关键词

GitHub

创建project

实现

CATALOG

FEATURED TAGS

FRIENDS