首页 > 其他分享 >vue前端工程化基础

vue前端工程化基础

时间:2023-09-03 10:07:36浏览次数:37  
标签:vue name 前端 如下 所示 组件 工程化 我们

1 前端工程化

1.1 前端工程化介绍

我们目前的前端开发中,当我们需要使用一些资源时,例如:vue.js,和axios.js文件,都是直接再工程中导入的,如下图所示:

image-20230609073434103

但是上述开发模式存在如下问题:

  • 每次开发都是从零开始,比较麻烦
  • 多个页面中的组件共用性不好
  • js、图片等资源没有规范化的存储目录,没有统一的标准,不方便维护

所以现在企业开发中更加讲究前端工程化方式的开发,主要包括如下4个特点

  • 模块化:将js和css等,做成一个个可复用模块
  • 组件化:我们将UI组件,css样式,js行为封装成一个个的组件,便于管理
  • 规范化:我们提供一套标准的规范的目录接口和编码规范,所有开发人员遵循这套规范
  • 自动化:项目的构建,测试,部署全部都是自动完成

所以对于前端工程化,说白了,就是在企业级的前端项目开发中,把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率,降低开发难度等等。接下来我们就需要学习vue的官方提供的脚手架帮我们完成前端的工程化。

1.2 前端工程化入门

1.2.1 环境准备

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的,用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

我们需要运行Vue-cli,需要依赖NodeJS,NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS,然后才能安装Vue-cli

  • NodeJS安装和Vue-cli安装

    详细安装步骤,请参考资料/NodeJS安装文档/NodeJS安装文档.md文件

    1669293955527

1.2.2 Vue项目简介

环境准备好了,接下来我们需要通过Vue-cli创建一个vue项目,然后再学习一下vue项目的目录结构。Vue-cli提供了如下2种方式创建vue项目:

  • 命令行:直接通过命令行方式创建vue项目

    vue create vue-project01
    
  • 图形化界面:通过命令先进入到图形化界面,然后再进行vue工程的创建

    vue ui
    

    图形化界面如下:

    1669294586147

1.2.2.1 创建vue项目

此处我们通过第二种图形化界面方式给大家演示。

首先,我们再桌面创建vue文件夹,然后双击进入文件夹,来到地址目录,输入cmd,然后进入到vue文件夹的cmd窗口界面,如下图所示:

1669294790640

然后进入如下界面:

1669294846601

然后再当前目录下,直接输入命令vue ui进入到vue的图形化界面,如下图所示:

1669294939067

然后我门选择创建按钮,在vue文件夹下创建项目,如下图所示:

1669295020228

然后来到如下界面,进行vue项目的创建

1669301661722

然后预设模板选择手动,如下图所示:

1669301737491

然后再功能页面开启路由功能,如下图所示:

1669301859936

然后再配置页面选择语言版本和语法检查规范,如下图所示:

1669301965095

然后创建项目,进入如下界面:

1669302091090

最后我们只需要等待片刻,即可进入到创建创建成功的界面,如下图所示:

1669302171975

到此,vue项目创建结束

1.2.2.2 vue项目目录结构介绍

我们通过VS Code打开之前创建的vue文件夹,打开之后,呈现如下图所示页面:

1669302718419

vue项目的标准目录结构以及目录对应的解释如下图所示:

1669302973198

其中我们平时开发代码就是在src目录

1.2.2.3 运行vue项目

那么vue项目开发好了,我们应该怎么运行vue项目呢?主要提供了2种方式

  • 第一种方式:通过VS Code提供的图形化界面 ,如下图所示:(注意:NPM脚本窗口默认不显示,可以参考本节的最后调试出来)

    1669303687468

    点击之后,我们等待片刻,即可运行,在终端界面中,我们发现项目是运行在本地服务的8080端口,我们直接通过浏览器打开地址

    1669303846100

    最终浏览器打开后,呈现如下界面,表示项目运行成功

    1669304009602

    其实此时访问的是 src/App.vue这个根组件,此时我们打开这个组件,修改代码:添加内容Vue

    1669304267724

    只要我们保存更新的代码,我们直接打开浏览器,不需要做任何刷新,发现页面呈现内容发生了变化,如下图所示:

    1669304385826

    这就是我们vue项目的热更新功能

    对于8080端口,经常被占用,所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容,添加如下代码:

    devServer:{
        port:7000
    }
    

    如下图所示,然后我们关闭服务器,并且重新启动,

    1669305444633

​ 重新启动如下图所示:

1669305570022

​ 端口更改成功,可以通过浏览器访问7000端口来访问我们之前的项目

  • 第二种方式:命令行方式

    直接基于cmd命令窗口,在vue目录下,执行输入命令npm run serve即可,如下图所示:

    1669304694076

补充:NPM脚本窗口调试出来

第一步:通过设置/用户设置/扩展/MPM更改NPM默认配置,如下图所示

1669304930336

然后重启VS Code,并且双击打开package.json文件,然后点击资源管理器处的3个小点勾选npm脚本选项,如图所示

1669305068434

然后就能都显示NPM脚本小窗口了。

1.2.3 Vue项目开发流程

那么我们访问的首页是index.html,但是我们找到public/index.html文件,打开之后发现,里面没有什么代码,但是能够呈现内容丰富的首页:如下图所示:

1669308098856

我们自习观察发现,index.html的代码很简洁,但是浏览器所呈现的index.html内容却很丰富,代码和内容不匹配,所以vue是如何做到的呢?接下来我们学习一下vue项目的开发流程。

对于vue项目,index.html文件默认是引入了入口函数main.js文件,我们找到src/main.js文件,其代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

上述代码中,包括如下几个关键点:

  • import: 导入指定文件,并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
  • new Vue(): 创建vue对象
  • $mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中,作用和之前学习的vue对象的le属性一致。
  • router: 路由,详细在后面的小节讲解
  • render: 主要使用视图的渲染的。

来到public/index.html中,我们删除div的id=app属性,打开浏览器,发现之前访问的首页一片空白,如下图所示,这样就证明了,我们main.js中通过代码挂在到index.html的id=app的标签区域的。

此时我们知道了vue创建的dom对象挂在到id=app的标签区域,但是我们还是没有解决最开始的问题:首页内容如何呈现的?这就涉及到render中的App了,如下图所示:

1669313364004

那么这个App对象怎么回事呢,我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分:

  • template: 模板部分,主要是HTML代码,用来展示页面主体结构的
  • script: js代码区域,主要是通过js代码来控制模板的数据来源和行为的
  • style: css样式部分,主要通过css样式控制模板的页面效果得

如下图所示就是一个vue组件的小案例:

1669313699186

此时我们可以打开App.vue,观察App.vue的代码,其中可以发现,App.vue组件的template部分内容,和我们浏览器访问的首页内容是一致的,如下图所示:

1669313894258

接下来我们可以简化模板部分内容,添加script部分的数据模型,删除css样式,完整代码如下:

<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

保存直接,回到浏览器,我们发现首页展示效果发生了变化,如下图所示:

1669314115641

2 Vue组件库Element

2.1 Element介绍

不知道同学们还否记得我们之前讲解的前端开发模式MVVM,我们之前学习的vue是侧重于VM开发的,主要用于数据绑定到视图的,那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架,主要用于开发美观的页面的。

Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。

Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比:可以发现ElementUI提供的各式各样好看的按钮

1669357961971

ElementUI的学习方式和我们之前的学习方式不太一样,对于ElementUI,我们作为一个后台开发者,只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中,并且做一些修改即可。其官网地址:https://element.eleme.cn/#/zh-CN,我们主要学习的是ElementUI中提供的常用组件,至于其他组件同学们可以通过我们这几个组件的学习掌握到ElementUI的学习技巧,然后课后自行学习。

2.2 快速入门

首先我们要掌握ElementUI的快速入门,接下来同学们就一起跟着步骤来操作一下。

首先,我们先要安装ElementUI的组件库,打开VS Code,停止之前的项目,然后在命令行输入如下命令:

npm install [email protected] 

具体操作如下图所示:

1669358653297

然后我们需要在main.js这个入口js文件中引入ElementUI的组件库,其代码如下:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

具体操作如图所示:

1669358935188

然后我们需要按照vue项目的开发规范,在src/views目录下创建一个vue组件文件,注意组件名称后缀是.vue,并且在组件文件中编写之前介绍过的基本组件语法,代码如下:

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

具体操作如图所示:

1669359450896

最后我们只需要去ElementUI的官网,找到组件库,然后找到按钮组件,抄写代码即可,具体操作如下图所示:

1669359839574

然后找到按钮的代码,如下图所示:

1669359904272

紧接着我们复制组件代码到我们的vue组件文件中,操作如下图所示:

1669360120385

最后,我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件,具体操作步骤如下:

1669360320983

然后App.vue组件中的具体代码如下,代码是我们通过上述步骤引入element-view组件时自动生成的

<template>
  <div id="app">
    <!-- {{message}} -->
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/Element/ElementView.vue'
export default {
  components: { ElementView },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

然后运行我们的vue项目,浏览器直接访问之前的7000端口,展示效果如下图所示:

1669360502407

到此,我们ElementUI的入门程序编写成功

2.3 Element组件

接下来我们来学习一下ElementUI的常用组件,对于组件的学习比较简单,我们只需要参考官方提供的代码,然后复制粘贴即可。

2.3.1 Table表格

2.3.1.1 组件演示

Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

接下来我们通过代码来演示。

首先我们需要来到ElementUI的组件库中,找到表格组件,如下图所示:

1669361564197

然后复制代码到我们之前的ElementVue.vue组件中,需要注意的是,我们组件包括了3个部分,如果官方有除了template部分之外的style和script都需要复制。具体操作如下图所示:

template模板部分:

1669362225501

script脚本部分

1669362382846

ElementView.vue组件文件整体代码如下:

<template>
    <div>
    <!-- Button按钮 -->
        <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>

        <!-- Table表格 -->
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="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>

此时回到浏览器,我们页面呈现如下效果:

1669362451236

2.3.1.2 组件属性详解

那么我们的ElementUI是如何将数据模型绑定到视图的呢?主要通过如下几个属性:

  • data: 主要定义table组件的数据模型
  • prop: 定义列的数据应该绑定data中定义的具体的数据模型
  • label: 定义列的标题
  • width: 定义列的宽度

其具体示例含义如下图所示:

1669363098610

PS:Element组件的所有属性都可以在组件页面的最下方找到,如下图所示:

1669363190361

2.3.2 Pagination分页

2.3.2.1 组件演示

Pagination: 分页组件,主要提供分页工具条相关功能。其展示效果图下图所示:

1669363631302

接下来我们通过代码来演示功能。

首先在官网找到分页组件,我们选择带背景色分页组件,如下图所示:

1669363746409

然后复制代码到我们的ElementView.vue组件文件的template中,拷贝如下代码:

<el-pagination
    background
    layout="prev, pager, next"
    :total="1000">
</el-pagination>

浏览器打开呈现如下效果:

1669363921750

2.3.2.2 组件属性详解

对于分页组件我们需要关注的是如下几个重要属性(可以通过查阅官网组件中最下面的组件属性详细说明得到):

  • background: 添加北京颜色,也就是上图蓝色背景色效果。
  • layout: 分页工具条的布局,其具体值包含sizes, prev, pager, next, jumper, ->, total, slot 这些值
  • total: 数据的总数量

然后根据官方分页组件提供的layout属性说明,如下图所示:

1669364288179

我们修改layout属性如下:

 layout="sizes,prev, pager, next,jumper,total"

浏览器打开呈现如下效果:

1669364403079

发现在原来的功能上,添加了一些额外的功能,其具体对应关系如下图所示:

1669364533849

2.3.2.3 组件事件详解

对于分页组件,除了上述几个属性,还有2个非常重要的事件我们需要去学习:

  • size-change : pageSize 改变时会触发
  • current-change :currentPage 改变时会触发

其官方详细解释含义如下图所示:

1669364990991

对于这2个事件的参考代码,我们同样可以通过官方提供的完整案例中找到,如下图所示:

1669365117644

然后我们找到对应的代码,首先复制事件,复制代码如下:

@size-change="handleSizeChange"
@current-change="handleCurrentChange"

此时Panigation组件的template完整代码如下:

<!-- Pagination分页 -->
<el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               background
               layout="sizes,prev, pager, next,jumper,total"
               :total="1000">
</el-pagination>

紧接着需要复制事件需要的2个函数,需要注意methods属性和data同级,其代码如下:

methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },

此时Panigation组件的script部分完整代码如下:

<script>
export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
     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>

回到浏览器中,我们f12打开开发者控制台,然后切换当前页码和切换每页显示的数量,呈现如下效果:

1669365585379

2.3.3 Dialog对话框

2.3.3.1 组件演示

Dialog: 在保留当前页面状态的情况下,告知用户并承载相关操作。其企业开发应用场景示例如下图所示:

1669365791037

首先我们需要在ElementUI官方找到Dialog组件,如下图所示:

1669365950945

然后复制如下代码到我们的组件文件的template模块中

<br><br>
<!--Dialog 对话框 -->
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</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>

并且复制数据模型script模块中:

 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,

其完整的script部分代码如下:

<script>
export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
     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 弄'
          }]
        }
      }
}
</script>

然后我们打开浏览器,点击按钮,呈现如下效果:

1669366365778

2.3.3.2 组件属性详解

那么ElementUI是如何做到对话框的显示与隐藏的呢?是通过如下的属性:

  • visible.sync :是否显示 Dialog

具体释意如下图所示:

1669366903107

visible属性绑定的dialogTableVisble属性一开始默认是false,所以对话框隐藏;然后我们点击按钮,触发事件,修改属性值为true,

然后对话框visible属性值为true,所以对话框呈现出来。

2.3.4 Form表单

2.3.4.1 组件演示

Form 表单:由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。

表单在我们前端的开发中使用的还是比较多的,接下来我们学习这个组件,与之前的流程一样,我们首先需要在ElementUI的官方找到对应的组件示例:如下图所示:

1669369751014

我们的需求效果是:在对话框中呈现表单内容,类似如下图所示:

1669365791037

所以,首先我们先要根据上一小结所学习的内容,制作一个新的对话框,其代码如下:

<br><br>
<!-- Dialog对话框-Form表单 -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>

<el-dialog title="Form表单" :visible.sync="dialogFormVisible">

</el-dialog>

还需要注意的是,针对这个新的对话框,我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示,代码如下:

 dialogFormVisible: false,

打开浏览器,此时呈现如图所示的效果:

1669370230214

然后我们复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中,但是,此处官方提供的表单项标签太多,所以我们只需要保留前面3个表单项组件,其他多余的删除,所以最终template部分代码如下:

<el-dialog title="Form表单" :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>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

观察上述代码,我们发现其中表单项标签使用了v-model双向绑定,所以我们需要在vue的数据模型中声明变量,同样可以从官方提供的代码中复制粘贴,但是我们需要去掉我们不需要的属性,通过观察上述代码,我们发现双向绑定的属性有4个,分别是form.name,form.region,form.date1,form.date2,所以最终数据模型如下:

1669371003680

 form: {
          name: '',
          region: '',
          date1: '',
          date2:''
        },

同样,官方的代码中,在script部分中,还提供了onSubmit函数,表单的立即创建按钮绑定了此函数,我们可以输入表单的内容,而表单的内容是双向绑定到form对象的,所以我们修改官方的onSubmit函数如下即可,而且我们还需要关闭对话框,最终函数代码如下:

1669371163913

 onSubmit() {
       console.log(this.form); //输出表单内容到控制台
        this.dialogFormVisible=false; //关闭表案例的对话框
      }

然后打开浏览器,我们打开对话框,并且输入表单内容,点击立即创建按钮,呈现如下效果;

1669371448683

最终vue组件完整代码如下,同学们可以针对form表单案例,参考该案例对应的template部分和script部分代码

<template>
    <div>
    <!-- Button按钮 -->
        <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>

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

        <br>
        <!-- Pagination分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="sizes,prev, pager, next,jumper,total"
            :total="1000">
        </el-pagination>

        <br><br>
        <!--Dialog 对话框 -->
        <!-- Table -->
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</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">打开嵌套Form的 Dialog</el-button>

        <el-dialog title="Form表单" :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>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //表单案例的提交事件
      onSubmit() {
        console.log(this.form); //输出表单内容到控制台
        this.dialogFormVisible=false; //关闭表案例的对话框
      }
    },
     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, //控制form表单案例的对话框
        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>

3 Vue路由

3.1 路由介绍

将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级,其结构如下:

1669385311576

vue官方提供了路由插件Vue Router,其主要组成如下:

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>:请求链接组件,浏览器会解析成<a>
  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件

其工作原理如下图所示:

1669386261570

首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

然后我们页面提供一个<router-link>组件,用户点击,发出路由请求;

接着我们的VueRouter根据路由请求,在路由表中找到对应的vue组件;

最后VueRouter会切换<router-view>中的组件,从而进行视图的更新

3.2 路由入门

接下来我们来演示vue的路由功能。

首先我们需要先安装vue-router插件,可以通过如下命令

npm install [email protected]

但是我们不需要安装,因为当初我们再创建项目时,已经勾选了路由功能,已经安装好了。

然后我们需要在src/router/index.js文件中定义路由表,根据其提供的模板代码进行修改,最终代码如下:

import Vue  'vue'
import VueRouter  'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',  //地址hash
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

注意需要去掉没有引用的import模块。

在main.js中,我们已经引入了router功能,如下图所示:

1669387519004

路由基本信息配置好了,路由表已经被加载,此时我们还缺少2个东西,就是<router-lin>和<router-view>,所以我们需要修改2个页面(EmpView.vue和DeptView.vue)我们左侧栏的2个按钮为router-link,其代码如下:

<el-menu-item index="1-1">
    <router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
    <router-link to="/emp">员工管理</router-link>
</el-menu-item>

然后我们还需要在内容展示区域即App.vue中定义route-view,作为组件的切换,其App.vue的完整代码如下:

<template>
  <div id="app">
    <!-- {{message}} -->
    <!-- <element-view></element-view> -->
    <!-- <emp-view></emp-view> -->
    <router-view></router-view>
  </div>
</template>

<script>
// import EmpView  './views/tlias/EmpView.vue'
// import ElementView  './views/Element/ElementView.vue'
export default {
  components: { },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

但是我们浏览器打开地址: http://localhost:7000/ ,发现一片空白,因为我们默认的路由路径是/,但是路由配置中没有对应的关系,

所以我们需要在路由配置中/对应的路由组件,代码如下:

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect:'/emp' //表示重定向到/emp即可
  },
]

此时我们打开浏览器,访问http://localhost:7000 发现直接访问的是emp的页面,并且能够进行切换了,其具体如下图所示:

image-20230609071415325

到此我们的路由实现成功。

标签:vue,name,前端,如下,所示,组件,工程化,我们
From: https://blog.51cto.com/teayear/7336464

相关文章

  • 深入理解 Vuex:Vue 状态管理的核心
    在Vue.js应用程序中,管理组件之间的状态是一项关键任务。为了有效地管理和共享应用程序的数据,Vue.js开发团队开发了一个强大的状态管理库,称为Vuex。本文将深入探讨Vuex的核心概念、用法和最佳实践,帮助您更好地理解和利用这一工具。什么是Vuex?Vuex是一个专为Vue.js设计的状态管理库,......
  • 前端存储方案一览
    Cookies在HTML5标准前本地储存的主要的也是最早提出的⽅式,优点是兼容性好,请求头⾃带cookie⽅便(使用fetch的话需要额外配置),缺点是⼤⼩只有4k,⾃动请求头加⼊cookie浪费流量,而且每个domain限制20个cookie,使⽤起来麻烦,需要自行封装相关方法。Cookie一旦创建成功,名称就无法修改Cookie是......
  • vue 中的html和v-html区别
    <template> <div>2222</div> <p>{{message}}</p> <p>{{rawhtml}}</p> <pv-html="rawhtml"></p></template><script> exportdefault{     data(){         return{             messag......
  • 前端Vue仿企查查天眼查高管信息列表组件
    ​随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之......
  • 前端Vue仿企查查 天眼查知识产权标准信息列表组件
    ​引入Vue仿企查查天眼查知识产权标准信息列表组件随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件......
  • 2、Vue中安装element-plus
    1、在项目终端命令行中输入:pnpminstallelement-plus--save 2、项目中导入elementimportElementPlusfrom'element-plus'import'element-plus/dist/index.css' 3、使用element组件 ......
  • vue项目中全局引入cass(scss)变量和sass(scss) mixin
    1、使用场景variable.scss文件样例//颜色定义规范$color-background:#222;mixin.scss文件样例//背景图片@mixinbg-image($url){background-image:url($url+"@2x.png");@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){background-i......
  • vue --version 运行出现throw new ERR_SYSTEM_ERROR 错误
    (1)根据错误提示信息,找到出错入口文件:E:\SVN\zlpt\node_modules\node-ipc\entities\Defaults.js然后指定位置添加如下代码即可:constos=require('os');os.hostname=()=>"localhost";......
  • Vue的使用
    Vue是什么:虚拟DOM重用模板的时候在Vue中存在虚拟DOM真实的DOM(我们眼睛能看到的部分)虚拟DOM的虚拟出现是为了更好的去重用我们的DOM模块化编程将一个页面的某一部分抽取出来变成一个独立的代码块,独立代码块可以是HTML、JS、CSS模板容器<!--准备一个模板容器--><divid="div01">......
  • 来玩,前端性能优化(+面试必问:宏任务和微任务)
    前端性能优化相关的“技能点”笔者之前也写过几篇,但是大多都是小打小闹。我重新整理了曾经使用过的性能优化手段。本文介绍三种方案:页面资源预加载、服务请求优化和非首屏视图延迟加载。页面资源预加载页面是不可能真正预加载的,但是有一个地方:入口代码中依赖的js模块。一般来说,......