2021.12.08事件
一、初始vue-cli
简介：当我们开发大型项目的时候，需要用到vue-cli来操作
1.安装
1.1 首先 window建+R 打开运行窗口，输入cmd，检查是否有node环境（检查指令node -v）还有工具npm（检查指令npm -v）
1.2 进入官网 https://cli.vuejs.org/zh/ 查询安装教程，输入指令npm install -g @vue/cli 安装vue-cli 环境，安装完成后用指令vue --version 检查安装版本是否正确
2.创建项目
2.1 新建文件夹L01，右键打开终端，选择默认配置文件，选择cmd，就是Command Prompt
2.2 输入指令vue create + 文件名，注意文件名不可有中文或者大写字母，这里我们建立项目demo
2.3 选择vue2 执行下去，（用上下左右键可以选择vue2或者vue3执行项目的建立）
2.4 到达此时，项目建立完毕，L01中已经自动建立好项目文件
node_modules表示项目依赖，
babel.config.js是在项目打包时，对es6语法转换成es5语法，gitignore是忽略文件，README.md文件是写文档的，就是使用说明，
package.json包的描述文件（不可删除）中，devDependencies开发依赖，depedencies生产依赖，
package-lock.json依赖的详情文件（此文件可以在第二次下载依赖包时会很快，没有也不要紧，会下载最新的版本）
public是静态资源文件，一般不动它
src是开发目录，里面一般有静态文件夹assets，例如字体图标，样式，图片等等； components组件库；App.vue全局组件；main.js入口文件（如果需要改变入口文件名例如：index.js改为入口文件，可以在package.json文件中第一个对象对象中添加“mian”：“index.js”）
注意：打包项目时，把node_modules删除后打包，使用时npm i 下载依赖包node_modules
3.开发伊始
3.1 .vue文件都是组件，main.js中，vue实例中的render：h=>h(App)是一个渲染函数，把App组件中的内容渲染到页面中
3.2 cd demo指令选择文件夹demo，然后执行npm run serve 指令运行文件，打开网页链接，观察编译效果
3.3 xxx.vue是vue的单文件组件
每个vue的单文件组件由三个部分组成：template里面放置模板内容，script里面放置js代码，style里面放置样式
3.4 npm run build 打包指令，会打包为一个文件夹dist，这就是你产品上线的文件
4. 组件使用步骤
4.0 首先建立一个组件Child.vue
每个组件，其实就是一个导出的对象
注意：组件里面的data一定要是一个方法，由方法返回一个对象
4.1 导入组件App组件中
import Child from './components/Child.vue' 注意：黑色加粗字体名字可以自己命名
4.2 注册组件
component :{ Child, }
4.3 使用组件
4.4 App组件中的数据data如何在components组件库中的组件Child.vue在中使用呢？
App.vue里的插件
Child.vue采用props：[ " 属性名 " ],接入数据
注意：如果props中的属性名是一个对象，那么属性名是可以改变的
如果props中的属性名是一个属性，那么属性名是不可以改变的
注意：监听事件流程（组件中监听器watch=>组件DOM中绑定事件=>vue实例中定义函数）其实就相当于v-model
4.5 用户代码片段的设置
左下角设置，选择用户代码片段，搜索vue，选择vue.json设置
5. 组件库Element-ui的使用（如何使用第三方组件）
5.1 安装组件库，可见官网网址https://element.eleme.cn/#/zh-CN/component/layout中，npm i element-ui -S指令安装，注意文件夹的路径demo中安装
5.2 在 main.js 中写入以下内容：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
5.3 找到要用的组件，复制黏贴代码就好了
6. 在项目中引入 Apache ECharts
6.1 进入官网https://echarts.apache.org/handbook/zh/basics/import，选择在项目中引入 Apache ECharts，根据指令npm install echarts --save安装
6.2 组件JS中引入ECharts
import * as echarts from 'echarts'
6.3 在mounted(){ } 即挂载完成后，黏贴文档中的
// 基于准备好的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]
}
]
});
在此基础上，根据从数据库引用的数据修改下，不要轻易改动不需要改动的部分，如下图所示
6.3 文档中有很多可供选择的细节效果
1. 文档=>API=>配置项，有很多不同的细节效果可供选择
Option中的细节效果，例如：
标题：title，提示框组件：tooltip，图例组件：legend，网格：grid，工具栏：toolbox，X轴数据：xAxis，Y轴数据：yAxis
2. 示例选项中，可以选用效果图，下载示例，复制源码修改