Vue-material模板使用

本文介绍了如何使用Vue Material模板进行前端开发,包括模板下载、文件结构解析、新页面的添加以及路由配置。通过在/src/pages中创建新页面并导入到路由配置中,实现了页面间的跳转。此外,还讲解了在布局组件中添加导航链接,以及通过this.$router.push实现按钮点击跳转的方法。
摘要由CSDN通过智能技术生成

介绍

Vue material是有很多适用于vue.js的组建库,官方也出来一个后台管理平台的模板,下载链接戳这里
这篇博客主要是快速从0开始使用此模板~之后会一点vue.js的语法,就可以着手开发了!因为很多是自己猜的。。所以不一定对,希望有帮助>_<

文件架构

在这里插入图片描述

添加页面

在这里插入图片描述
在这里插入图片描述
这里我们一般添加的页面就显示在pages那部分。在/src/pages中添加course.vue(你想要添加的页面),然后可以添加vue组件初始的代码

<template>
  <div class="content">
   </div>
</template>

<script>
import SimpleTable from "@/components";
export default {
   
  data() {
   
    return {
   

    };
  
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue-carbon,基于 vue 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7。安装目前只使用 npm 安装,和使用 webpack 项目的应用npm install vue-carbon --saveimport Vue from 'vue' import VueCarbon from 'vue-carbon' Vue.use(VueCarbon)简单使用例如这个 Refresh Control 组件的demo页面<template> <div class="page">   <header-bar>     <icon-button slot="left" @click="back()" icon="arrow_back"></icon-button>     <span>Refresh Control</span>     <icon-button slot="right" @click="refresh()" icon="refresh"></icon-button>   </header-bar>   <content v-el:trigger>     <refresh-control @refresh="refresh" :trigger="$els.trigger" :refreshing="refreshing"></refresh-control>     <content-block>       <p class="refresh-desc">          按住 - 下拉 - 释放可以刷新数据       </p>     </content-block>     <list>       <item-cell v-for="item in items">         <item-title>           {{item}}         </item-title>       </item-cell>     </list>   </content> </div> </template>[removed]export default {  data () {    return {      items: ['1', '2', '3', '5', '6', '7', '8', '9', '10'],      end: 10,      refreshing: false    }  },  methods: {    back () {      window.history.back()    },    refresh () {      this.refreshing = true      setTimeout(() => {        this.refreshing = false        var arr = []        for (let i = this.end; i < this.end   10; i ) {          arr.push(String(i   1))        }        this.end  = 10        this.items = arr      }, 2000)    }  }}[removed]<style lang="less">.refresh-desc{  text-align: center;}</style>效果如下 标签:VueCarbon
Vue-Codemirror 是一个基于 Vue.js 的代码编辑器组件,它使用了 Codemirror 作为底层的编辑器。Codemirror 是一个功能强大的代码编辑器,支持多种编程语言和主题,并提供了丰富的编辑器功能,如语法高亮、自动完成、代码折叠等。 使用 Vue-Codemirror,你可以轻松地在 Vue.js 项目中添加一个可定制的代码编辑器。你可以通过 npm 或 yarn 安装 Vue-Codemirror,并在 Vue 组件中引入它。然后,你可以使用 Vue-Codemirror 提供的组件来展示和编辑代码。 以下是一个简单的示例,展示了如何在 Vue使用 Vue-Codemirror: ```vue <template> <div> <codemirror v-model="code" :options="editorOptions"></codemirror> </div> </template> <script> import VueCodemirror from 'vue-codemirror'; import 'codemirror/lib/codemirror.css'; import 'codemirror/theme/material.css'; export default { components: { Codemirror: VueCodemirror, }, data() { return { code: '', editorOptions: { mode: 'javascript', theme: 'material', lineNumbers: true, }, }; }, }; </script> ``` 在上面的示例中,我们首先引入了 `vue-codemirror` 和 Codemirror 的 CSS 文件。然后,在 Vue 组件中,我们将 `vue-codemirror` 导入为 `Codemirror` 组件,并在模板使用它。我们通过 `v-model` 指令将 `code` 属性与编辑器的值绑定起来。我们还可以通过 `options` 属性传递编辑器的配置选项,例如指定编辑器的语言模式、主题和是否显示行号。 这只是一个简单的示例,你可以根据需要进一步定制 Vue-Codemirror 的使用。你可以参考 Vue-Codemirror 的文档以了解更多关于配置选项和功能的信息。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值