我们这次开发是使用vue的脚手架来进行开发,前面我们已经使用过最原生的方式去编写我们的vue的语法,从今天开始就使用vue的脚手架,但是前提是你需要用于node的环境

      在我们开始之前，我们至少需要有node

 npm是什么？

       npm是一个强大的包管理工具，它使开发人员能够轻松地安装、更新和管理项目依赖的包。通过初始化一个package.json 文件，我们可以描述你的项目并记录其依赖关系。使用npm install命令，我们可以安装和管理包。使用npm publish命令，我们可以发布自己的包（由于日常很少涉及发布自己的包，这里就不总结了）。无论是在开发过程中还是在分享你的包时，npm都提供了丰富的功能和命令来满足你的需求

      npm不需要单独安装。在安装Node的时候，会连带一起安装npm

构建Vue项目

 安装淘宝的镜像加速：

      我们为什么要安装淘宝的镜像呢？ 因为我们使用npm的话下载的速度是很慢的,因为使用的是国外的镜像,很大的机率是会报错的,所以这里我们使用淘宝的镜像,是我们国内的下载会很快

npm config set registry=http://registry.npm.taobao.org

 查看镜像源更换是否生效

npm config get registry

 接下来就是安装我们的vue的环境

安装vue

 -g代表全局安装

npm install vue -g

安装vue-cli：

     CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。

cnpm install vue-cli -g

 安装webpack (用于打包项目)

npm install webpack -g

接下来就是创建我们的vue的项目,首先先找到你要存放vue项目的地方,我们在最前面输入cmd 然后进入控制台,会是在当前的目录下 

接下来输入创建

vue create 项目名字

这里选择最后一个,因为它的意思是让你选择默认的模板,这里我们自定义 

 这里是让我们选择的,使用空格勾选或者取消,我们只需要路由和Bable就可以 

 选3.x

sg是

是否使用路由的工作模式,这里输入Y

 你的所有的包都在哪里？选择最后一个 

是否把他当作一个模板，这里是 N

 ​​​​​

最后我们一起输入 从 cd XXX 到npm run serve 启动项目,它会给你一个地址,就是我们项目的地址 

接下来我们要使用编程工具打开这个项目

  首先我们需要知道

router的配置文件

使用Element-Plus

  首先使用 Element-Plus,我们是需要安装一下的,就像我们引入外部的js文件一样,我们可以通过终端来安装

 输入 cnpm install element-plus来安装,我们可以看到管理包的地方已经使用了

这里我们只是假设买了一盒烟,但是没有抽,哪我们买了有什么作用呢？所以我们需要使用一下（抽一下）,顾名思义引入

我们在element-plus中引入一个按钮做一个测试

说明我们是引入成功的,接下来找一个element-plus的一个表格将我们的数据展示 ，这里我们只需要页面就可以了,不需要所有的东西都引入，因为它用的是setup语法糖

接下来我们先需要准备好我们对应的数据,这里我后端使用了分页插件

我们的表格是页面刚加载的时候就给我们展示出来的,所以我们先定义一个方法,里面是用来获取我们相对于的数据,而这里刚加载的时候,就需要展示的话,需要使用到vue的生命周期

   这里我们先不做过多的讲解！！ 

我们使用的是mounted钩子函数,它是vue组件在没有渲染页面的时候执行的,但是数据和方法都是已经被加载出来的,现在我们只是将后端的数据存入到了emplist中

 这里的话,我们其实可以查看我们element-plus这个表格的代码,让在script中定义了一些假数据,然后和data进行了绑定,我们的是后端过来的,也是可以绑定的, fixed是用来固定的,是我们表格的样式

prop是我们每一条数据的字段,label是可视化的,一个标签，而最后那个是我们的两个按钮,被固定到了右边

效果

       接下来就是我们分页了,有表格的地方是绝对要有我们的分页的,接下来我们就要找到一个好看的分页了，这个是非常的齐全的,所以我们直接使用这个就可以,如果打开代码要复制粘贴的时候代码很多,该怎么能看的清楚呢? 我们可以看到上面有一个 All combined的标签,我们就可以找到这个标签,这个标签下面就是我们要复制的

首先我们需要知道这个表格和分页是分开的,我们先只看分页不用看表格,

       第一个双向绑定,绑定了一个currentPage4 根据名字就可以知道是当前第几页,双向绑定的话我们是需要自定义这个currentPage4的,第二个是pageSize4 当前页有多少条数据,而 page-sizes这个参数的话,是我们页面的下拉框,用来选择 我想要当前有多少条数据, 这样看来它是与我们pageSize4是联动起来的,当我们选择下拉框之后,获取到想要当前有几条数据,然后赋值给pageSize4,因为我们后面的分页查询,就是需要我们两个参数, ==> 当前第几页,当前多少条数据, total是我们一共有多少条数据,size-chnage是用来监听选择想要当前有几条数据下拉框的,里面是需要有参数接收我们的数据,最后一个使用了接收当前是第几页

	 
	    
	    
	    
	    
	    
	    
	      
	        
	          编辑
	        
	        删除
	      
	    
	  
	  



	.demo-pagination-block + .demo-pagination-block {
	  margin-top: 10px;
	}
	.demo-pagination-block .demonstration {
	  margin-bottom: 16px;
	}

到此我们就讲解完了