9.22 关于一些三方UI组件的使用;intro.js指引效果

view-design

安装

npm install view-design --save

引入

main.js

1.全局引入

import ViewUI from 'view-design';

import 'view-design/dist/styles/iview.css

Vue.use(ViewUI);

2.按需引用

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components"
  }]]
}

import { Button, Table } from 'view-design';
Vue.component('Button', Button);
Vue.component('Table', Table);

国际化 兼容 vue-i18n@6.x

import ViewUI from 'view-design';
import VueI18n from 'vue-i18n';
//  view design 语言包
import en from 'view-design/dist/locale/en-US';
import zh from 'view-design/dist/locale/zh-CN';

Vue.use(VueI18n);
Vue.use(ViewUI);
Vue.locale = () => {};
// Create VueI18n instance with options
const i18n = new VueI18n({
    locale: 'en',  // set locale
    messages  // set locale messages
});
// 合并语言包
const messages = {
    en: Object.assign({ message: 'hello' }, en),
    zh: Object.assign({ message: '你好' }, zh)
};

Muse UI

安装

npm i muse-ui -S

全局引入

import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';
Vue.use(MuseUI);

ECharts

安装

npm install echarts --save

 <template>
	组件中出现
    <div id="main" style="width: 500px;height: 500px;"></div>
 </template>

<script>
    import * as echarts form 'echarts'
    export default {
        name:"Hello world",
        mounted(){
            
        },
        methods:{
            aa(){
                 //基于准备好的DOM，初始化echarts实例 
                var myChart = echarts.init(document.getElementById('main'));
                // 绘制图表
          	myChart.setOption({
            title: {
              text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          });
            }
        }
    }
</script>

HightCharts

安装

npm install hightcharts --save

v-calendar 日历组件

安装

npm i v-calendar

main.js 引入

import VCalendar from 'v-calendar'; // 引入日历插件 
Vue.use(VCalendar, {
  componentPrefix: 'vc',
});

使用

<!-- 测试日历用例 -->
   <vc-calendar  :attributes='attrs'  ></vc-calendar>

vue-introjs-实现网站引导功能

安装

npm install intro.js --save

配置

main.js

import intro from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
// introjs还提供了多种主题，可以通过以下方式引入
import 'intro.js/themes/introjs-modern.css' // introjs主题

把intro.js加入到vue的prototype中，方便使用，就可以直接通过this.$intro()来调用了

// 加到prototype中，直接通过vue实例就能调用intro了
Vue.prototype.$intro = intro

使用

选定一个html标签，加上data-intro属性，赋值内容，以下面为例

data-step是展示的步骤设置，填写数字即可

<img data-intro="这是一张普通的图片" data-step="1" src="./assets/logo.png">

在script中，加入mounted方法，启动intro

mounted () {
   this.$intro().start()
},

一些问题
只首次进入的时候显示引导
新手引导一般只有我们第一次进入这个网站的时候才会出现引导内容，后续都不会再显示，我们这里如何实现？

可以通过localstorge来存储一个key，来判断用户是否是第一次进入这个网站，只需要在引导启动时候加个判断就行，代码如下：

mounted () {
    this.$nextTick(() => {
      if (localStorage.getItem('isFirst') === null || localStorage.getItem('isFirst') !== '1') {
        this.$intro().start()
        localStorage.setItem('isFirst', 1)
      }
    })
  }