3--Web前端开发-前端工程化，vue项目

news2024/11/14 18:53:59

目录

端口配置

element

快速入门

table表格组件

分页组件

Dialog对话框组件

表单组件

端口配置

在vue.config.js中更改

源代码为

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

更改为

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:7000
  }
})

保存后，输入ctrl+c  y,终止批处理操作

重新启动，得到

此时占用端口被改为7000

以.vue结尾，成为组件，每个组件由三个部分组成：<template>,<script>,<style>

<template>模板部分，生成HTML代码

<script>js代码，控制模板的数据来源和行为

<style>css样式部分

element

element是饿了么团队研发的一套为开发者、设计师和产品经理准备的基于vue2.0的桌面端组件库，

组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、等等

快速入门

安装elementui组件库（在当前工程的目录下），在命令行执行指令：

npm install element-ui@2.15.3

引入elementui组件库

根据网站上快速指南所示在main.js中补充完整代码

补充后为：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入elementUI组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

访问官网，复制组件代码，调整

在官网上找到组件代码：

定义element文件，在文件下定义ElementView.vue，要使用驼峰命名法，否则会报错，复制粘贴需要的代码

配置App.vue文件，输入标签<element-view></element-view>

得到

Alt shift f格式化

table表格组件

<template>
    <div>
        <!-- 按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
        <br>

        <!-- table-表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column pr op="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return{
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
        }]
    }}

}
</script>
<style></style>

分页组件

<template>
    <div>
        <!-- 按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
        <br>

        <!-- table-表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column pr op="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>

        <!-- pagination  分页 -->
        <el-pagination background layout="total,sizes,prev, pager, next,jumper" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="1000">
        </el-pagination>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods:{
        handleSizeChange:function(val){
            alert("每页记录数变化"+val)

        },
        handleCurrentChange:function(val){
            alert("页码发生变化"+val)

        }

    }

}
</script>
<style></style>

Dialog对话框组件

<template>
    <div>
        <!-- 按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
        <br>

        <!-- table-表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column pr op="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>

        <!-- pagination  分页 -->
        <el-pagination background layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="1000">
        </el-pagination>
        <br><br>
        <!-- Dialog 对话框 -->
        <!-- Table -->
        <el-button type="text" @click="dialogTableVisible = true">对话框</el-button>

        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods: {
        handleSizeChange: function (val) {
            alert("每页记录数变化" + val)

        },
        handleCurrentChange: function (val) {
            alert("页码发生变化" + val)

        }

    }

}
</script>
<style></style>

点击对话框

表单组件

<template>
    <div>
        <!-- 按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
        <br>

        <!-- table-表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column pr op="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>

        <!-- pagination  分页 -->
        <el-pagination background layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="1000">
        </el-pagination>
        <br><br>
        <!-- Dialog 对话框 -->
        <!-- Table -->
        <el-button type="text" @click="dialogTableVisible = true">对话框</el-button>

        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>
        <br><br>

        <!-- Dialog 对话框-form表单 -->
        <el-button type="text" @click="dialogFormVisible = true">带表单的对话框</el-button>

        <el-dialog title="表单" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="即时配送">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>





    </div>
</template>
<script>
export default {
    data() {
        return {
            form: {
          name: '',
          region: '',
          date1: '',
          date2: ''
        },
            gridData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            dialogTableVisible: false,
            dialogFormVisible: false,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods: {
        handleSizeChange: function (val) {
            alert("每页记录数变化" + val)

        },
        handleCurrentChange: function (val) {
            alert("页码发生变化" + val)

        },
        onSubmit:function(){
            alert(JSON.stringify(this.form));
        }

    }

}
</script>
<style></style>

点击代表单的对话框，并输入数据

点击提交，得到：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2111116.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux——redis主从复制、哨兵模式

Linux——redis主从复制、哨兵模式

一、redis 的安全加固&#xff1a; 对redis数据库访问的角度 auth // 验证登录redis 数据库的用户acl // 设置redis用户的权限将配置完成的ACL策略写入配置文件 config rewrite //目前redis生效的配置全部写入到默认配置文件的尾部写入到acl文件中&#xff0c;在加载配置文件时…
阅读更多...
《论软件设计模式及其应用》通关范文，软考高级系统架构设计师

《论软件设计模式及其应用》通关范文，软考高级系统架构设计师

论文真题 设计模式（Design Pattern）是一套被反复使用的代码设计经验总结，代表了软件开发人员在软件开发过程中面临的一般问题的解决方案和最佳实践。使用设计模式的目的是提高代码的可重用性，让代码更容易被他人理解，并保证代码可靠性。现有的设计模式已经在前人的系统中…
阅读更多...
每日一练：和为K的子数组

每日一练：和为K的子数组

一、题目要求 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2示例 2&#xff1a; 输入&#xff1a;n…
阅读更多...
python深度学习：从注意力机制到生成模型，全面解析现代AI技术

python深度学习：从注意力机制到生成模型，全面解析现代AI技术

近年来&#xff0c;伴随着以卷积神经网络&#xff08;CNN&#xff09;为代表的深度学习的快速发展&#xff0c;人工智能迈入了第三次发展浪潮&#xff0c;AI技术在各个领域中的应用越来越广泛。注意力机制、Transformer模型&#xff08;BERT、GPT-1/2/3/3.5/4、DETR、ViT、Swin…
阅读更多...
OpenCV结构分析与形状描述符（10）检测并提取轮廓函数findContours()的使用

OpenCV结构分析与形状描述符（10）检测并提取轮廓函数findContours()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在二值图像中查找轮廓。 该函数使用算法 253从二值图像中检索轮廓。轮廓是有用的工具&#xff0c;可用于形状分析和对象检测与识别。参见 OpenC…
阅读更多...
SDN架构详解

SDN架构详解

目录 1&#xff09;经典的IP网络-分布式网络 2&#xff09;经典网络面临的问题 3&#xff09;SDN起源 4&#xff09;OpenFlow基本概念 5&#xff09;Flow Table简介 6&#xff09;SDN的网络架构 7&#xff09;华为SDN网络架构 8&#xff09;传统网络 vs SDN 9&#xf…
阅读更多...
网络安全与恶意攻击：如何应对？

网络安全与恶意攻击：如何应对？

引言 随着技术的发展&#xff0c;我们的生活越来越依赖于网络。但是&#xff0c;这也暴露了我们的系统对各种网络威胁的脆弱性。无论是个人还是企业&#xff0c;网络安全都成为了我们不能忽视的话题。 网络威胁的类型 网络威胁主要有以下几种&#xff1a; 网络钓鱼攻击&#…
阅读更多...
linux学习--第四天

linux学习--第四天

--linux文件操作 文件IO操作包括&#xff1a; &#xff08;注&#xff1a;I&#xff1a;input&#xff08;输入&#xff09;O&#xff1a;output&#xff08;输出&#xff09;&#xff09; open&#xff1a;打开 close&#xff1a;关闭 read&#xff1a;读取 write&#xff1a;…
阅读更多...
c++一个数因子和（快速求解）

c++一个数因子和（快速求解）

void 一个数因子和(int 整数) {//缘由https://ask.csdn.net/questions/1054457#answer_1251715int he 0, j 0; string a "";while (j < 整数)if (!(整数%j))he j, a to_string(j) "";cout << a << "的因子和&#xff1a;" …
阅读更多...
如何在 Java 应用程序中定位高 CPU 使用率问题

如何在 Java 应用程序中定位高 CPU 使用率问题

文章目录 ♨ 前言♨ 提前准备♨ 线上定位♨ 结语 ♨ 前言 在运行 Java 应用程序的服务器上&#xff0c;高 CPU 使用率可能会影响应用程序的性能和稳定性。本文将介绍如何通过一系列步骤和工具来准确诊断和解决高 CPU 使用率问题&#xff0c;特别是针对 Java 环境下的应用程序。…
阅读更多...
OpenCV影像数据处理入门-学习篇

OpenCV影像数据处理入门-学习篇

目录 简介如何安装图像数据处理简单操作视频数据处理简单操作 一、简介 在计算机视觉项目的开发中&#xff0c;OpenCV作为最大众的开源库&#xff0c;拥有了丰富的常用图像处理函数库&#xff0c;可用于开发实时的图像处理、计算机视觉以及模式识别程序。采用C/C语言编写&am…
阅读更多...
用于辅助视障人士检测人行道障碍物的 TinyML 模型

用于辅助视障人士检测人行道障碍物的 TinyML 模型

这篇论文的标题为《A TinyML model for sidewalk obstacle detection: aiding the blind and visually impaired people》&#xff0c;发表在《Multimedia Tools and Applications》上。以下是论文的主要内容概述&#xff1a; 摘要&#xff1a; 论文介绍了在资源受限的物联网…
阅读更多...
C语言程序设计 笔记代码梳理 重制版

C语言程序设计 笔记代码梳理 重制版

前言 第1章 C语言的流程 1.C程序经历的六个阶段 编辑(Edit)预处理(Preprocess)编译(Compile)汇编(Assemble)链接(Link)执行(Execute) 2.C语言编写代码到运行 都是先编译&#xff0c;后链接&#xff0c;最后运行。&#xff08;.c ---> .obj --->.exe&#xff09;这个过…
阅读更多...
热老化的行业应用

热老化的行业应用

热老化应用行业&#xff1a;深度解析与图像呈现 热老化&#xff0c;作为一种重要的材料测试方法&#xff0c;在众多行业中扮演着关键角色。它通过模拟产品在高温环境下的长期使用&#xff0c;提前发现潜在的材料缺陷、性能衰退等问题&#xff0c;从而提高产品的可靠性&#xf…
阅读更多...
打造个性化时装购物平台：Spring Boot框架的实践

打造个性化时装购物平台：Spring Boot框架的实践

第1章 绪论 1.1背景及意义 随着社会的快速发展&#xff0c;计算机的影响是全面且深入的。人们生活水平的不断提高&#xff0c;日常生活中人们对时装购物系统方面的要求也在不断提高&#xff0c;喜欢购物的人数更是不断增加&#xff0c;使得时装购物系统的开发成为必需而且紧迫的…
阅读更多...
顶刊精析｜METI：整合细胞形态与空间转录组学的肿瘤微环境分析框架·24-09-06

顶刊精析｜METI：整合细胞形态与空间转录组学的肿瘤微环境分析框架·24-09-06

小罗碎碎念 本期精读文献&#xff1a;《METI: Deep profiling of tumor ecosystems by integrating cell morphology and spatial transcriptomics》 今天分享的这篇文献于2023年8月25日发表在Nat Commun&#xff0c;目前IF14.7。 作者类型作者姓名单位名称&#xff08;中文&am…
阅读更多...
【免费分享】25秋招提前批25秋招信息表

【免费分享】25秋招提前批25秋招信息表

秋招&#xff0c;即秋季校园招聘&#xff0c;通常是指每年秋季&#xff08;大约从9月到11月&#xff09;企业在各大高校举办的招聘活动。这是许多公司为了吸引优秀应届毕业生而进行的招聘活动&#xff0c;也是许多学生毕业后进入职场的重要途径。以下是秋招的一些关键点&#x…
阅读更多...
手机TF卡格式化后数据恢复：方法、挑战与预防措施

手机TF卡格式化后数据恢复：方法、挑战与预防措施

在现代生活中&#xff0c;‌手机已经成为我们不可或缺的一部分&#xff0c;‌而TF卡&#xff08;‌即MicroSD卡&#xff09;‌作为手机存储的扩展&#xff0c;‌更是承载了我们大量的重要数据。‌然而&#xff0c;‌不慎的格式化操作往往导致数据丢失&#xff0c;‌给用户带来不…
阅读更多...
集成电路学习：什么是RAM随机存取存储器

集成电路学习：什么是RAM随机存取存储器

RAM&#xff1a;随机存取存储器 RAM&#xff08;Random Access Memory&#xff0c;随机存取存储器&#xff09;是计算机中用于临时存储数据和程序指令的重要存储设备。以下是关于RAM的详细解析&#xff1a; 一、RAM的定义与功能 RAM是一种内部存储器&#xff0c;与CPU直接交换…
阅读更多...
（pycharm）安装python库函数Matplotlib步骤

（pycharm）安装python库函数Matplotlib步骤

1.在pycharm下面找到terminal&#xff0c;双击输入pip install Matplotlib&#xff0c;进行Matplotlib库函数的安装。 现在&#xff0c;当你运行pip --version或python.exe -m pip --version时&#xff0c;你应该会看到pip的版本已经更新为24.2。
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023