Web前端实战:Vue工程化+ElementPlus

1.Vue工程化

1.1介绍

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

1.2环境准备

1.2.1 NodeJS安装

1). 验证NodeJS的环境变量
NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

2). 配置npm的全局安装路径

使用 管理员身份 运行命令行，在命令行中，执行如下指令：

npm config set prefix "D:\develop\NodeJS"

注意：D:\develop\NodeJS 这个目录是NodeJS的安装目录 !!!

3). 切换为淘宝镜像，加速下载：

npm config set registry https://registry.npmmirror.com

1.2.3npm介绍

• npm：Node Package Manager，是NodeJS的软件包管理器。
  

在开发前端项目的过程中，我们需要相关的依赖，就可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地了。

1.3 Vue项目创建

1.3.1项目创建

创建一个工程化的Vue项目，执行命令：npm create vue@3.3.4

项目创建完成以后，进入vue-project01 项目目录，执行命令安装当前项目的依赖：npm install

1.3.2项目结构

1.3.3启动项目

• 方式一：命令行
  启动项目，我们可以在命令行中执行命令：npm run dev，就可以启动Vue项目了。
  

• 方式二：Vscode图形化界面
  点击NPM脚本中的dev后的运行按钮，就可以启动项目。
  

启动起来之后，我们就可以访问前端Vue项目了，访问路径：http://localhost:5173

1.4Vue项目开发流程

其中*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。

1.5 API风格

• 组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。代码形式如下：

<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0); //声明响应式变量

function increment(){ //声明函数
   count.value++;
}

onMounted(() => { //声明钩子函数
  console.log('Vue Mounted....'); 
})
</script>

<template>
   <input type="button" @click="increment"> Api Demo1 Count : {{ count }}
</template>

<style scoped>
   
</style>

• setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
• ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。
• onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

• 选项式API
  选项式API：可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

<script>
export default{
   data() {
      return {
         count: 0
      }
   },
   methods: {
      increment: function(){
         this.count++
      }
   },
   mounted() {
      console.log('vue mounted.....');
   }
}
</script>

<template>
  <input type="button" @click="increment">Api Demo1 Count :  {{ count }}
</template>

<style scoped>

</style>

在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。

2.ElementPlus

2.1介绍

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。
Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。
官方网站：https://element-plus.org/zh-CN/#/zh-CN

2.2快速入门

准备工作：
1). 将准备好的文件,使用VSCode将其打开。

2). 参照官方文档，安装ElementPlus的组件库（在当前工程的目录下），执行如下命令：

npm install element-plus@2.4.4 --save

3). 在main.js 中引入ElementPlus组件库 （参照官方文档），最终 main.js 中代码如下：

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

app.mount('#app')

制作组件：
1） 访问ElementPlus的官方文档，查看对应的组件源代码。

2). 在 src下创建 views 目录，在 views 目录下，创建Element.vue组件文件，复制组件代码，调整成自己想要的 。

<script setup>

</script>

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
</template>

<style scoped>

</style>

3). 在根组件 app.vue 中引入Element.vue

<script setup>
import Element from './views/Element.vue'
</script>

<template>
  <Element></Element>
</template>

<style scoped>

</style>

4). 启动项目，访问 http://localhost:5173

2.3常见组件

2.3.1表格组件

代码:

<script setup>
const tableData = [
  {date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},
  {date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'}
]
</script>

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

Table表格组件，属性说明：

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

2.3.2分页条组件

默认情况下，ElementPlus的组件是英文的，如果希望使用中文语言，可以在 main.js 中做如下配置：

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale: zhCn})

代码:

<script setup>
const currentPage4 = ref(1)
const pageSize4 = ref(10)

const handleSizeChange = (val) => {
  console.log(`设置每页大小: ${val}`)
}
const handleCurrentChange = (val) => {
  console.log(`设置当前页: ${val}`)
}
</script>

<template>
  <!-- pagination分页 -->
  <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[10, 20, 30, 40]"
    layout=" sizes, prev, pager, next, jumper,total"
    :total="40"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

Pagination 分页组件的属性如下：

• background: 添加北京颜色，也就是上图蓝色背景色效果。
• layout: 分页工具条的布局，其具体值包含sizes, prev, pager, next, jumper, total 这些值
• total: 数据的总数量
• size-change ： pageSize 改变时会触发
• current-change ：currentPage 改变时会触发

2.3.3对话框组件

<script setup>
// Dialog对话框
const dialogTableVisible = ref(false)
</script>

<template>
  <!-- Dialog对话框 -->
   <el-button @click="dialogTableVisible = true">
    打开对话框
  </el-button>

  <el-dialog v-model="dialogTableVisible" title="Shipping address">
    <el-table :data="tableData">
      <el-table-column property="date" label="Date" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
  </el-dialog>
</template>

Dialog对话框组件使用的关键点，就是控制其显示与隐藏。 通过 v-model 给定的boolean值，来控制Dialog的显示与隐藏。

2.3.4表单组件

<script setup>
import { ref } from 'vue'
// Form表单
const formInline = ref({
  user: '',
  region: '',
  date: '',
})
const onSubmit = () => {
  console.log('提交!')
}
</script>

<template>
  <!-- Form 表单 -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
    </el-form-item>

    <el-form-item label="性别">
      <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>

    <el-form-item label="日期">
      <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable/>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>