北京网站建设是什么意思,广告公司简介简短,东莞app下载安装,如何用pageadmin做网站目录
一、项目前置知识
二、使用vscode创建
三、vue介绍
四、局部使用vue
1、快速入门
1.1 需求
1.2 准备工作 1.3 操作
1.3.1 创建html
1.3.2 创建初始html代码
1.3.3 参照官网import vue
1.3.4 创建vue应用实例
1.3.5 准备div
1.3.6 准备用户数据
1.3.7 通过…目录
一、项目前置知识
二、使用vscode创建
三、vue介绍
四、局部使用vue
1、快速入门
1.1 需求
1.2 准备工作 1.3 操作
1.3.1 创建html
1.3.2 创建初始html代码
1.3.3 参照官网import vue
1.3.4 创建vue应用实例
1.3.5 准备div
1.3.6 准备用户数据
1.3.7 通过插值表达式渲染页面
1.3.8 保存ctrls运行
2、常用指令
2.1 v-for 遍历
编辑 2.2 v-bind动态为html标签绑定属性值
2.3 v-if v-show 用来控制元素的显示与隐藏
2.4 v-on为html标签绑定事件
2.5 v-model双向数据绑定
3、生命周期
4、Axios
4.1 介绍
4.2 使用步骤
4.3 别名方式
4.4 实践
4.4.1 导入后端
4.4.2 前端
5、综合案例
五、整站使用vue工程化
1、环境准备
2、VUE项目创建和启动
2.1 创建vue3项目
2.2 使用vscode 打开vue项目
2.3 vue项目目录结构
2.4 vue项目启动
3、vue项目开发流程
4、API风格
4.1 组合式API
5、案例 5.1 启动后台程序
5.2 安装axios
5.3 App.vue代码 5.4 Article.vue代码
5.5 代码优化1
5.5.1 新增api文件夹
5.5.2 新增article.js文件
5.5.3 修改Article.vue代码
5.6 代码优化2拦截器使用
5.6.1 新建文件夹util 5.6.2 新建request.js文件
5.6.3 优化article.js
六、Element-plus
1、快速入门
1.1 步骤
1.2 实操 1.2.1 创建vue3项目
1.2.2 进入项目目录安装vue依赖
1.2.3 使用vs studio打开项目
1.2.4 安装Element Plus
1.2.5 项目引用Element Plus
1.2.6 src下新建Button.vue文件
1.2.7 修改 App.vue
2、常用组件
2.1 表格组件
2.1.1 src新增Article.vue文件
2.1.2 修改App.vue
2.2 分页组件
2.2.1 main.js修改
2.2.2 Article.vue文件导入分页组件
2.3 表单组件
2.3.1 Article.vue文件导入表单组件
2.4 卡片组件
2.4.1 Article.vue文件导入卡片组件 前言学习vue基础知识为项目实战铺垫 一、项目前置知识 二、使用vscode创建
创建目录spring3boot3在文件目录里cmd输入 # 输入
code .
打开vscode 三、vue介绍 四、局部使用vue
1、快速入门
1.1 需求 1.2 准备工作 1.3 操作
1.3.1 创建html 1.3.2 创建初始html代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html
1.3.3 参照官网import vue
快速上手 | Vue.js !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 引入vue模块--script typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;/script/body
/html
1.3.4 创建vue应用实例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 引入vue模块--script typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;/* 创建vue应用实例 */createApp({})/script/body
/html
1.3.5 准备div
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp/div!-- 引入vue模块--script typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;/* 创建vue应用实例 */createApp({}).mount(#app);/script/body
/html
1.3.6 准备用户数据
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp/div!-- 引入vue模块--script typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;/* 创建vue应用实例 */createApp({data(){return{//定义数据msg: hello bocai}}}).mount(#app);/script/body
/html
1.3.7 通过插值表达式渲染页面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph1{{msg}}/h1/div!-- 引入vue模块--script typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;/* 创建vue应用实例 */createApp({data(){return{//定义数据msg:hello bocai}}}).mount(#app);/script/body
/html
1.3.8 保存ctrls运行
保存 保存 保存 2、常用指令 2.1 v-for 遍历 语法 02指令v-for.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapptable border1 solid colspa0 cellspacing0trth文章标题/thth分类/thth发表时间/thth状态/thth操作/th/tr!-- 哪个元素要出现多次,v-for指令就添加到哪个元素上 --tr v-for(article,index) in articleListtd{{article.title}}/tdtd{{article.category}}/tdtd{{article.time}}/tdtd{{article.state}}/tdtdbutton编辑/buttonbutton删除/button/td/tr!-- trtd标题2/tdtd分类2/tdtd2000-01-01/tdtd已发布/tdtdbutton编辑/buttonbutton删除/button/td/trtrtd标题3/tdtd分类3/tdtd2000-01-01/tdtd已发布/tdtdbutton编辑/buttonbutton删除/button/td/tr --/table/divscript typemodule//导入vue模块import { createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.js//创建应用实例createApp({data() {return {//定义数据articleList:[{title:医疗反腐绝非砍医护收入,category:时事,time:2023-09-5,state:已发布},{title:中国男篮缘何一败涂地,category:篮球,time:2023-09-5,state:草稿},{title:华山景区已受大风影响阵风达7-8级未来24小时将持续,category:旅游,time:2023-09-5,state:已发布}] }}}).mount(#app)//控制页面元素/script
/body
/html 2.2 v-bind动态为html标签绑定属性值 语法 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp!-- a v-bind:hrefurl百度一下/a --a :hrefurl百度一下/a/divscript typemodule//引入vue模块import { createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.js//创建vue应用实例createApp({data() {return {url: https://www.baidu.com}}}).mount(#app)//控制html元素/script
/body
/html
2.3 v-if v-show 用来控制元素的显示与隐藏 语法 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp手链价格为: span v-ifcustomer.level0 customer.level19.9/span span v-else-ifcustomer.level2 customer.level419.9/span span v-else29.9/spanbr/手链价格为: span v-showcustomer.level0 customer.level19.9/span span v-showcustomer.level2 customer.level419.9/span span v-showcustomer.level529.9/span/divscript typemodule//导入vue模块import { createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.js//创建vue应用实例createApp({data() {return {customer:{name:张三,level:2}}}}).mount(#app)//控制html元素/script
/body/html 2.4 v-on为html标签绑定事件 语法 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappbutton v-on:clickmoney点我有惊喜/button nbsp;button clicklove再点更惊喜/button/divscript typemodule//导入vue模块import { createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.js//创建vue应用实例createApp({data() {return {//定义数据}},methods:{money: function(){alert(送你钱100)},love: function(){alert(爱你一万年)}}}).mount(#app);//控制html元素/script
/body
/html 2.5 v-model双向数据绑定 语法 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp文章分类: input typetext v-modelsearchConditions.category/ span{{searchConditions.category}}/span发布状态: input typetext v-modelsearchConditions.state/ span{{searchConditions.state}}/spanbutton搜索/buttonbutton v-on:clickclear重置/buttonbr /br /table border1 solid colspa0 cellspacing0trth文章标题/thth分类/thth发表时间/thth状态/thth操作/th/trtr v-for(article,index) in articleListtd{{article.title}}/tdtd{{article.category}}/tdtd{{article.time}}/tdtd{{article.state}}/tdtdbutton编辑/buttonbutton删除/button/td/tr/table/divscript typemodule//导入vue模块import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js//创建vue应用实例createApp({data() {return {//定义数据searchConditions:{category:,state:},articleList: [{title: 医疗反腐绝非砍医护收入,category: 时事,time: 2023-09-5,state: 已发布},{title: 中国男篮缘何一败涂地,category: 篮球,time: 2023-09-5,state: 草稿},{title: 华山景区已受大风影响阵风达7-8级未来24小时将持续,category: 旅游,time: 2023-09-5,state: 已发布}]}},methods:{clear:function(){//清空category以及state的数据//在methods对应的方法里面,使用this就代表的是vue实例,可以使用this获取到vue实例中准备的数据this.searchConditions.category;this.searchConditions.state;}}}).mount(#app)//控制html元素/script
/body/html 3、生命周期 mounted 最频繁 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp文章分类: input typetext v-modelsearchConditions.category/ span{{searchConditions.category}}/span发布状态: input typetext v-modelsearchConditions.state/ span{{searchConditions.state}}/spanbutton搜索/buttonbutton v-on:clickclear重置/buttonbr /br /table border1 solid colspa0 cellspacing0trth文章标题/thth分类/thth发表时间/thth状态/thth操作/th/trtr v-for(article,index) in articleListtd{{article.title}}/tdtd{{article.category}}/tdtd{{article.time}}/tdtd{{article.state}}/tdtdbutton编辑/buttonbutton删除/button/td/tr/table/divscript typemodule//导入vue模块import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js//创建vue应用实例createApp({data() {return {//定义数据searchConditions:{category:,state:},articleList: [{title: 医疗反腐绝非砍医护收入,category: 时事,time: 2023-09-5,state: 已发布},{title: 中国男篮缘何一败涂地,category: 篮球,time: 2023-09-5,state: 草稿},{title: 华山景区已受大风影响阵风达7-8级未来24小时将持续,category: 旅游,time: 2023-09-5,state: 已发布}]}},methods:{clear:function(){//清空category以及state的数据//在methods对应的方法里面,使用this就代表的是vue实例,可以使用this获取到vue实例中准备的数据this.searchConditions.category;this.searchConditions.state;}},mounted:function(){console.log(Vue挂载完毕,发送请求获取数据)}}).mount(#app)//控制html元素/script
/body/html 4、Axios
4.1 介绍 4.2 使用步骤 4.3 别名方式 4.4 实践
4.4.1 导入后端
前面课程的存在token不好处理
后端代码
链接https://pan.baidu.com/s/1H2kd77Brg8zblMj7fnMuoQ 提取码关注联系我私信我发本文链接
我下载下来pom做了一些改变主要是springboot版本等与前面后端的课程保存一致性
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion3.1.5/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdcom.itheima/groupIdartifactIdaxios_demo/artifactIdversion0.0.1-SNAPSHOT/versionnameaxios_demo/namedescriptionaxios_demo/descriptionpropertiesjava.version17/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build/project导入的时候卡主注意自己的maven配置 不知道跟.idea里面这个是否有关 workspace.xml导致卡主。修改这个maven估计就好了 4.4.2 前端
默认方式与别名方式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody!-- 引入axios的js文件 --script srchttps://unpkg.com/axios/dist/axios.min.js/scriptscript/* 发送请求 *//* axios({method:get,url:http://localhost:8080/article/getAll}).then(result{//成功的回调//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据console.log(result.data);}).catch(err{//失败的回调console.log(err);}); */let article {title: 明天会更好,category: 生活,time: 2000-01-01,state: 草稿}/* axios({method:post,url:http://localhost:8080/article/add,data:article}).then(result{//成功的回调//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据console.log(result.data);}).catch(err{//失败的回调console.log(err);}); *///别名的方式发送请求/* axios.get(http://localhost:8080/article/getAll).then(result {//成功的回调//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据console.log(result.data);}).catch(err {//失败的回调console.log(err);}); */axios.post(http://localhost:8080/article/add, article).then(result {//成功的回调//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据console.log(result.data);}).catch(err {//失败的回调console.log(err);});/script
/body/html 5、综合案例 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp文章分类: input typetext v-modelsearchConditions.category发布状态: input typetext v-modelsearchConditions.statebutton v-on:clicksearch搜索/buttonbutton v-on:clickclear重置/buttonbr /br /table border1 solid colspa0 cellspacing0trth文章标题/thth分类/thth发表时间/thth状态/thth操作/th/trtr v-for(article,index) in articleListtd{{article.title}}/tdtd{{article.category}}/tdtd{{article.time}}/tdtd{{article.state}}/tdtdbutton编辑/buttonbutton删除/button/td/tr!-- trtd标题2/tdtd分类2/tdtd2000-01-01/tdtd已发布/tdtdbutton编辑/buttonbutton删除/button/td/trtrtd标题3/tdtd分类3/tdtd2000-01-01/tdtd已发布/tdtd --button编辑/buttonbutton删除/button/td/tr/table/div!-- 引入axios的js文件 --script srchttps://unpkg.com/axios/dist/axios.min.js/scriptscript typemodule//导入vue模块import {createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.js// 创建vue应用实例createApp({data(){return{articleList:[],searchConditions:{category:,state:}}},methods:{//声明方法search:function(){//发送请求,完成搜索,携带搜索条件axios.get(http://localhost:8080/article/search?categorythis.searchConditions.categorystatethis.searchConditions.state).then(result{//成功回调 result.data//把得到的数据赋值给articleListthis.articleListresult.data}).catch(err{console.log(err);});},clear:function(){//清空category以及state的数据//在methods对应的方法里面,使用this就代表的是vue实例,可以使用this获取到vue实例中准备的数据this.searchConditions.category;this.searchConditions.state;}},mounted:function(){//发送异步请求 axiosaxios.get(http://localhost:8080/article/getAll).then(result {//成功回调// console.log(result.data);this.articleList result.data}).catch(err {//失败回调console.log(err);})}}).mount(#app); // 控制html元素/script/body/html 五、整站使用vue工程化
1、环境准备 看这个也行《nodejs》
2、VUE项目创建和启动
2.1 创建vue3项目
npm init vuelatest 实际操作 npm init vuelatest # 输入项目名称然后全部默认 # 进到项目目录
cd vue3-project # 输入命令 安装项目vue依赖
npm install 2.2 使用vscode 打开vue项目
在项目目录输入命令code .
code . 2.3 vue项目目录结构 2.4 vue项目启动
下图有两种方式启动 1与2 3、vue项目开发流程 4、API风格 4.1 组合式API App.vue
!-- script
//写数据
export default{data(){return{msg: 上海}}
}
/script --script setupimport {ref} from vue;//调用ref函数定义响应式数据const msg ref(西安);//导入Api.vue文件 vs 开发工具显示下面一句有问题 是开发工具问题import ApiVue from ./Api.vue
/script template!-- html-- h1{{ msg }}/h1 ApiVue//templatestyle scoped
/* 样式 */
h1{color: red;
}/styleApi.vue
script setupimport {onMounted, ref} from vue;//声明响应式数据 ref 响应式对象有一个内部的属性valueconst count ref(0);// 声明函数increment
function increment(){count.value;
}//声明钩子函数onMountedonMounted((){console.log(vue已经挂载完毕)});/scripttemplatebutton clickincrement点击1 count:{{ count }}/button/template
5、案例 5.1 启动后台程序
后台程序与局部的那个案例相同
5.2 安装axios
项目目录下执行
npm install axios
5.3 App.vue代码
!-- script
//写数据
export default{data(){return{msg: 上海}}
}
/script --script setupimport {ref} from vue;//调用ref函数定义响应式数据const msg ref(西安);//导入Api.vue文件 vs 开发工具显示下面一句有问题 是开发工具问题import ApiVue from ./Api.vue//Article.vue文件 vs 开发工具显示下面一句有问题 是开发工具问题import Article from ./Article.vue
/script template!-- html-- !-- h1{{ msg }}/h1 brApiVue/ --Article//templatestyle scoped
/* 样式 */
h1{color: red;
}/style5.4 Article.vue代码
script setup//导入axiosimport axios from axios; import {ref} from vue;//定义响应式数据 refconst articleList ref([])//发送异步请求获取所有文章数据axios.get(http://localhost:8080/article/getAll).then(result{//把服务器相应的数据保存起来articleList.value result.data;}).catch(err{console.log(err)});//定义响应式数据searchConditionsconst searchConditions ref({category:,state:});//声明search函数const searchfunction(){//发送请求完成搜索axios.get(http://localhost:8080/article/search,{params:{...searchConditions.value}}).then(result{articleList.value result.data;}).catch(err{console.log(err)});}/scripttemplate!-- html元素--div文章分类: input typetext v-modelsearchConditions.category发布状态: input typetext v-modelsearchConditions.statebutton v-on:clicksearch搜索/buttonbr /
br /
table border1 solid colspa0 cellspacing0trth文章标题/thth分类/thth发表时间/thth状态/thth操作/th/trtr v-for(article,index) in articleListtd{{article.title}}/tdtd{{article.category}}/tdtd{{article.time}}/tdtd{{article.state}}/tdtdbutton编辑/buttonbutton删除/button/td/tr!-- trtd标题2/tdtd分类2/tdtd2000-01-01/tdtd已发布/tdtdbutton编辑/buttonbutton删除/button/td/trtrtd标题3/tdtd分类3/tdtd2000-01-01/tdtd已发布/tdtdbutton编辑/buttonbutton删除/button/td/tr --
/table
/div/template 5.5 代码优化1
问题 5.5.1 新增api文件夹 5.5.2 新增article.js文件 //导入axios
import axios from axios; //定义一个变量记录公共的前缀baseURL
const baseURL http://localhost:8080
const instance axios.create({baseURL})//获取所有文件的数据函数
export async function articleGetAllService(){//发送异步请求获取所有文章数据//同步等待服务器相应的结果并返回async,await// return await axios.get(/article/getAll)return await instance.get(/article/getAll).then(result{//把服务器相应的数据保存起来// articleList.value result.data;return result.data;}).catch(err{console.log(err)});}//根据文章分类和发包状态搜索的函数
export async function articleGetSearchService(conditions){//发送请求完成搜索// return await axios.get(/article/search,{params : conditions})return await instance.get(/article/search,{params : conditions}).then(result{// articleList.value result.data;return result.data;}).catch(err{console.log(err)});}
5.5.3 修改Article.vue代码
script setupimport {articleGetAllService,articleGetSearchService} from /api/article.jsimport {ref} from vue;//定义响应式数据 refconst articleList ref([])//获取所有文章数据//同步获取articleGetAllService的返回结果 async awaitconst getAllArticle async function(){let data await articleGetAllService()articleList.value data;}getAllArticle();//定义响应式数据searchConditionsconst searchConditions ref({category:,state:});//声明search函数const search async function(){//文章搜索let data await articleGetSearchService({...searchConditions.value});articleList.value data;}/scripttemplate!-- html元素--div文章分类: input typetext v-modelsearchConditions.category发布状态: input typetext v-modelsearchConditions.statebutton v-on:clicksearch搜索/buttonbr /
br /
table border1 solid colspa0 cellspacing0trth文章标题/thth分类/thth发表时间/thth状态/thth操作/th/trtr v-for(article,index) in articleListtd{{article.title}}/tdtd{{article.category}}/tdtd{{article.time}}/tdtd{{article.state}}/tdtdbutton编辑/buttonbutton删除/button/td/tr!-- trtd标题2/tdtd分类2/tdtd2000-01-01/tdtd已发布/tdtdbutton编辑/buttonbutton删除/button/td/trtrtd标题3/tdtd分类3/tdtd2000-01-01/tdtd已发布/tdtdbutton编辑/buttonbutton删除/button/td/tr --
/table
/div/template
5.6 代码优化2拦截器使用
问题 5.6.1 新建文件夹util 5.6.2 新建request.js文件
// 定制请求实例//导入axios
import axios from axios; //定义一个变量记录公共的前缀baseURL
const baseURL http://localhost:8080
const instance axios.create({baseURL})// 添加响应拦截器
instance.interceptors.response.use(result{return result.data;},err{alert(服务异常)return Promise.reject(err);//异步的状态转化成失败的状态}
)export default instance;
5.6.3 优化article.js
/*
//导入axios
import axios from axios; //定义一个变量记录公共的前缀baseURL
const baseURL http://localhost:8080
const instance axios.create({baseURL}) */
import request from /util/request.js//获取所有文件的数据函数
export async function articleGetAllService(){//发送异步请求获取所有文章数据//同步等待服务器相应的结果并返回async,await// return await axios.get(/article/getAll)return request.get(/article/getAll);}//根据文章分类和发包状态搜索的函数
export async function articleGetSearchService(conditions){//发送请求完成搜索// return await axios.get(/article/search,{params : conditions})return request.get(/article/search,{params : conditions});} 六、Element-plus 1、快速入门
1.1 步骤 1.2 实操 1.2.1 创建vue3项目
npm init vuelatest 1.2.2 进入项目目录安装vue依赖
cd 项目目录
npm install 1.2.3 使用vs studio打开项目
code . 1.2.4 安装Element Plus
npm install element-plus --save 1.2.5 项目引用Element Plus
复制替换main.js文件内容 // main.ts
import { createApp } from vue //导入vue
import ElementPlus from element-plus //导入element-plus
import element-plus/dist/index.css //导入element-plus的样式
import App from ./App.vue //导入app.vueconst app createApp(App) //创建应用实例app.use(ElementPlus) //使用element-plus
app.mount(#app) //控制html元素
1.2.6 src下新建Button.vue文件
script langts setupimport {Check,Delete,Edit,Message,Search,Star,} from element-plus/icons-vue/scripttemplateel-row classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button/el-rowel-row classmb-4el-button plainPlain/el-buttonel-button typeprimary plainPrimary/el-buttonel-button typesuccess plainSuccess/el-buttonel-button typeinfo plainInfo/el-buttonel-button typewarning plainWarning/el-buttonel-button typedanger plainDanger/el-button/el-rowel-row classmb-4el-button roundRound/el-buttonel-button typeprimary roundPrimary/el-buttonel-button typesuccess roundSuccess/el-buttonel-button typeinfo roundInfo/el-buttonel-button typewarning roundWarning/el-buttonel-button typedanger roundDanger/el-button/el-rowel-rowel-button :iconSearch circle /el-button typeprimary :iconEdit circle /el-button typesuccess :iconCheck circle /el-button typeinfo :iconMessage circle /el-button typewarning :iconStar circle /el-button typedanger :iconDelete circle //el-row/template
1.2.7 修改 App.vue
script setup
import ButtonVue from ./Button.vue;/scripttemplateButtonVue/
/template# 启动项目
npm run dev 优化代码
script langts setup
import {Check,Delete,Edit,Message,Search,Star,
} from element-plus/icons-vue
/scripttemplateel-row classmb-4el-buttonDefault/el-buttonel-button typeprimary disabled true编辑/el-button !--disabled true 禁用--el-button typesuccess loading true查看/el-button !--loading true 加载中--/el-rowel-row classmb-4 el-button typeinfo plainInfo/el-buttonel-button typewarning plainWarning/el-buttonel-button typedanger plainDanger/el-button/el-row!-- 初始化的el-row classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button/el-rowel-row classmb-4el-button plainPlain/el-buttonel-button typeprimary plainPrimary/el-buttonel-button typesuccess plainSuccess/el-buttonel-button typeinfo plainInfo/el-buttonel-button typewarning plainWarning/el-buttonel-button typedanger plainDanger/el-button/el-rowel-row classmb-4el-button roundRound/el-buttonel-button typeprimary roundPrimary/el-buttonel-button typesuccess roundSuccess/el-buttonel-button typeinfo roundInfo/el-buttonel-button typewarning roundWarning/el-buttonel-button typedanger roundDanger/el-button/el-rowel-rowel-button :iconSearch circle /el-button typeprimary :iconEdit circle /el-button typesuccess :iconCheck circle /el-button typeinfo :iconMessage circle /el-button typewarning :iconStar circle /el-button typedanger :iconDelete circle //el-row --/template 2、常用组件 2.1 表格组件
2.1.1 src新增Article.vue文件
script langts setup
import { Delete,Edit,
} from element-plus/icons-vue
const tableData [{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,}]
/script
templateel-table :datatableData stylewidth: 100%el-table-column proptitle label文章标题/el-table-column propcategory label分类/el-table-column proptime label发表时间 /el-table-column propstate label状态 /el-table-column label操作 width180 el-rowel-button typeprimary :iconEdit circle / el-button typedanger :iconDelete circle //el-row/el-table-column/el-table/template
2.1.2 修改App.vue
script setup
import ButtonVue from ./Button.vue;
import ArticleVue from ./Article.vue;/scripttemplate!-- ButtonVue/ --ArticleVue/
/template2.2 分页组件
2.2.1 main.js修改
支持分页控件中文显示
// main.ts
import { createApp } from vue //导入vue
import ElementPlus from element-plus //导入element-plus
import element-plus/dist/index.css //导入element-plus的样式
import App from ./App.vue //导入app.vue
import locale from element-plus/dist/locale/zh-cn.js //调整分页控件中文显示const app createApp(App) //创建应用实例app.use(ElementPlus,{locale}) //使用element-plus
app.mount(#app) //控制html元素
2.2.2 Article.vue文件导入分页组件
script langts setup
// 按钮icon
import { Delete,Edit,
} from element-plus/icons-vue// 分页
import { ref } from vueconst currentPage4 ref(4)
const pageSize4 ref(5)
const small ref(false)
const background ref(false)
const disabled ref(false)
const total ref(20)const handleSizeChange (val: number) {console.log(${val} items per page)
}
const handleCurrentChange (val: number) {console.log(current page: ${val})
}const tableData [{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,}]
/script
template!-- 表格组件 --el-table :datatableData stylewidth: 100%el-table-column proptitle label文章标题/el-table-column propcategory label分类/el-table-column proptime label发表时间 /el-table-column propstate label状态 /el-table-column label操作 width180 el-rowel-button typeprimary :iconEdit circle / el-button typedanger :iconDelete circle //el-row/el-table-column/el-table!-- 分页组件 --el-paginationclassel-pv-model:current-pagecurrentPage4v-model:page-sizepageSize4:page-sizes[5, 10, 15, 40200]:smallsmall:disableddisabled:backgroundbackgroundlayoutjumper, total, sizes, prev, pager, next:totaltotalsize-changehandleSizeChangecurrent-changehandleCurrentChange//templatestyle scoped.el-p{margin-top: 20px;display: flex;justify-content: flex-end;}/style
2.3 表单组件
这里使用的是行内表单
2.3.1 Article.vue文件导入表单组件
script langts setup
// 按钮icon
import { Delete,Edit,
} from element-plus/icons-vue// 分页组件导入
import { ref } from vue// 表单组件 行内表单
import { reactive } from vue
const formInline reactive({user: ,region: ,date: ,
})const onSubmit () {console.log(submit!)
}// 分页 组件
const currentPage4 ref(4)
const pageSize4 ref(5)
const small ref(false)
const background ref(false)
const disabled ref(false)
const total ref(20)const handleSizeChange (val: number) {console.log(${val} items per page)
}
const handleCurrentChange (val: number) {console.log(current page: ${val})
}const tableData [{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,}]
/script
template!-- 表单组件 行内表单 --el-form :inlinetrue :modelformInline classdemo-form-inline!-- 查询条件1 --el-form-item label文章分类el-selectv-modelformInline.regionplaceholder请选择clearableel-option label时事 value时事 /el-option label篮球 value篮球 //el-select/el-form-item!-- 查询条件2 --el-form-item label发布状态el-selectv-modelformInline.regionplaceholder请选择clearableel-option label已发布 value已发布 /el-option label草稿 value草稿 //el-select/el-form-item!-- 查询按钮--el-form-itemel-button typeprimary clickonSubmit查询/el-button /el-form-item!-- 重置按钮 --el-form-item el-button typedefault clickonSubmit重置/el-button/el-form-item/el-form!-- 表格组件 --el-table :datatableData stylewidth: 100%el-table-column proptitle label文章标题/el-table-column propcategory label分类/el-table-column proptime label发表时间 /el-table-column propstate label状态 /el-table-column label操作 width180 el-rowel-button typeprimary :iconEdit circle / el-button typedanger :iconDelete circle //el-row/el-table-column/el-table!-- 分页组件 --el-paginationclassel-pv-model:current-pagecurrentPage4v-model:page-sizepageSize4:page-sizes[5, 10, 15, 40200]:smallsmall:disableddisabled:backgroundbackgroundlayoutjumper, total, sizes, prev, pager, next:totaltotalsize-changehandleSizeChangecurrent-changehandleCurrentChange//templatestyle scoped.el-p{margin-top: 20px;display: flex;justify-content: flex-end;}/style
2.4 卡片组件
2.4.1 Article.vue文件导入卡片组件
导入卡片组件将之前的组件放放在卡片组件内
script langts setup
// 按钮icon
import { Delete,Edit,
} from element-plus/icons-vue// 分页组件导入
import { ref } from vue// 表单组件 行内表单
import { reactive } from vue
const formInline reactive({user: ,region: ,date: ,
})const onSubmit () {console.log(submit!)
}// 分页 组件
const currentPage4 ref(4)
const pageSize4 ref(5)
const small ref(false)
const background ref(false)
const disabled ref(false)
const total ref(20)const handleSizeChange (val: number) {console.log(${val} items per page)
}
const handleCurrentChange (val: number) {console.log(current page: ${val})
}const tableData [{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,},{title: 标题1,category: 时事,time: 2023-01-02,state: 已发布,}]
/script
template!-- 卡片组件 --el-card classbox-card div classcard-headerspan文章管理/spanel-button typeprimary发布文章/el-button /div div stylemargin-top: 20px;hr/div!-- 表单组件 行内表单 --el-form :inlinetrue :modelformInline classdemo-form-inline!-- 查询条件1 --el-form-item label文章分类el-selectv-modelformInline.regionplaceholder请选择clearableel-option label时事 value时事 /el-option label篮球 value篮球 //el-select/el-form-item!-- 查询条件2 --el-form-item label发布状态el-selectv-modelformInline.regionplaceholder请选择clearableel-option label已发布 value已发布 /el-option label草稿 value草稿 //el-select/el-form-item!-- 查询按钮--el-form-itemel-button typeprimary clickonSubmit查询/el-button /el-form-item!-- 重置按钮 --el-form-item el-button typedefault clickonSubmit重置/el-button/el-form-item/el-form!-- 表格组件 --el-table :datatableData stylewidth: 100%el-table-column proptitle label文章标题/el-table-column propcategory label分类/el-table-column proptime label发表时间 /el-table-column propstate label状态 /el-table-column label操作 width180 el-rowel-button typeprimary :iconEdit circle / el-button typedanger :iconDelete circle //el-row/el-table-column/el-table!-- 分页组件 --el-paginationclassel-pv-model:current-pagecurrentPage4v-model:page-sizepageSize4:page-sizes[5, 10, 15, 40200]:smallsmall:disableddisabled:backgroundbackgroundlayoutjumper, total, sizes, prev, pager, next:totaltotalsize-changehandleSizeChangecurrent-changehandleCurrentChange//el-card /templatestyle scoped.el-p{margin-top: 20px;display: flex;justify-content: flex-end;}.card-header{display: flex;justify-content: space-between;}/style
