vue入门

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：https://github.com/vuejs/vue-cli

 

一、 安装 node.js

首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。

只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399

安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

 

二、安装 vue-cli

安装好了 node，我们可以直接全局安装 vue-cli：

npm install -g vue-cli

但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm：

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

如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存

同样可以使用 cnpm -v 查看是否安装成功

然后使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

如果提示“无法识别 'vue' ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

 

三、生成项目

首先需要在命令行中进入到项目目录，然后输入：

vue init webpack Vue-Project

其中 webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

Vue-Project 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹

 

配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖

cnpm install

然后启动项目

npm run dev

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

 

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

四、打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后，可以输入 npm run build 来进行打包工作

npm run build

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看

项目上线时，只需要将 dist 文件夹放到服务器就行了。

Vue 爬坑之路（二）—— 组件之间的数据传递

 Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。

首先用 vue-cli 创建一个项目，其中 App.vue 是父组件，components 文件夹下都是子组件。

 

一、父组件向子组件传递数据

在 Vue 中，可以使用 props 向子组件传递数据。

 

子组件部分：

这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。

如果需要从父组件获取 logo 的值，就需要使用 props: ['logo']

 

 父组件部分：

在调用组件的时候，使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg

 

然后就能将App.vue中 logoMsg 的值传给 header.vue 了：

 

 

二、子组件向父组件传递数据

 子组件主要通过事件传递数据给父组件

 

子组件部分：

 

这是 login.vue 的 HTML 部分，当<input>的值发生变化的时候，将 username 传递给 App.vue

首先声明一个了方法 setUser，用 change 事件来调用 setUser

在 setUser 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username

其中 transferUser 是一个自定义的事件，功能类似于一个中转，this.username 将通过这个事件传递给父组件 

 

父组件部分：

在父组件 App.vue 中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username

 

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username

 

三、子组件向子组件传递数据

Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。

为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递

 

Vue 爬坑之路（三）—— 使用 vue-router 跳转页面

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。

官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html

 

有很多朋友找我要 demo，但是博客中的这个案例被我删掉了，我只好随手写了一个超简单的 demo，希望能有所帮助

链接：http://pan.baidu.com/s/1nvqfA1V 密码：79bv

 

这次的实例主要实现下图的效果：

 

项目结构：

 

 

一、配置 Router

 用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装

cnpm i vue-router -D

安装完成后，在 src 文件夹下，创建一个 routers.js 文件，和 main.js 平级

然后在 router.js 中引入所需的组件，创建 routers 对象

import Home from './components/home.vue'const routers = [  {    path: '/home',    name: 'home',    component: Home  }，
  {    path: '/',    component: Home  }，

]
export default routers

在创建的 routers 对象中， path 配置了路由的路径，component 配置了映射的组件

需要注意的是，export default routers 必须写在文件底部，而且后面还需要接一空行，否则无法通过 ESlint 语法验证

 

然后 main.js 也需要修改：

import Vue from 'vue'import VueRouter from 'vue-router'import routers from './routers'import App from './App'Vue.use(VueRouter)const router = new VueRouter({  mode: 'history',  routes: routers})new Vue({  el: '#app',  router,  render: h => h(App)})

在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。

添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录。

关于 HTML5 history 模式的更多内容，可以参考官方文档：https://router.vuejs.org/zh-cn/essentials/history-mode.html

 

 

二、嵌套路由

在这个实例中，为了加深项目层级，App.vue 只是作为一个存放组件的容器：

其中 <router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，<router-view> 中的内容也会发生更改

上面已经配置了两个路由，当打开 http://localhost:8080 或者 http://localhost:8080/home 的时候，就会在 <router-view> 中渲染 home.vue 组件

 

home.vue 是真正的父组件，first.vue、login.vue 等子组件都会渲染到 home.vue 中的 <router-view>

 

如此一来，就需要在一级路由中嵌套二级路由，修改 routers.js

import Home from './components/home.vue'import First from './components/children/first.vue'import Login from './components/children/login.vue'const routers = [  {    path: '/',    component: Home,
　　 children: [ 
　　　{ 
　　　　path: '/', 
 　　　 component: Login 
　　  }
　　]  },  {    path: '/home',    name: 'home',    component: Home,    children: [      {        path: '/',        name: 'login',        component: Login      },      {        path: 'first',        name: 'first',        component: First      }     ]  }]export default routers

在配置的路由后面，添加 children，并在 children 中添加二级路由，就能实现路由嵌套

配置 path 的时候，以 " / " 开头的嵌套路径会被当作根路径，所以子路由的 path 不需要添加 " / "

 

 

三、使用 <router-link> 映射路由

home.vue 中引入了 header.vue 组件，其中含有导航菜单

当点击导航菜单的时候，会切换 home.vue 中 <router-view> 中的内容

这种只需要跳转页面，不需要添加验证方法的情况，可以使用 <router-link> 来实现导航的功能：

在编译之后，<router-link> 会被渲染为 <a> 标签， to 会被渲染为 href，当 <router-link> 被点击的时候，url 会发生相应的改变

如果使用 v-bind 指令，还可以在 to 后面接变量，配合 v-for 指令可以渲染导航菜单

 

如果对于所有 ID 各不相同的用户，都要使用 home 组件来渲染，可以在 routers.js 中添加动态参数：

{     path: '/home/:id',    component: Home}

这样 "/home/user01"、"/home/user02"、"/home/user03" 等路由，都会映射到 Home 组件

然后还可以使用 $route.params.id 来获取到对应的 id

 

 

四、编程式导航

实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转

push 后面可以是对象，也可以是字符串：

// 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由this.$router.push({ name: 'home', params: { userId: wise }})

 

 

五、前车之鉴

在学习的过程中，遇到一个困扰许久的问题，大概是从 first 组件跳转回 login 之后，无法再跳转回去。但是 url 已经被修改，刷新页面也能正常显示。

这是因为我在 first.vue 组件中的 data 里面没有写 return

 

在 vue 组件中，data 必须写为函数，且需要用 return 来返回参数。但是当 data 为空时，即使不写 return 也不会报错，所以导致了上面的问题。

 

Vue 爬坑之路（四）—— 与 Vuex 的第一次接触

在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用  props 或者 $emit 等方式http://www.cnblogs.com/wisewrong/p/6266038.html

但是如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。

 

一、安装并引入 Vuex

项目结构：

 

首先使用 npm 安装 Vuex

cnpm install vuex -S

 

然后在 main.js 中引入

import Vue from 'vue'import App from './App'import Vuex from 'vuex'import store from './vuex/store'Vue.use(Vuex)/* eslint-disable no-new */
new Vue({  el: '#app',  store,  render: h => h(App)})

 

 

二、构建核心仓库 store.js

Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。

但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。

 

在 src 目录下创建一个 vuex 目录，将 store.js 放到 vuex 目录下

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  // 定义状态  state: {    author: 'Wise Wrong'  }})export default store

这是一个最简单的 store.js，里面只存放一个状态 author

虽然在 main.js 中已经引入了 Vue 和 Vuex，但是这里还得再引入一次

 

 

三、将状态映射到组件

<template>  <footer class="footer">    <ul>      <li v-for="lis in ul">{{lis.li}}</li>    </ul>    <p>      Copyright&nbsp;&copy;&nbsp;{{author}} - 2016 All rights reserved    </p>  </footer></template><script>  export default {    name: 'footerDiv',    data () {      return {        ul: [          { li: '琉璃之金' },          { li: '朦胧之森' },          { li: '缥缈之滔' },          { li: '逍遥之火' },          { li: '璀璨之沙' }        ]      }    },    computed: {      author () {        return this.$store.state.author      }    }  }</script>

这是 footer.vue 的 html 和 script 部分

主要在 computed 中，将 this.$store.state.author 的值返回给 html 中的 author

页面渲染之后，就能获取到 author 的值

 

 

 

四、在组件中修改状态

然后在 header.vue 中添加一个输入框，将输入框的值传给 store.js 中的 author

这里我使用了 Element-UI 作为样式框架

上面将输入框 input 的值绑定为 inputTxt，然后在后面的按钮 button 上绑定 click 事件，触发 setAuthor 方法

methods: {　setAuthor: function () {　　　this.$store.state.author = this.inpuTxt　}}

在 setAuthor 方法中，将输入框的值 inputTxt 赋给 Vuex 中的状态 author，从而实现子组件之间的数据传递

 

 

五、官方推荐的修改状态的方式

上面的示例是在 setAuthor 直接使用赋值的方式修改状态 author，但是 vue 官方推荐使用下面的方法：

首先在 store.js 中定义一个方法 newAuthor，其中第一个参数 state 就是 $store.state，第二个参数 msg 需要另外传入

 

然后修改 header.vue 中的 setAuthor 方法

这里使用 $store.commit 提交 newAuthor，并将 this.inputTxt 传给 msg，从而修改 author

 

这样显式地提交(commit) mutations，可以让我们更好的跟踪每一个状态的变化，所以在大型项目中，更推荐使用第二种方法。

Vue 爬坑之路（五）—— 组件进阶

组件（Component）是 Vue.js 最强大的功能之一，之前的文章都只是用到了基本的封装功能，这次将介绍一些更强大的扩展。

 

一、基本用法

在使用 vue-cli 创建的项目中，组件的创建非常方便，只需要新建一个 .vue 文件，然后在 <template> 中写好 HTML 代码，一个简单的组件就完成了

 

一个完整的组件，除了 <template> 以外，还有 <script> 和 <style>

需要注意的是，<script> 中的 data 必须是函数

 

然后在其他文件的 js 里面引入并注册，就能直接使用这个组件了

 

 

二、使用 slot 分发内容

开发过程中，常常需要在子组件内添加新的内容，这时候可以在子组件内部留一个或者多个插口 <slot>

 

然后在调用这个子组件的时候加入内容

添加的内容就会分发到对应的 <slot> 中

 

<slot> 中还可以作为一个作用域，在子组件中定义变量，然后在父组件中自定义渲染的方式

 

这个示例中，首先在子组件中添加 <slot>，并在子组件中定义了数组变量 navs

然后在父组件中以作用域 <template> 添加内容，其中 scope 是固有元素，它的值对应一个临时变量 props

而 props 将接收子组件中，所有绑定的属性（如 text）

 

 

三、动态组件

Vue 还可以将多个子组件，都挂载在同一个位置，通过变量来切换组件，实现 tab 菜单这样的效果

这样的功能可以通过路由 vue-router 实现，但路由更适合较大的组件，而且 url 会有相应的改变

Vue 自身保留的 <component> 元素，可以将组件动态绑定到 is 特性上，从而很方便的实现动态组件切换

上例中，当 tabView 的值改变，<component> 就会渲染对应的组件，和路由的效果十分类似，但是地址栏并没有发生改变

但这样一来，每次切换组件都会重新渲染，无法保留组件上的数据。这时可以使用 keep-alive 将组件保留在内存中，避免重新渲染

 

 

 

四、递归组件

当组件拥有 name 属性的时候，就可以在它的模板内递归的调用自己，这在开发树形组件的时候十分有效

上面是一个子组件，定义了 name 为 simple03，然后在模板中调用自身，结合 v-for 实现递归

为了防止出现死循环，在调用自身的时候，加入了 v-if 作为判定条件

父组件中调用的时候，需要通过 props 传入一个 tree：

 

最终渲染结果：

Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求

Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource

目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据，所以这篇博客将结合两者来发送请求

 

前言： 

Vuex 的安装将不再赘述，可以参考之前的博客 Vue 爬坑之路（四）—— 与 Vuex 的第一次接触

使用 cnpm 安装 axios

cnpm install axios -S

安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时引入

为了解决这个问题，有两种开发思路，一是在引入 axios 之后，修改原型链，二是结合 Vuex，封装一个 aciton。具体的实施请往下看~

 

方案一：改写原型链

首先在 main.js 中引入 axios

import axios from 'axios'

这时候如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题

Vue.prototype.$ajax = axios

在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $ajax 命令

methods: {  submitForm () {    this.$ajax({      method: 'post',      url: '/user',      data: {        name: 'wise',        info: 'wrong'      }   })}

 

 

方案二：在 Vuex 中封装

之前的文章中用到过 Vuex 的 mutations，从结果上看，mutations 类似于事件，用于提交 Vuex 中的状态 state

action 和 mutations 也很类似，主要的区别在于，action 可以包含异步操作，而且可以通过 action 来提交 mutations

另外还有一个重要的区别：

mutations 有一个固有参数 state，接收的是 Vuex 中的 state 对象

action 也有一个固有参数 context，但是 context 是 state 的父级，包含  state、getters

 

Vuex 的仓库是 store.js，将 axios 引入，并在 action 添加新的方法

// store.js
import Vue from 'Vue'import Vuex from 'vuex'// 引入 axiosimport axios from 'axios'Vue.use(Vuex)const store = new Vuex.Store({  // 定义状态  state: {    test01: {      name: 'Wise Wrong'    },    test02: {      tell: '12312345678'    }  },  actions: {    // 封装一个 ajax 方法    saveForm (context) {      axios({        method: 'post',        url: '/user',        data: context.state.test02      })    }  }})export default store    

注意：即使已经在 main.js 中引入了 axios，并改写了原型链，也无法在 store.js 中直接使用 $ajax 命令

换言之，这两种方案是相互独立的

 

在组件中发送请求的时候，需要使用 this.$store.dispatch 来分发

methods: {  submitForm () {    this.$store.dispatch('saveForm')  }}

submitForm 是绑定在组件上的一个方法，将触发 saveForm，从而通过 axios 向服务器发送请求

 

 

附录：配置 axios 

上面封装的方法中，使用了 axios 的三个配置项，实际上只有 url 是必须的，完整的 api 可以参考使用说明

为了方便，axios 还为每种方法起了别名，比如上面的 saveForm 方法等价于：

axios.post('/user', context.state.test02)

完整的请求还应当包括 .then 和 .catch

.then(function(res){  console.log(res)}).catch(function(err){  console.log(err)})

当请求成功时，会执行 .then，否则执行 .catch

这两个回调函数都有各自独立的作用域，如果直接在里面访问 this，无法访问到 Vue 实例

这时只要添加一个 .bind(this) 就能解决这个问题

.then(function(res){  console.log(this.data)}.bind(this))

Vue 爬坑之路（七）—— 监听滚动事件 实现动态锚点

前几天做项目的时候，需要实现一个动态锚点的效果
如果是传统项目，这个效果就非常简单。但是放到 Vue 中，就有两大难题：
1. 在没有 jQuery 的 animate() 方法的情况下，如何实现平滑滚动？
2. 如何监听页面滚动事件？
在浏览了大量文章、进行多次尝试之后，终于解决了这些问题
期间主要涉及到了 setTimeout 的递归用法，和 Vue 生命周期中的 mounted
 
一、锚点实现
在实现平滑滚动之前，得先确保基本的锚点功能
如果没有其他要求，直接用 <a href="#id"> 是最简单粗暴的办法
但是为了满足后续的要求，必须另外想办法
 
首先在父组件（表单）中添加 class="d_jump" 作为钩子
然后在子组件中添加一个 jump 方法
jump (index) {    let jump = document.querySelectorAll('.d_jump')
    // 获取需要滚动的距离    let total = jump[index].offsetTop
    // Chrome    document.body.scrollTop = total
    // Firefox
    document.documentElement.scrollTop = total
    // Safari
    window.pageYOffset = total},
通过 offsetTop 获取对象到窗体顶部的距离，然后赋值给 scrollTop，就能实现锚点的功能
需要注意的是，各浏览器下获取 scrollTop 有所差异
Chrome： document.body.scrollTop
Firefox： document.documentElement.scrollTop
Safari： window.pageYOffset
 
二、平滑滚动
仅仅是锚点是不够的，这样的跳转十分突兀
为了更好的用户体验 ，需要将滚动的过程展现出来
如果有 jQuery 实现平滑滚动就非常简单：
$('html body').animate({scrollTop: total}, 500);
可惜没如果~~
在看了好些文章之后，有了一个大概的开发思路：
将总距离分成很多小段，然后每隔一段时间跳一段
只要每段的时间足够短，频次足够多，在视觉上就是正常的平滑滚动了
// 平滑滚动，时长500ms，每10ms一跳，共50跳
// 获取当前滚动条与窗体顶部的距离
let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
// 计算每一小段的距离
let step = total / 50
(function smoothDown () {
  if (distance < total) {
    distance += step
　　// 移动一小段
    document.body.scrollTop = distance
    document.documentElement.scrollTop = distance
    window.pageYOffset = distance
　　// 设定每一次跳动的时间间隔为10ms
    setTimeout(smoothDown, 10)
  } else {
　　// 限制滚动停止时的距离
    document.body.scrollTop = total
    document.documentElement.scrollTop = total
    window.pageYOffset = total
  }
})()
 
实际情况下，得考虑向上滚动和向下滚动两种情况，完整的代码为：
    jump (index) {        // 用 class="d_jump" 添加锚点        let jump = document.querySelectorAll('.d_jump')        let total = jump[index].offsetTop
        let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop        // 平滑滚动，时长500ms，每10ms一跳，共50跳        let step = total / 50        if (total > distance) {          smoothDown()        } else {          let newTotal = distance - total          step = newTotal / 50          smoothUp()        }        function smoothDown () {          if (distance < total) {            distance += step
　　　　　　　document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance            setTimeout(smoothDown, 10)          } else {            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total          }        }        function smoothUp () {          if (distance > total) {            distance -= step
　　　　　　　document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance            setTimeout(smoothUp, 10)          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total
          }
       } 
     }
 
 
三、修改锚点状态
在上面展示的效果中，当页面滚动的时候，锚点的激活状态会有相应的改变
其实这个效果并不难，只需要监听页面滚动事件，然后根据滚动条的距离修改锚点状态就可以了
但是在 Vue 中，应该在什么地方监听滚动事件呢？
  mounted: function () {    this.$nextTick(function () {      window.addEventListener('scroll', this.onScroll)    })  },  methods: {    onScroll () {      let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
　　　 // 586、1063分别为第二个和第三个锚点对应的距离      if (scrolled >= 1063) {        this.steps.active = 2      } else if (scrolled < 1063 && scrolled >= 586) {        this.steps.active = 1      } else {        this.steps.active = 0      }    }  }
上面的代码中，我先写了一个修改锚点状态的方法 onScroll，然后在 mounted 中监听 scroll 事件，并执行 onScroll 方法
mounted 是 Vue 生命周期中的一个状态，在这个状态下，$el （vue 实例的根元素）已经创建完毕，但还没有加载数据
从结果上看，也可以在 created 状态下监听 scroll 事件
如果对 mounted 和 created 还不够了解，可以参考官方文档·生命周期图示
 
 
Vue 爬坑之路（八）—— 使用 Echarts 创建图表

 
在后台管理系统中，图表是一个很普遍的元素。目前常用的图标插件有 charts,  Echarts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。
 
一、安装插件
使用 cnpm 安装 Echarts
cnpm install echarts -S
和之前介绍的 axios 类似，echarts 也不能通过 Vue.use() 进行全局调用
通常是在需要使用图表的 .vue 文件中直接引入
import echarts from 'echarts'
 
也可以在 main.js 中引入，然后修改原型链
Vue.prototype.$echarts = echarts 
然后就可以全局使用了
let myChart = this.$echarts.init(document.getElementById('myChart'))
 
二、创建图表
首先需要在 HTML 中创建图表的容器
需要注意的是，图表的容器必须指定宽高，也就是说 width，height 不能使用百分比，只能用 px
这样确实不够灵活，不过我们可以用 js 来改变 width 和 height，使图表容器能够自适应，具体的实现请往后看
然后在 mounted 中创建图表，具体的配置参考官方文档，这里不再赘述
 
三、按需引入
上面引入的 echarts 包含了所有图表，但有时候我们只需要一两个基本图表，这时候完整的 echarts 就显得累赘
假如只需要创建一个饼图，那么可以这么做：
  // 引入基本模板  let echarts = require('echarts/lib/echarts')  // 引入饼图组件  require('echarts/lib/chart/pie')  // 引入提示框和图例组件  require('echarts/lib/component/tooltip')  require('echarts/lib/component/legend')
之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全
可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js
 
四、适应容器
上面说过，图表的容器必须固定宽高，这确实是一个比较反人类的设定
为了解决这个问题，需要给图表容器外面再加一个容器，而这个外容器的宽高可以适应页面。上面的 <div class="charts"> 就是这样的外容器
let chartBox = document.getElementsByClassName('charts')[0]let myChart = document.getElementById('myChart')// 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽function resizeCharts () {  myChart.style.width = chartBox.style.width + 'px'  myChart.style.height = chartBox.style.height + 'px'}// 设置容器高宽resizeCharts()      
let mainChart = echarts.init(myChart)mainChart.setOption(options)
当页面加载的时候，将外容器的宽高，赋给图表容器
但这只是解决了页面加载时的自适应问题
如果在页面加载之后，仍需要图表自适应宽高，就需要用到 echarts 的媒体查询
Vue-cli 创建的项目如何跨域请求
 
问题描述：
使用 Vue-cli 创建的项目，开发地址是 localhost:8023，需要访问 localhost:9000 上的接口
 
分析原因：
不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置
不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，实现跨域请求
 
解决方案：
接口地址原本为 /form/save，但是为了匹配代理地址，在前面加一个 /api
 
如果使用了 axios，可以全局配置一个 baseURL，这样就不用挨个儿修改 url 了
axios.defaults.baseURL = '/api'
 
在 config>index.js 的 dev 中添加配置项 proxyTable：
    proxyTable: {      '/api': {        target: 'http://127.0.0.1:9000/',        changeOrigin: true,        pathRewrite: {          '^/api': '/'        }      }    },
其中 '/api' 为匹配项，target 为被请求的地址
因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的
所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'
如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉