Vue – 第2页 – LuoYuankai

4月 3, 2020

vue-awesome-swiper 轮播组件

作者罗源凯在 Vue 标签 Vue

https://www.npmjs.com/package/vue-awesome-swiper
https://www.swiper.com.cn/

3月 31, 2020

Vue 项目中使用 echarts

作者罗源凯在 Vue 标签 Echarts, Vue

官网

第一种方法，直接引入echarts
安装echarts项目依赖
npm install echarts –save

//或者
npm install echarts -S

//var echarts = require(‘echarts’); //单个引用

全局引入
我们安装完成之后，可以在 main.js 中全局引入 echarts
import echarts from “echarts”;
Vue.prototype.$echarts = echarts;

创建图表
<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
export default {
  name: "app",
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>
问题:
在以上例子中，我们获取dom的方式是通过document.getElementById('main'),也就是元素的id获取到dom的，这其实是会出现问题的。
代码如下
<div id="main"></div>
this.$echarts.init(document.getElementById('main'))
因为vue是单页面应用，如果将以上的组件使用两次，一个页面内id是不允许相同的，就会出现第一个组件正常显示，第二个组件无法显示。
解决办法:
在vue中，我们可以通过另一种方式获取dom，vue有一个$refs的对象，只要将组件注册ref。
代码如下
<div ref="main"></div>
this.$echarts.init(this.$refs.main)
或
this.$echarts.init(this.$refs['main'])
通过以上方法获取dom，无论组件复用多少次，都不需要担心id唯一的问题了。

第二种方法，使用 Vue-ECharts 组件
安装组件
npm install vue-echarts -S

使用组件
<template>
  <div id="app">
    <v-chart class="my-chart" :options="bar"/>
  </div>
</template>
<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
//按需引入
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/markLine";
import "echarts/lib/component/graphic";

export default {
  name: "App",
  components: {
    "v-chart": ECharts
  },
  data: function() {
    return {
      bar: {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    };
  }
};
</script>
<style>
.my-chart {
  width: 800px;
  height: 500px;
}
</style>

用 npm 与 Vue Loader 基于 ES Module 引入（推荐用法）用 npm 与 Vue Loader 基于 ES Module 引入（推荐用法）

import Vue from ‘vue’
import ECharts from ‘vue-echarts’ // 在 webpack 环境下指向 components/ECharts.vue

// 手动引入 ECharts 各模块来减小打包体积
import ‘echarts/lib/chart/bar’
import ‘echarts/lib/component/tooltip’

// 如果需要配合 ECharts 扩展使用，只需要直接引入扩展包即可
// 以 ECharts-GL 为例：
// 需要安装依赖：npm install –save echarts-gl，并添加如下引用
import ‘echarts-gl’

// 注册组件后即可使用
Vue.component(‘v-chart’, ECharts)

图表主题颜色的修改
echarts中有三种常见主题类型: default, light, dark，读者没有太大的颜色要求的话，可以直接修改theme。
示例如下：

<v-chart :options="barOptions" autoresize theme="light"></v-chart>
柱状图颜色的修改可以在options参数中直接添加color数组，如下示例：
options:{
    ...
    color: ["#64CDF0", "#F5686F"],
    ...
}
另外可参考官方示例，直接添加theme.json文件。
`````
2.XY轴体颜色和文本颜色修改
x轴的样式修改可以在xAxis配置参数中进行设置，y轴在yAxis中进行配置，可以修改轴线的颜色，文本的颜色大小，图标内分割线的颜色等

options: {
…
xAxis: [
{
type: “category”,
data: [“1月”,”2月”,”3月”,”4月”,”5月”,”6月”,”7月”,”8月”,”9月”,”10月”,”11月”,”12月”],
// 修改文本的颜色
axisLabel: {
color: “#BB3137”,
fontSize: 10
},
// 修改轴线的颜色
axisLine: {
lineStyle: {
color: “#BB3137”
}
}
}
],
yAxis: [
{
type: “value”,
axisLabel: {
color: “#BB3137”,
fontSize: 10
},
// 修改y轴横向分割线的颜色
splitLine: {
lineStyle: {
color: [“#FFC9CB”]
}
},
axisLine: {
lineStyle: {
color: “#BB3137”
}
}
}
],
…
}

横向柱状图的显示
在配置xAxis和yAxis的时候，第一个参数就是type，这个参数用于说明该轴的类型，当x的type为value，y的type为category的时候，柱状图就会显示成横向柱状图。
过滤xy轴文本内容
上图二中，如果没有做任何处理，x轴会显示20000,40000…这种类型，这样显示内容较长，不太友好，那么怎么改成上述那种显示呢？
xy轴文本的配置项中，都有formatter这一配置项，直接在这里进行修改就可以，示例如下：

xAxis: [
{
type: “value”,
axisLabel: {
fontSize: 10,
formatter: function(value, index) {
return parseInt(value / 10000) + “万”;
}
}
}
],

Y轴文本显示在轴线内
刻度标签默认是显示在刻度线左侧，如果想要显示在右侧，需要将inside设置为true即可，当进行此设置后，刻度标签可能会被柱状图覆盖掉，这时候，还需要设置zlevel，示例如下：

        inverse: true,
        axisLabel: {
          fontSize: 10,
          inside: true,
          interval: 0
        },
        zlevel: 1

inverse是用来显示是否翻转刻度线上的内容，即默认从上往下是321显示，如果你不想这样显示，将inverse设为true，就会按照123方式显示。
6.在柱状条头部添加标签内容
在series中添加label标签即可，可以在此标签内进行文本内容的颜色，位置，内容等的设置，如下示例：

series: [
{
name: “直接访问”,
type: “bar”,
barWidth: “40%”,
label: {
show: true,
position: “right”,
color: “#3D383A”,
formatter: “￥{c}”
},
data: [28540, 33534, 9390, 80330, 37220]
}
]

自定义图例修改
如上图所示，我想要自定义设置图例中的文本内容，让图例文本可以换行显示，并且大小颜色可以任意设置，这该如何设置呢？
虽然样式显示并不复杂，但是想在echarts中实现，却是有些麻烦，formatter支持函数自定义修改，我们可以通过此方法来进行设置，将想要显示的内容数据设置成全局变量，然后在此方法中进行操作修改，所有的设置均在legend参数中进行配置。
默认的图例是个方形，如果想要改成圆形，可以将icon设置成circle，即可将图例设置成原型，大小可以通过itemWidth和itemHeight来设置。
示例如下：

legend: {
icon: “circle”, // 将图例设置成原型
bottom: 0,
left: “center”,
itemWidth: 10,
itemHeight: 10,
// itemGap: 10,
formatter: name => {
let data = pieData; // 全局变量
let value = “”;
let price = “”;
for (let i = 0; i < data.length; i++) {
if (data[i].name == name) {
value = data[i].value;
price = data[i].price;
}
}
let arr = [
“{a|” + name + ” ” + value + “%}”,
“{b|￥” + price + “}”
];
return arr.join(“\n”);
},
textStyle: {
rich: {
a: {
fontSize: 12,
width: 100,
align: “left”
},
b: {
width: 100,
fontSize: 14,
align: “left”,
lineHeight: 20,
padding: [0, 0, 5, 0]
}
}
},
data: [“一季度”, “二季度”, “三季度”, “四季度”]
},
var pieData = [
{ value: 28, name: “一季度”, price: 108626.0 },
{ value: 24, name: “二季度”, price: 93108.0 },
{ value: 19, name: “三季度”, price: 73710.0 },
{ value: 29, name: “四季度”, price: 112506.0 }
];

环比图中间显示内容
官方示例中并没有给出环比图中间显示自定义图文的内示例，有个示例是，点击圆环内容，中间显示点击区域对应的内容名称，这个太过简单，并不能满足自定义中间区域图文的要求，想要实现这种要求，就需要用到graphic，在使用时需要单独引用出来，否则会报错，这是一个原生图形元素组件支持image，text，circle等元素。
使用示例如下：

options: {
…
graphic: {
type: “group”,
top: “middle”,
left: “center”,
height: 80,
children: [
{
type: “text”,
left: “center”,
top: “30%”,
style: {
text: “全年总业绩”,
textAlign: “center”,
textVerticaAlign: “middle”,
fill: “#999”,
font: “15px ‘Helvetica’,sans-serif”
}
},
{
type: “text”,
top: “60%”,
left: “center”,
position: [0, 10],
style: {
text: “9912322.00”,
textAlign: “center”,
textVerticaAlign: “middle”,
fill: “#3d383a”,
font: “22px ‘Helvetica’,sans-serif”
}
}
]
},
…
}
““

3月 14, 2020

AVUE

作者罗源凯在 Vue 标签 AVUE

axios发送post请求，将数据以表单形式提交

axios 请求配置中，transformRequest配置允许在向服务器发送前，修改请求数据。
// transformRequest 允许在向服务器发送前，修改请求数据
// 只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream

  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

处理方法一：

axios({
  url: '/user',
  method: 'post',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  transformRequest: [function (data) {
    // Do whatever you want to transform the data
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
或可以在main.js中进行配置
// main.js
import Axios from 'axios'
import VueAxios from 'vue-axios'
const MyAxios = Axios.create({
  transformRequest: [function (data) {
    // 将数据转换为表单数据
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
Vue.use(VueAxios, MyAxios)

处理方法二：使用qs模块

先安装qs模块 npm install --save qs
axios({
  url: '/user',
  method: 'post',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  transformRequest: [function (data) {
    data = Qs.stringify(data);
    return data;
  }],
  headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
})

2月 29, 2020

Vue.js

作者罗源凯在 Vue 标签 Vue

Vue官网
 Vue CLI
Vue中文
 Vue CLI 中文
 Vue.js 教程
Webpack打包工具
cnpm install webpack -g
npm i webpack –save-dev
webpack -v

1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3、NPM 方法
$ cnpm install vue
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

全局安装 vue-cli
$ cnpm install –global vue-cli
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
npm install -g @vue/cli
yarn global add @vue/cli
vue -V
本地全局配置一下chormedriver源，打开终端就一个命令：
npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

vue create 项目名
vue ui

创建一个基于 webpack 模板的新项目

Vue CLI 3 和旧版使用了相同的vue命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的vue init功能，你可以全局安装一个桥接工具：安装完后就还可以使用 vue init 命令
cnpm install -g @vue/cli-init

vue init webpack my-project
– 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob test@runoob.com
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated “my-project”.
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目，安装并运行：
$ cd my-project
$ cnpm install
$ cnpm run dev

npm和yarn命令对比npm yarn

npm install
yarn
npm install react –save
yarn add react
npm uninstall react –save
yarn remove react
npm install react –save-dev
yarn add react –dev
npm update –save
yarn upgrade

1.node+webpack+npm(运行环境)
2.vue+vue-router+vuex(框架技术)
3.element-ui、iview、vant(UI组件库)

主流的vue-cli脚手架，在小程序方面用的是mpvue-cli脚手架
采用主流的编辑器，配置相应的eslint语法规范
eslint配置
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
“editor.detectIndentation”:false,
// 重新设定tabsize技术培训1- 111 -本文档使用看云构建
“editor.tabSize”:2,
// #每次保存的时候自动格式化
“editor.formatOnSave”:true,
// #每次保存的时候将代码按eslint格式进行修复
“eslint.autoFixOnSave”:true,
// 添加 vue 支持
“eslint.validate”: [”javascript”,”javascriptreact”,{“language”:”vue”,”autoFix”:true}],
// #让函数(名)和后面的括号之间加个空格
“javascript.format.insertSpaceBeforeFunctionParenthesis”:true,
// #这个按用户自身习惯选择
“vetur.format.defaultFormatter.html”:”js-beautify-html”,
// #让vue中的js按编辑器自带的ts格式进行格式化
“vetur.format.defaultFormatter.js”:”vscode-typescript”,”vetur.format.defaultFormatter.scss”:”prettier”,”vetur.format.defaultFormatterOptions”:{“js-beautify-html”:{“wrap_attributes”:”force-aligned”
// #vue组件中html代码格式化样式
}}}

错误解决

npm run 运行项目时报错： getaddrinfo ENOTFOUND x86_64-apple-darwin13.4.0
unset HOST
sudo vi /etc/hosts加：127.0.0.1 localhost
修改/etc/hosts,在里面增加一行：127.0.0.1 x86_64-apple-darwin13.4.0

分类目录Vue

vue-awesome-swiper 轮播组件

Sass

es6

Vue to PDF

使用html2canvas和jspdf 质量较差

使用window.print()方法

用插件 vue-print-nb

使用lodop实现打印

Vue中使用excel导出