VUE脚手架相关＜三＞

最新推荐文章于 2024-05-28 11:10:38 发布
最新推荐文章于 2024-05-28 11:10:38 发布
阅读量92 收藏
点赞数
分类专栏： python python及日常测试记录 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30021989/article/details/115857854
版权

1、修改左侧导航栏菜单结构

参照sky平台



Mock平台

公共参数
接口分类
接口管理

在这里插入图片描述

2、针对新增加的子页面在views目录下新建三个对应的vue文件

在这里插入图片描述

源码：
<el-aside width="200px">
          <el-menu
        default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          background-color="#545c64"
          text-color="#fff"
          style="height:100%"
          active-text-color="#ffd04b">
          <el-submenu index="a">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>Mock平台</span>
                </template>
                <el-menu-item index="public_data">公共参数</el-menu-item>
                <el-menu-item index="category">接口分类</el-menu-item>
                <el-menu-item index="interface">接口管理</el-menu-item>
              </el-submenu>
          <el-menu-item index="user">
              <i class="el-icon-menu"></i>
              <span slot="title">测试场景构造</span>
          </el-menu-item>
          <el-menu-item index="project">
              <i class="el-icon-setting"></i>
              <span slot="title">效能工具</span>
          </el-menu-item>
          <el-menu-item index="data">
              <i class="el-icon-setting"></i>
              <span slot="title">测试数据导航</span>
          </el-menu-item>
      </el-menu>

      </el-aside>

3、增加路由到对应的VUE文件在这里插入图片描述

在这里插入图片描述

4、修改router.js里对应的routes路径

在这里插入图片描述

源码：
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Category from './views/Category.vue'
import PublicData from './views/PublicData.vue'
import Interface from './views/Interface.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/Category',
      name: 'Category',
      component: () => import(/* webpackChunkName: "about" */ './views/Category.vue')
    },
    {
      path: '/PublicData',
      name: 'PublicData',
      component: () => import(/* webpackChunkName: "about" */ './views/PublicData.vue')
    },
    {
      path: '/Interface',
      name: 'Interface',
      component: () => import(/* webpackChunkName: "about" */ './views/Interface.vue')
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/project',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/user',
      name: 'one',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './components/one.vue')
    }
  ]
})

3、增加页面查询条件（接下来以Interface.vue为例写一个页面）

页面原型为下图：
在这里插入图片描述

1)、第一步参考页面划分布局：

在这里插入图片描述

<el-row>
      <el-col :span="4">
        1
      </el-col>
      <el-col :span="4">
         2
      </el-col>
      <el-col :span="2">
        3
      </el-col>
      <el-col :span="2">
        4
      </el-col>
    </el-row>
    <el-row>
      2
    </el-row>

2)、选择element里的input输入框组件

在这里插入图片描述


<el-col :span=4>
          <el-input v-model="queryType" placeholder="请输入查询条件"></el-input>
          </el-col>

3）、下拉选择框

在这里插入图片描述

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

4）、并且在script里增加变量

<script>
export default {
    data() {
    return {
        queryType:null,
        category:null,
      input: '',
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }]
        }
      }
 }
</script>

5）、添加搜索按钮组件

 <el-col :span=2>
     <el-button type="primary">搜索</el-button>
    </el-col>

在这里插入图片描述

6）、添加新建按钮组件，增加dialog弹框

<el-col :span=2>
            <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
          </el-col>

在这里插入图片描述

 <el-col :span=2>
            <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
          </el-col>
 <el-dialog title="新建接口" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="接口名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="接口描述" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="接口url" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item  label="自定义代码" :label-width="formLabelWidth">
      <el-input  type="textarea" v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>


 export default {
 data(){
 return{
dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },    
        formLabelWidth: '120px'
                }
        }
     }

7）、添加table组件

在这里插入图片描述

<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

8）、到目前为止的效果图

在这里插入图片描述

Doris-wxy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0 vue-cli3.0 搭建项目
爱睡的虫虫
11-15 2174
vue 搭建项目 生产环境的构建配置（脚手架） //全局安装 vue-cli cnpm install -g vue-cli //创建一个基于webpack 模板的新项目 vue init webpack my-name ? Project name webpc //项目名（回车键默认） ? Project description //项目描述 ? Aut...
Vue开发项目入门——Vue脚手架
m0_67495466的博客
04-12 3万+
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。
Vue脚手架
天道酬勤，厚积薄发
08-12 3876
Vue脚手架学习笔记
vue脚手架与创建vue项目
最新发布
qq_48843954的博客
05-28 663
vue脚手架的安装与创建vue项目需要先行安装配置node与npm，详情可以看node、npm的下载、安装、配置_node 下载安装-CSDN博客。
Vue（三）使用Vue脚手架
weixin_58598560的博客
05-30 3864
/ 全局过滤器})// 定义全局指令// 指令与元素成功绑定时（一上来）},// 指令所在元素被插入页面时},// 指令所在的模板被重新解析时})//定义混入data() {return {x: 100,y: 200},})//给Vue原型上添加一个方法（vm和vc都能用）alert('你好啊！')1、拆分静态组件组件要按照功能点拆分，命名不要与html元素冲突2、实现动态组件考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：（1）
vue脚手架搭建、介绍和初始页面的构造（图文详细）
m0_56369204的博客
06-28 4567
如何解决繁琐的项目初始化过程，快速搭建一个Vue项目，而不必担心复杂的配置和设置？Vue脚手架Vue Scaffold（Vue CLI）将实现这个功能，本文将带你入门Vue脚手架，熟悉项目结构和基本配置。
Vue脚手架的简单使用实例
10-18
Vue脚手架是Vue.js开发过程中常用的工具，它基于Webpack，可以帮助开发者快速搭建项目结构，实现自动化构建、打包和热加载等功能。Vue脚手架简化了项目的初始化工作，使得开发者能够专注于编写核心业务逻辑。 首先...
vue脚手架vue脚手架vue脚手架vue脚手架vue脚手架
04-26
Vue脚手架（Vue CLI）是Vue.js官方提供的一个命令行工具，用于快速搭建 Vue 项目，它极大地简化了项目的初始化过程，帮助开发者设置和配置项目环境，提高开发效率。 Vue CLI 提供了丰富的预设选项，包括Webpack配置...
vue脚手架（纯净版）
07-10
Vue脚手架（Vue CLI）是官方提供的一个命令行工具，旨在简化Vue项目的搭建和配置过程，让开发者能够快速启动新项目。"vue脚手架（纯净版）"通常指的是剥离了某些非必要插件或预设，只保留基础功能的CLI版本，以满足...
vue脚手架搭建项目的兼容性配置详解
12-12
使用vue-cli搭建项目，面临着解决ie兼容性问题(ie9+)，因为ie浏览器并不支持es6语法等。 首先安装babel-polyfill，解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js...
VUE脚手架具体使用方法
10-16
Vue.js脚手架，即Vue CLI（Command Line Interface），是一个官方提供的强大构建工具，它简化了基于Webpack的项目设置，让开发者可以快速地初始化并构建Vue.js应用。Vue CLI通过预设的配置，免去了手动配置Webpack的...
vuek框架结构设计及左侧菜单右侧内容显示
08-16
环境配置 Node 下载地址http://nodejs.cn/ 安装文件下有一个绿色的图片交node.exe 点击运行 输入node -v进行检测是否安装成功 使用vue-cli(脚手架)搭建项目 vue-cli是vue官方提供的用域搭建基于vue+webpack_es6项目的脚手架工具 在线文档：https://github.com/vuejs/vue-cli 操作： 1.npm install -g vue-cli：全局下载工具 2.vue init webpack 项目名：下载基于webpack模板项目 3.cd 项目名：进入项目目录 4.npm install :下载项目依赖的所有模块 5.npm run dev ：运行项目 6.访问项目：localhost:8080 项目目录结构 src assets:存放照片、css、js css js img components:存放组件 lib：存放模拟数据 router:配置路由 store:存放vuex vuex的安装：cd x项目目录 cnpm install vuex --save views:存放所有单页面 配置访问端口号： 根目录下有一个config文件夹，看名字就知道与配置有关，打开config目录下的index.js dev: { env: require('./dev.env'), port: 8092, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, } 项目目录下：https://blog.csdn.net/weixin_39378691/article/details/83784403 1.安装elementUI：cd进入项目根目录，npm i element-ui -S 2.引入elementUI组件（main.js文件中） import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element, { size: 'small' }) 项目目录下：https://blog.csdn.net/weixin_41432849/article/details/81988058 1.安装jquery：cd进入项目根目录， npm install jquery --save 2.在项目 build 里的webpack.base.conf.js 里加载webpack文件，注意，要放在配置文件第一行； const webpack = require('webpack') 3.在module.exports的最后加入 , plugins:[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", jquery:"jquery", "window.jQuery":"jquery" }) ]
Vue-cli(vue脚手架)上万字总结，超详细教程
热门推荐
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
14-VUE的脚手架
m0_57262196的博客
04-09 975
ref属性1.被用来给元素或子组件注册引用信息(id的替代者)2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)3.使用方式：打标识：.... 或 获取：功能：让组件接收外部传过来的数据(1).传递数据：(2).接收数据：第一种方式（只接收）：第二种方式（限制类型）：props:{第三种方式（限制类型、限制必要性、指定默认值）：props:{
探究Vue 的脚手架-详细版
pymxb1991的专栏
08-05 1371
从cli介绍到 安装vue/cli 到vue-create xxx 创建项目详解 jsconfig.json 详解 package.json 详解 vue.config.js 详解 public 文件夹 放置所有的静态资源 把Vue 认识透彻
vue脚手架搭建项目（详细教程）
weixin_65855560的博客
06-19 1万+
vue的自动化构建工具是node.js帮我们做的，这就是我们为什么要下载node的原因。npm install < name > --save：安装的同时，将信息写入package.json中，项目路径中若是有。Vue脚手架指的是vue-cli，它是一个快速构建**单页面应用程序（SPA）**环境配置的工具）命令行界面。npm list：查看当前目录下已安装的node包。npm ls：查看当前目录下已安装的node包。npm -v：查看npm安装的版本。：是一个开源的前端打包工具。1.进入终端执行命令。
vue-cli脚手架
lanlan112233的博客
04-13 2206
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程删除已安装的 vue-cli先安装淘宝镜安装cli安装结束后，你可以通过或vue -V查看 vue-cli 的版本信息。
vue脚手架
TashuoLhy的博客
10-10 2148
vue 脚手架的安装
Vue实战之Vue CLI 脚手架
9.冄2.7.號的博客
08-12 922
Vue CLI 脚手架
vue2脚手架，如何在轮播图中用<router-link></router-link>代替<a></a>
06-09
在 Vue 2 的脚手架中，你可以通过以下步骤在轮播图中使用 `<router-link>`： 1. 首先，在你的 Vue 组件中导入 `router-link` 组件： ```javascript import { RouterLink } from 'vue-router' ``` 2. 然后，在你的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值