前端技术栈:5分钟入门VUE+Element UI

Chase620 等级 641 0 0

目录

前端技术栈:5分钟入门VUE+Element UI

前端技术栈:5分钟入门VUE+Element UI

前言

2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 + Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进

VUE是啥?简单来说就是一个JS框架

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

此处可以看VUE入门视频:https://learning.dcloud.io/#/?vid=0

本教程是给有一点基础的人进行VUE的快速入门,搭建一个单页面的增删改查。

效果演示

[图片上传失败...(image-56de9f-1612435593826)]

Nodejs

现在的前端都是模块化开发了,需要Nodejs的支持,到官网下载Nodejs一路Next即可安装,官网地址:https://nodejs.org/en/

安装好后打开cmd命令行窗口,输出node -v,如果有版本号说明安装成功,同样输入npm -V如果有版本号说明npm安装成功(npm为nodejs的包管理器)

json-server

在实战VUE之前先了解下json-server,顾名思义json服务器,在我们的入门实战中,不想引入太过于复杂的后端环境但是又想体验模块化的前端整个HTTP请求的完整过程,所幸Nodejs提供了json-server工具,方便快速的搭建简易服务器。

安装json-server

npm i json-server -g 
  • i表示install,即安装
  • -g表示global,即全局安装

运行json-server

随便找个目录,创建一个db.json文件,内容如下

{
  "data": []
} 

然后在该目录下打开命令行窗口,执行

json-server --watch db.json 

回显如下说明成功

 \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/data

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching... 

测试json-server

http://localhost:3000/data是接口地址,直接用curl发送POST,DELETE,PATCH,GET请求模拟增删改查,只要测试一个通过了即可,其他的感兴趣可以测试下。

增(POST)

curl "http://127.0.0.1:3000/data" -H "Content-Type: application/json" -d "{\"name\":\"zhangsan\"}" -X POST 
  • -H表示增加请求头
  • -d后面是数据
  • -X POST表示用POST请求

返回值如下

{
  "name": "zhangsan",
  "id": 2
} 

再看一下我们刚才创建的db.json文件,里面多了我们刚才POST的数据。实际上就是存在了这个文件里面。

改(PATCH)

注意改的时候url后面跟上id

curl "http://127.0.0.1:3000/data/2"  -H "Content-Type: application/json" -d "{\"name\":\"lisi\"}"  -X PATCH 

返回如下

{
  "name": "lisi",
  "id": 2
} 

说明修改成功

查(GET)

curl "http://127.0.0.1:3000/data"  -X GET 

直接查全部

[
  {
    "name": "lisi",
    "id": 2
  }
] 

删(DELETE)

删除id为2的数据

curl "http://127.0.0.1:3000/data/2" -X DELETE 

返回如下

{} 

VUE实战

全局安装vue-cli

vue-cli是vue的脚手架,所谓脚手架说白了就是快速创建模板化的项目,不用每次创建项目都去重复那些固定化的操作,注意我们安装的是vue2.0的脚手架

npm install -g vue-cli 

不要和vue3.0的混淆,vue3.0是npm install -g @vue/cli,此处不需要安装3.0,否则会冲突

全局安装webpack

webpack可以将vue项目打包成静态文件

npm install webpack -g 

vue 2.0 + Element UI 项目搭建

基础版本搭建

随便找个目录输入如下命令

# 初始化一个叫做vue2_elementui的项目,使用webpack模板
vue init webpack-simple vue2_elementui

# 进入项目目录
cd vue2_elementui

# 构建
npm install

# 运行
npm run dev 

经过上面的操作,打开http://localhost:8080/如果能看到下面的页面说明搭建成功了

前端技术栈:5分钟入门VUE+Element UI

前端技术栈:5分钟入门VUE+Element UI

引入Element UI

上面的先CTRL + C退出,下面安装Element UI依赖

# 安装Element UI
npm install element-ui -S

# 顺便安装vue-router 和 vue-resource,前者是路由,后者是执行Ajax请求用到的依赖
npm install vue-router vue-resource --S

# 安装moment,事件选择组件
npm install moment -S 
  • -S表示只在该项目下安装,不是全局安装

打开main.js,引入上面安装的组件

import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

import axios from 'axios'
import moment  from 'moment'

Vue.filter('moment', function (value, formatString) {
  formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
  return moment(value).format("YYYY-MM-DD"); // value可以是普通日期 20170723
});

Vue.prototype.$axios = axios

new Vue({
  el: '#app',
  render: h => h(App)
}) 

打开APP.vue,修改如下

<template>
  <div id="app">
     <img src="./assets/logo.png">
    <div>
      <el-button @click="startHacking">element ui 安装成功</el-button>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    }
  },
  components:{
    UserInfo
  }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style> 

最后再次运行

npm run dev 

如果出现下面的页面,而且点击页面会出现右边的提示框,说明Element UI安装成功

前端技术栈:5分钟入门VUE+Element UI

前端技术栈:5分钟入门VUE+Element UI

简单增删改查页面

用户信息组件UserInfo.vue

<template>
  <div class="info">
    <h1>用户信息管理界面</h1>
    <el-row>
      <el-col :span="20" :push='2'>
        <div>
          <el-form :inline="true">
            <el-form-item style="float: left" label="查询用户信息:">
              <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <el-table
            :data="searchUserinfo(keyUser)"
            border
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="60">
            </el-table-column>
            <el-table-column
              label="日期"
              align="center"
              width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.date | moment}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="姓名"
              align="center"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="邮箱"
              align="center"
              width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.email }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="标题"
              align="center"
              width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="评价"
              align="center"
              width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.evaluate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.state }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>
    <EditUser :dialogEdit="dialogEdit" :form="form" @updateEdit="getUserInfo"></EditUser>
  </div>
</template>

<script>
import AddUser from './AddUser'
import EditUser from './EditUser'
export default {
  name: 'info',
  data () {
    return {
      tableData:[],
      dialogEdit:{
        show:false,
      },
      dialogAdd:{
        show:false
      },
      keyUser:"",
      form:{    //编辑信息
        date:'',
        name:'',
        email:'',
        title:'',
        evaluate:'',
        state:''
      },
    }
  },
  methods:{
    getUserInfo() {
      this.$axios.get('http://localhost:3000/data').then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    hanldeAdd(){  //添加
      this.dialogAdd.show = true;
    },
    handleEdit(index,row){  //编辑
      this.dialogEdit.show = true; //显示弹
      this.form = {
        date:row.date,
        name:row.name,
        email:row.email,
        title:row.title,
        evaluate:row.evaluate,
        state:row.state,
        id:row.id
      }
      console.log(row)
    },
    handleDelete(index,row) {
      // 删除用户信息
      this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
        this.$message({
          type:"success",
          message:"删除信息成功"
        })
        this.getUserInfo()    //删除数据,更新视图
      })
    },
    searchUserinfo(keyUser) {
      return this.tableData.filter((user) => {
        if(user.name.includes(keyUser)) {
          return user
        }
      })
    }
  },
  created(){
    this.getUserInfo()
  },
  components:{
    AddUser,
    EditUser
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
  font-size: 30px;
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 5px;
  border-bottom: 2px solid #409EFF;
  width: 300px
}
</style> 

这是列表主组件,查询和展示用的,长下面这样

[图片上传失败...(image-e10941-1612435593825)]

其中引入了AddUser组件和EditUser组件

添加用户组件AddUser.vue

<template>
  <div class="hello">
    <el-dialog title="添加用户信息" :visible.sync="dialogAdd.show">
      <el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules">
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="formDate.date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formDate.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formDate.email"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="formDate.title"></el-input>
        </el-form-item>
        <el-form-item label="评价" prop="evaluate">
          <el-input v-model="formDate.evaluate"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-input v-model="formDate.state"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd.show = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormAdd('formdong')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AddUser',
  props:{
    dialogAdd:Object
  },
  data () {
    return {
      formDate:{
        date:'',
        name:'',
        email:'',
        title:'',
        evaluate:'',
        state:''
      },
      formrules:{
        date:[{required:true,message:"日期不能为空",trigger:"blur"}],
        name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
        email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
      }
    }
  },
  methods:{
    dialogFormAdd(formdong) {
      this.$refs[formdong].validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {
            this.$message({
              type:"success",
              message:"添加信息成功"
            })
            this.dialogAdd.show = false;
            this.$emit('update');

          })
          this.formDate  = ""
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style> 

这是添加用户信息组件

前端技术栈:5分钟入门VUE+Element UI

前端技术栈:5分钟入门VUE+Element UI

编辑用户组件EditUser.vue

<template>
  <div class="hello">
    <el-dialog title="编辑用户信息" :visible.sync="dialogEdit.show">
      <el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules">
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="评价" prop="evaluate">
          <el-input v-model="form.evaluate"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-input v-model="form.state"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit.show = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormEdit('formEdit')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props:{
    dialogEdit:Object,
    form:Object
  },
  data () {
    return {
      formrules:{
        date:[{required:true,message:"日期不能为空",trigger:"blur"}],
        name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
        email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
      }
    }
  },
  methods:{
    dialogFormEdit(formEdit) {
      this.$refs[formEdit].validate((valid) => {
        if (valid) {
          this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
            this.$message({
              type:"success",
              message:"编辑信息成功"
            })
            console.log(res)
            this.dialogEdit.show = false;
            this.$emit('updateEdit')
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style> 

编辑和新增类似

在APP.vue中引入组件

APP.vue修改如下,其中import UserInfo from './UserInfo'表示引入组件

表示调用该组件

<template>
  <div id="app">
     <img src="./assets/logo.png">
    <div>
      <el-button @click="startHacking">element ui 安装成功</el-button>
    </div>
    <hr>
    <UserInfo></UserInfo>
  </div>
</template>

<script>
import UserInfo from './UserInfo'
export default {
  methods: {
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    }
  },
  components:{
    UserInfo
  }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style> 

最后打开页面,看看是否能增删改查

前端技术栈:5分钟入门VUE+Element UI

前端技术栈:5分钟入门VUE+Element UI

此时,项目结构如下图所示

[图片上传失败...(image-ae5dd1-1612435593825)]

总结

此处假设你已经看过VUE基础视频了:https://learning.dcloud.io/#/?vid=0

main.js

main.js很重要,里面定义了入口组件APP.vue;引入了项目所需要的包

组件三件套

分别是template,script,style,新组件就这样来定义

<template>
 //定义该组件的模板
</template>

<script>
import com1 from 'XXX'
import com2 from 'XXX'
export default {
  name: '组件名字',
  data () {
    return {
        //定义组件数据
      },
    }
  },
  methods:{
    //定义组件方法
  },
  created(){
    this.getUserInfo()
  },
  components:{
    com1,com2//定义改组件引用的其他组件
  }
}
</script>

<style>
//定义该组件用到的样式
</style> 

组件的属性

在AddUser.vue组件中,有一个键叫props,里面有一个dialogAdd

<script>
export default {
  name: 'AddUser',
  props:{
    dialogAdd:Object
  }
}
</script> 

这表示该组件可以用到的属性,在UserInfo.vue里面这么引用AddUser组件的

<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> 

在AddUser上面绑定了一个dialogAdd属性,这会传到AddUser.vue组件里面控制AddUser的显示与隐藏,有点像父子组件之前的通信

$emit触发自定义事件

在AddUser.vue组件中,有一个自定义事件

this.$emit('update'); 

这会给父组件UserInfo触发一个update事件,父组件自然会调用@update中定义的方法getUserInfo重新查询数据并加载页面,总结两句话就是:

  • 父组件可以使用 props 把数据传给子组件
  • 子组件可以使用 $emit 触发父组件的自定义事件

Element UI

ElementUI相关问题可以参考官方文档:https://element.eleme.cn/#/zh-CN/component/installation

推荐

推荐一个通用后端项目:https://panjiachen.github.io/vue-element-admin-site/zh/guide/

vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。

本文转自 https://www.jianshu.com/p/98a48461016a,如有侵权,请联系删除。

收藏
评论区

相关推荐

🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件
前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, antdesignvue, iView等成熟的UI框架, react生态的antdesign, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和
element-ui Dialog组件的close-on-click-modal属性
element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog,即点击空白处弹框可关闭。 单功能设置如下: <eldialog :closeonclickmodal"false" </eldialog 全局修改默认配置,点击空白处不能关闭弹窗: //在组件注册.js文件中 Dialog.props.cl
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)
效果如下 数据来源为uniCloud云数据库 照片来源为网络 代码来源为我的毕业设计 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.com/68857ab4a9c485bbbd98c94ad98fb490.png) 鼠标未放到软件上面之前 在这里插入图片描述(ht
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
11个基于vue的UI框架_U.R.M.L
Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView 是一个 UI 工具包,其中包含简洁又设计优雅的小部件和各种组件。iView 团队维护非常及时,最近一次的更新在19年3
5款vue前端UI框架
Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue前端ui框架。TOP5——VueBluVueBlu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵
手把手教你实现一个Vue无限级联树形表格(增删改)
前言平时我们可能在做项目时,会遇到一个业务逻辑。实现一个无限级联树形表格,什么叫做无限级联树形表格呢?就是下图所展示的内容,有一个祖元素,然后下面可能有很多子孙元素,你可以实现添加、编辑、删除这样几个功能。资源 JavaScript框架:vue.js UI框架:Element UI 源码这里需要重点说明的是,主要使用了递归的算法以及给数
Vue.js的图片加载性能优化你可以试试
前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的。资源 Vue.js Element UI 优化一:图片加载动画只有当图片加载完成后才可以显示图片,加载动画结束。我们使用Element UI
使用Vue封装一个实用的人脸识别组件
❝ 欢迎阅读本博文,本文主要讲述【使用Vue封装一个实用的人脸识别组件】,文字通俗易懂,如有不妥,还请多多指正。 ❞在这里插入图片描述前言人脸识别技术现在越来越火,那么我们今天教大家实现一个人脸识别组件。资源 element UI Vue.js trackingmin.js facemin.js 源码由于我们
想用Vue搭建考试答卷系统吗?
❝ 欢迎阅读本文,本文主要讲述【怎样用Vue搭建考试答卷系统】,文字通俗易懂,如有不妥,还请多多指正。 ❞本篇章主要讲述系统搭建逻辑,有疑问的可以加微信联系我。考试系统 在这里插入图片描述资源 Vue.js Element UI 第三方数据接口 业务 1. 答题过程中,防止用户中途退出或者其他不可抗力因素阻碍答
vue项目中使用element-ui实现excel表格上传
恰逢项目中要实现excel表格上传,度娘甚久,得此一文,留之。原文:https://blog.csdn.net/qq36718999/article/details/95387542 需求 vuecli 搭建前端项目,并使用elementui实现本地excel表格上传。(1) 限制上传文件只能是 xls、xlsx格式;(2) 限制上传文件大小不能超过 2MB
vue+ts项目对app类型限制
描述做一个ts+vue+elementplus项目的时候总是有警告 消除警告 1. 将src/plugins/element.js文件后缀名改成ts 2. 在element里面还要对脚手架现有的代码进行类型限制 在element.ts中引入jsimport App from 'vue' 在element.ts中 对参数app和函数返回值进行类型限制jse