01项目准备

写在前面

之前写的公司框架学习文档因为公司新框架修bug速度实在太快已经落后了，所以决定用自己的毕设当作vue3的重新复习顺便为了找一个合适的前端工作

技术选型

因为暂时用不上后端内容，所以决定使用vue3 前端框架+elementUi库+echarts图标动态演示+handsfree.js人脸识别

首先这是一个vue3框架下的项目

来看看怎么安装element-plus，因为每次搜索element 点击vue3版本都会上国外的网站，现在放一个国内的element-plus

国内elementUI-plus

# NPM
$ npm install element-plus --save

安装element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

好，ui库正常。

引入echarts

 npm install echarts 

看看echarts的版本，好的是5.2.2

那么使用echarts 5+ 和vue3 的引入方法

import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts

找个页面塞个例程

    <div style="width:500px;height: 300px;" id="main">
    
    </div>
    <script>
      export default{
      mounted(){
      var myChart=this.$echarts.init(document.getElementById("main"));
    
      var option;

      option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
      yAxis: {
        type: 'value'
        },
      series: [
        {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
        }
        ]
      };

      option && myChart.setOption(option);
    }
}
</script>

接下来是handsfree.js

https://handsfree.js.org/#installing

npm install handsfree

虽然网上没有教程，但

import Handsfree from 'handsfree'
app.config.globalProperties.$Handsfree = Handsfree

const handsfree = new this.$Handsfree({hands: true})
handsfree.enablePlugins('browser')
handsfree.start()

有用，但不是完全有用,我们可以看到除了帅气一无所有的脸

原来在下面，至此，引入全部解决

写在后面

如果实习的大半年经常加班算不算工作一年半

下一篇文章处理echarts动态变化