苏州网站建设有限公司,沈阳网站设计定制,北京哪个公司做网站好,天津市建设工程信息交易网文章目录 一.首先创建我们的Vue文件夹二.源代码BodyDemoHearderDemoHomeDemoMarkdownDemoFileManager.jsMain.js#xff08;注意绑定#xff09;APP源代码 效果图#xff08;按钮功能#xff09;新增二级菜单#xff08;v-for#xff09;需要的可以私信 一.首先创建我们的… 文章目录 一.首先创建我们的Vue文件夹二.源代码BodyDemoHearderDemoHomeDemoMarkdownDemoFileManager.jsMain.js注意绑定APP源代码 效果图按钮功能新增二级菜单v-for需要的可以私信 一.首先创建我们的Vue文件夹
我们分为三个专题并且创建4个vue文件还有以下js
二.源代码
BodyDemo
templateel-container styleheight: 100%;!-- 左边的垂直导航(二级菜单) --el-aside width200px stylebackground-color: #f1f1f1;div/divel-menumodeverticalbackground-color#f1f1f1text-color#777777active-text-color#000000:default-active0selectselectItemel-menu-itemv-foritem in items:indexitem.index:keyitem.indexdiv idtext{{ item.title }}/div/el-menu-item/el-menu/el-aside!-- 通过解析markdown文件后渲染的地方 --el-mainMarkdown :contentcontent/Markdown/el-main/el-container
/templatescript
import Markdown from ./MarkdownDemo.vue;
import FileManager from ../tools/FileManager.jsexport default{mounted(){FileManager.getPostContent(this.topic,this.items[this.currentIndex].title).then((res){this.contentres.data;})},props:[items,topic],data(){return{currentIndex:0,content:}},components:{Markdown:Markdown,},methods:{selectItem(index){this.currentIndexindex}},watch:{currentIndex:function(val){FileManager.getPostContent(this.topic,this.items[val].title).then((res){this.contentres.data;})},topic:function(val){FileManager.getPostContent(val,this.items[this.currentIndex].title).then((res){this.contentres.data;})}}
}
/scriptstyle scoped
.el-menu-item.is-active{background-color: #ffffff !important;
}
/styleHearderDemo
templateel-container stylemargin: 0; padding: 0;el-header stylemargin: 0; padding: 0;div idtitleVue学习笔记/div/el-headerel-main stylemargin: 0; padding: 0;el-menumodehorizontalbackground-color#e8e7e3text-color#777777active-text-color#000000:default-active0selectselectItemel-menu-itemv-foritem in items :indexitem.index:keyitem.indexdiv idtext{{ item.title }}/div/el-menu-item/el-menu/el-main/el-container
/templatescript
export default{props:[items],methods:{selectItem(index){this.$emit(selected,index)}}
}
/scriptstyle scoped
#title{color: brown;font-size: 40px;font-weight: bold;font-family: Georgia, Times New Roman, Times, serif;
}
#text{font-size: 20px;
}
/styleHomeDemo
templateel-container idcontainerel-header stylewidth: 100% height120pxHeader :itemsnavItems v-on:selectedchangeSelected/Header/el-headerel-mainBody :itemsbodyItems :topicnavItems[currentTopicIndex].title/Body/el-mainel-footerdiv idfooter{{ desc }}/div/el-footer/el-container
/templatescript
import Header from ./HeaderDemo.vue;
import Body from ./BodyDemo.vue;
import FM from ../tools/FileManager.jsexport default{components:{Header:Header,Body:Body,},data(){return{navItems:FM.getAllTopic().map((item,ind){return{index:ind,title:item}}),desc:版权所有仅限学习使用禁止传播,currentTopicIndex:0,};},methods:{changeSelected(index){this.currentTopicIndexindex}},computed:{bodyItems(){return FM.getPosts(this.currentTopicIndex).map((item,ind){return{index:ind,title:item}})}}
}
/scriptstyle scoped
#container{margin-left: 150px;margin-right: 150px;margin-top: 30px;height: 800px;
}
#footer{text-align: center;background-color: bisque;height: 40px;line-height: 40px;color: #717171;
}
/styleMarkdownDemo
templatep v-htmldata/p
/templatescript
import marked from marked;export default{props:[content],computed:{data(){return marked(this.content);}}
}
/script
FileManager.js
import axios from axios;
const FileManager{path:process.env.BASE_URLpost/, //项目public文件夹下的post文件夹路径// 获取所有的主题栏目后续增加可以继续配置getAllTopic:function(){return[HTML专题,JavaScript专题,Vue v-for]},// 获取 某个主题下的所有文章后续增加可以继续配置getPosts:function(topic){switch(topic){case 0:return[文本标签,HTML基础元素];case 1:return[方法与属性,语句与数据类型,about_js]case 2:return[v-for]}},// 获取某个文章的详细内容getPostContent:function(topicName,postName){let urlthis.pathtopicName/postName.md;return new Promise((res,rej){axios.get(url).then((response){res(response)},rej)})}
}export default FileManagerMain.js注意绑定
import { createApp } from vue
import VueAxios from vue-axios
import axios from axios
import ElementPlus from element-plus
import element-plus/dist/index.css
import * as ElementPlusIconsVue from element-plus/icons-vue
import App from ./App.vueconst app createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}
app.use(VueAxios,axios)
app.use(ElementPlus)
app.mount(#app)
APP源代码
templateHome/Home
/templatescript
import Home from ./components/HomeDemo.vue;export default{name:App,components:{Home:Home,},
}
/script
效果图按钮功能 新增二级菜单v-for 需要的可以私信
