咸宁网网站wordpress百家号主题

Web前端实战

Vue工程化

Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org）

Vue项目工程化：在企业级的前端项目开发中，把前端开发所需求的工具、技术、流程、经验等进行规范、标准化。

模块化：项目划分若干模块，单独开发、维护、提高效率。

组件化：将页面的各个组成部分封装为一个一个的组件，提高复用。

规范化：提供标准统一的目录结构，编码规范、开发流程。

自动化：项目的构建、开发、测试、打包、部署

环境准备：

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。

create-vue提供的功能：统一的目录结构、本地调试、热部署、单元测试、集成打包上线

依赖环境：NodeJS

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

Vue项目简介

创建：

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

（提示：执行上述指令，将会安装并执行create-vue，他是Vue官方的项目脚手架工具）

进入项目目录，执行命令安装当前项目的依赖：npm install

（注意：创建项目以及安装依赖的过程，都是需要联网的。）

项目结构：

启动：执行命令：npm run dev ，就可以启动了

Vue项目开发流程

*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue的单文件组件会将一个组件的逻辑（JS），模板（HTML）和样式（CSS）封装在同一个文件里.vue

API分格

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

组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑，他提供了一种更灵活更可组合的方式来编写组件

​

<script setup>
//引入ref函数和onMounted函数
import { ref, onMounted } from 'vue'
//声明相应式数据
const count = ref(0);
​
//声明函数 - 在组合是Api中没有this
function add() {count.value++;
}
//钩子函数
onMounted(() => {console.log('vue mounted...')
})
</script>
<template><button @click="add">count is {{count}}</button>
</template>
<style scoped>
</style>

setup：是一个标识，告诉vue需要进行一些处理，让我们可以更简洁的使用组合式API

ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有指向内部值的属性value。

onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

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

案例

要求在页面加载完毕后，发送异步请求，加载数据，渲染表格

项目中用到axios，就需要安装axios的依赖：npm install axios

<script setup>
//引入ref函数
import { ref,onMounted } from 'vue';
import axios from 'axios';
//声明相应式数据
const name = ref('');
const gender = ref('');
const job = ref(1);
const userList = ref([]);
​
//声明函数
async function search() {const result = await axios.get('https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}').then(result =>{userList.value = result.data.data;})
}
​
//钩子函数
onMounted(() => {search();
})</script><template><div id="center">姓名: <input type="text" name="name" v-model="name">性别:<select name="gender" v-model="gender"><option value="1">男</option><option value="2">女</option></select>职位:<select name="job" v-model="job"><option value="1">班主任</option><option value="2">讲师</option><option value="3">其他</option></select><input class="btn" type="button" value="查询" @click="search"></div><table><tr><th>序号</th><th>姓名</th><th>头像</th><th>性别</th><th>职位</th><th>入职时间</th><th>更新时间</th></tr><!-- v-for 用于列表循环渲染元素 --><tr v-for="(user, index) in userList" :key="user.id"><td>{{index + 1}}</td><td>{{user.name}}</td><td> <img :src="user.image"> </td><td><span v-if="user.gender == 1">男</span><span v-else-if="user.gender == 2">女</span><span v-else>其他</span></td><td><span v-if="user.job == 1">班主任</span><span v-else-if="user.job == 2">讲师</span><span v-else-if="user.job == 3">学工主管</span><span v-else-if="user.job == 4">教研主管</span><span v-else-if="user.job == 5">咨询师</span><span v-else>其他</span></td><td>{{user.entrydate}}</td><td>{{user.updatetime}}</td></tr></table>
</template><style scoped>table,th,td {border: 1px solid #000;border-collapse: collapse;line-height: 50px;text-align: center;}#center,table {width: 60%;margin: auto;}#center {margin-bottom: 20px;}img {width: 50px;}input,select {width: 17%;padding: 10px;margin-right: 30px;border: 1px solid #ccc;border-radius: 4px;}.btn {background-color: #ccc;}
</style>