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

已于 2024-09-03 12:25:06 修改
阅读量786 收藏 7
点赞数 16
分类专栏： JavaWeb 文章标签： 前端 vue.js javascript
于 2024-09-03 12:17:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77946674/article/details/141849452
版权

目录

端口配置

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>

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

点击提交，得到：

灯火不休ᝰ
关注
专栏目录
常见的web前端开发框架：Vue.js
m0_61176833的博客
02-10 3631
常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Vue.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。
Web前端开发系列——1.0创建Vue项目
m0_53156691的博客
06-15 1457
Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型。声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。选项式 API组合式 API选项式 API 是在组合式 API 的基础上实现的！
vue.config.js 全局配置
热门推荐
轻风细雨_林木木
03-20 2万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
vue.config.js基本配置
qq_35496811的博客
06-15 4248
vue3、vue2基本配置
vue-neo4j:vue使用D3对neo4 j进行可视化-源码开发技术-其它
06-07
Neo4j Vue 安装步骤 克隆或下载该库到本地 下载neo4j并安装到本地，启动neo4j服务 进入到该工程的根目录，输入命令：npm run update进行npm包的导入 使用命令：npm run dev启动该工程 默认端口是：8081 neo4j账号...
ruoyi-cloud前端工程，使用ant design vue框架
11-04
Ruoyi-Cloud是一款基于Ant Design Vue框架的前端工程，主要应用于web应用开发，特别是后台管理系统的设计和构建。Ant Design Vue是阿里巴巴推出的一款Vue.js组件库，它将Ant Design的设计理念与Vue.js的轻量、易用性...
litchi-admin 后台管理系统配套前端工程，基于Vue3 实现
03-27
《Vue3 搭建的 litchi-admin 前端工程详解》 在现代Web开发领域，前端框架的重要性不言而喻。Vue.js作为一款轻量级、高性能的前端框架，深受开发者喜爱。尤其在Vue3发布后，其诸多改进和优化更是提升了开发效率和...
vue-neo4j:vue使用D3对neo4j进行可视化源码开发技术-其它
06-14
Neo4j Vue 安装步骤 克隆或下载该库到本地 下载neo4j并安装到本地，启动neo4j服务 进入到该工程的根目录，输入命令：npm run update进行npm包的导入 使用命令：npm run dev启动该工程 默认端口是：8081 neo4j账号...
vue.config.js
qq_50853940的博客
02-17 143
vue.config.js
【Vue2搭建（安装脚手架）项目配置】
Java和网络安全学习交流
12-10 2501
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 VUE是一款由数据驱动视图的前端框架，它基于MVVM(Model View View Model)模式,实现数据与视图的双向绑定。 MVVM：Model表示数据模型，View表示视图,
vue本地开发设置代理连接本地后台服务
多看多听多总结
08-09 2811
vue本地开发设置代理连接本地后台服务
vue中的vue.config.js相关配置和代码
qq_54646196的博客
04-14 402
【代码】vue中的vue.config.js相关配置和代码。
vue2.0 项目打包上线，自定义打包配置
m0_53251830的博客
09-18 1949
vue2.0 项目打包上线，自定义打包配置
vue跨域配置
谷雨2004的博客
03-01 876
在vue.config.js中配置服务器 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 配置服务器，添加代理选项 // devServer:开发 服务器 devServer: { // 必须重启服务器，配置才能生效 // proxy:代理 proxy: { '/douyu
VueCli中常用的vue.config.js配置
最新发布
m0_56288138的博客
08-11 404
VueCli中常用的vue.config.js配置
vue3的webpack配置
weixin_52663662的博客
11-27 2501
1、首先导入对应的4个配置插件 npm install webpack@5.0 --save-dev npm install webpackbar -D npm i terser-webpack-plugin@5.0.2 -D npm i compression-webpack-plugin@5.0.1 -D 2、在vue.config.js的配置 const { defineConfig } = require("@vue/cli-service"); var path = req
Vue-cli快速搭建：从零到一构建Web前端项目
"本文主要介绍了如何使用Vue-cli快速构建web前端项目，包括Vue-cli的概述、应用背景、构建环境，特别是对于node.js的安装和基本命令的使用，以及如何使用Vue-cli搭建Hello World项目。Vue-cli是Vue.js的官方脚手架，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值