Element Plus for Vue 3.0,vite element plus
因为vue3出了一段时间了，元素也出了基于vue3.x版本的元素加，vite打包听说很快，尝试一下，感兴趣的可以了解一下
使用vite搭建vue3项目
通过在终端中运行以下命令，可以使用轻快地快速构建某视频剪辑软件项目。
$ npm init vite-app项目名称
$ cd项目-名称
$ npm安装
$ npm运行开发
引入Element Plus
安装元素加：
新公共管理安装元素加保存
主页。射流研究…中完整引入元素加：
从“vue”导入{ createApp }
从“元素加”导入ElementPlus
导入“元素-加/库/主题-粉笔/索引。CSS”；
从导入应用程序. 1/app。vue ；
const app=createApp(App)
app.use(ElementPlus)
app。装载(应用数量)
引入SCSS
执行命令安装sass，npm i sass -D，然后在某视频剪辑软件文件的风格标签下加入lang=scss 即可，这些与以前vue2都是一样的。
npm i sass -D
引入eslint
安装埃斯林特
npm i eslint -D
使用埃斯林特对本项目进行初始化
npx eslint -初始化
按照提示进行设置，这是我选择的设置
引入vue-router
安装某视频剪辑软件路由器四
新公共管理安装vue-路由器@4
在科学研究委员会目录下新建路由器文件夹，并在路由器下新建索引。射流研究…进行路由配置
从“vue路由器"导入*作为某视频剪辑软件路由器
常量路由=[
{
路径："/",
组件：()=导入(./page/home。vue’)
}, {
路径："/登录"，
组件：()=导入(./page/登录。vue’)
}
]
导出默认VueRouter.createRouter({
历史：vue路由器。createwebhashhistory()，
路线
})
在主页。射流研究…下使用该中间件
从导入路由器。/路由器
//.
app.use(路由器)
引入vuex
安装状态管理
新公共管理安装vuex@next -保存
在科学研究委员会下创建商店路径，并在商店下创建索引。射流研究…
从" vuex "导入{ createStore }
导出默认的createStore({
state () {
返回{
用户名：""
}
},
突变：{
设置用户名(状态，有效负载){
状态。用户名=有效负载
}
}
})
在主页。射流研究…下使用商店
从导入vuex ./商店
//.
应用程序使用(vuex)
引入axios
对于网络请求，这里使用axios，首先安装爱可信
npm i axios
在科学研究委员会目录下创建美国石油学会(美国石油协会)目录，并在美国石油学会(美国石油协会)路径下创建axios.js，配置爱可信实例
//axios.js
从" axios "导入爱可信
//从导入配置././config
从“vue路由器"导入{用户外部}
导出默认函数(){
//1.发送请求的时候，如果有令牌，需要附带到请求头中
const token=本地存储。getitem( token )
假设实例=axios
if (token) {
instance=axios.create({
//baseURL: config.server，
标题：{
授权："不记名"令牌
}
})
}
const router=useRouter()
实例。截击机。回应。使用(
（响应)={
//2.响应的时候，如果有令牌，保存代币到本地（本地存储)
if (resp.data.data.token) {
localStorage.setItem(token ，resp.data.data.token)
}
//3.响应的时候，如果响应的消息码是403(没有令牌，令牌失效),在本地删除代币
if (resp.data.code===403) {
本地存储。移除项目(“令牌”)
localStorage.removeItem(用户名)
router.push({ name: Login })
}
退货责任
},
（错误)={
返回承诺。拒绝（错误)
}
)
返回实例
}
在美国石油学会(美国石油协会)路径下创建索引。射流研究…编写美国石油学会(美国石油协会)
从导入请求 axios.js
导入配置自././config
导出默认值{
//登录
登录（参数){
退货请求()。post(`${config.server}/login `，params)
},
//获取用户列表
getUserList (params) {
退货请求()。get(` ${ config。服务器}/用户/列表`，{
参数：参数
})
},
//添加一个用户
createUser (params) {
退货请求()。post(`${config.server}/user/`，params)
},
//.
接下来使用vue3的组合美国石油学会(American Petroleum Institute)进行组件的开发，这里列举一个用户模块的开发：
模板
div class=user-wrap
埃尔按钮
class=create-btn
类型=成功
大小=小
@click=handleCreate 新增用户/el-button
埃尔表
:data=tableData
style=宽度：100%
埃尔-表格-列
标签=用户名
prop=用户名
/El-表格-列
埃尔-表格-列
标签=密码
prop=密码
/El-表格-列
埃尔-表格-列
align=右
模板#标题
埃尔输入
v-model=搜索
@blur=searchUser
size=mini
占位符=输入用户名搜索/
/模板
template #default=scope
埃尔按钮
size=mini
@click=handleEdit(范围 index，scope.row)编辑/el-button
埃尔按钮
size=mini
类型=危险
@click=handleDelete(范围 index，scope.row)删除/el-button
/模板
/El-表格-列
/el-table
埃尔分页
:hide-on-single-page= hideOnSinglePage
页面换行
@size-change=handleSizeChange
@ current-change= handleCurrentChange
：当前页面=当前页面
:page-size=[10，20，30，40]
:page-size=pageSize
布局=总计，大小，上一页，分页，下一页，跳转
:total=totalCount
/El-分页
el-dialog title=用户信息v-model=dialogFormVisible
el-form :model=form
El-表单-项目标签=用户名：label-width=formLabelWidth
El-input v-model= form。用户名 autocomplete= off /El-input
/El-表单-项目
El-表单-项目标签=密码：label-width=formLabelWidth
El-input v-model= form。密码 autocomplete= off /El-input
/El-表单-项目
/el格式
模板#页脚
span class=对话框页脚
El-button @ click= dialogFormVisible=false 取消/el-button
El-button type= primary @ click=确认用户确定/el-button
/span
/模板
/el-dialog
/div
/模板
脚本
从“vue”导入{ ref，计算值}
导入美国石油学会(American Petroleum Institute)自./././api/index
从“元素加”导入{ ElMessage，ElMessageBox }
导出默认值{
setup () {
让状态=
让userId=null
const formLabelWidth=ref(120px )
//获取用户列表
const tableData=ref([])
异步函数获取列表（参数){
const RES=await API。获取用户列表(参数)
if (res.data.success) {
tabledata。值=研究数据。数据。用户列表
总计数。值=研究数据。数据。数数
search.value=
}否则{
ElMessage.error(获取用户列表失败： res.data.msg)
}
}
获取列表()
常量形式=ref({
用户名： ,
密码：""
})
const dialogFormVisible=ref(false)
//提交用户信息
异步函数confirmUser () {
//验证信息是否齐全
如果(!(形式.价值。用户名form.value.password)) {
ElMessage.error(表单信息不全)
返回
}
开关（状态){
案例"创建":
创建用户(表单.值)
破裂
案例"编辑":
更新用户(用户Id，form.value)
破裂
}
}
//添加用户
异步函数handleCreate () {
form.value={
用户名： ,
密码：""
}
dialogFormVisible.value=true
状态="创建"
}
//添加用户信息
异步函数createUser (params) {
const RES=await API。创建用户(参数)
if (res.data.success) {
获取列表()
ElMessage.success({
消息： 添加成功，
类型："成功"
})
dialogFormVisible.value=false
}否则{
ElMessage.error(添加失败： res.data.msg)
}
}
//编辑用户
异步函数handleEdit(索引，行){
console.log(索引，行)
dialogFormVisible.value=true
状态=编辑
表单。值。用户名=行。用户名
form.value.password=row。密码
userId=row.id
}
//修改用户信息
异步函数更新用户(id，params) {
const RES=await API。更新用户(id，参数)
if (res.data.success) {
ElMessage.success({
消息： 修改成功，
类型："成功"
})
获取列表()
dialogFormVisible.value=false
}否则{
ElMessage.error(修改失败： res.data.msg)
}
}
//删除用户
const handleDelete=async (index，row)={
ElMessageBox.confirm(此操作将永久删除该用户，是否继续？, 提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型："警告"
}).然后(async ()={
等待删除器(row.id)
}).catch(()={
电子邮件({
类型："信息",
消息： 已取消删除
})
})
}
//删除用户信息
异步函数禁用器(id) {
const res=await api.delUser(id)
if (res.data.success) {
获取列表()
ElMessage.success({
类型："成功",
消息： 删除成功!
})
}否则{
ElMessage.error(删除失败： res.data.msg)
}
}
//搜索用户
const search=ref( )
异步函数searchUser () {
currentPage.value=1
pageSize.value=10
if (search.value===) {
getList({ pageindex:当前页面。value，pagesize: pageSize.value })
返回
}
currentPage.val=1
const RES=await API。finduserbyusername({ username:search。值})
if (res.data.success) {
tabledata。值=研究数据。数据。用户列表
ElMessage.success({
消息： 搜索成功，
类型："成功"
})
}否则{
ElMessage.error(修改失败： res.data.msg)
}
}
//分页相关
const totalCount=ref(0)
const currentPage=ref(1)
const pageSize=ref(10)
函数handleSizeChange (val) {
pageSize.value=val
getList({ pageindex:当前页面。值，pagesize: val })
}
函数handleCurrentChange (val) {
当前页面. value=val
getList({ pageindex: val，pagesize: pageSize.value })
}
//超过一页就隐藏分页插件
const hideOnSinglePage=computed(()={
return totalCount.value=10
})
返回{
tableData，
搜索，
dialogFormVisible，
形式，
formLabelWidth，
创建用户，
handleEdit
处理删除，
确认用户，
handleCreate，
搜索用户，
当前页面，
总计数，
handleSizeChange，
handleCurrentChange，
页面大小，
hideOnSinglePage
}
}
}
/脚本
样式lang=scss 范围。用户包装{
宽度：100%;
最小宽度：500像素；创建-btn{
边距-底部：10px
显示器：flex
justify-content:flex-end；
}。页面换行{
页边距-顶部：10px
}
}
/风格
到此这篇关于vite vue3元素-还有项目搭建的方法步骤的文章就介绍到这了，更多相关轻快地搭建vue3 ElementPlus内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。