Vue 工程化
什么是 Vue
Vue 是一款用于构建用户界面的渐进式的 JavaScript 框架。
前端工程化
在企业级的前端项目开发中，把前端开发所需的工具，技术，流程，经验等进行规范化，标准化。
环境准备
介绍：create - vue 是 Vue 官方提供的最新的脚手架工具，用于快速生成一个工程化的 Vue 项目。
create - vue 提供了如下功能：
-> 统一的目录结构
-> 本地测试
-> 热部署
-> 单元测试
-> 集成打包上线
依赖环境：NodeJS
接下来我们就要安装 NodeJS。
NodeJs 是一个免费，开源，跨平台的 javaScript 运行时的环境，就像我们学习 java 之前要先安装 jdk，要得有 java 的运行环境。
这个 NodeJS 安装完成后，会自动配置好环境变量，我们可以通过 node -v 来验证
安装完 NodeJs 时，会自动安装 npm（Node Package Manager）是 NodeJS 的软件包管理器
然后我们要配置 npm 的全局安装路径，我们必须以管理员身份运行 cmd
npm config set prefix "D:\develop\NodeJS"注意，这里的目录就是你的安装目录
最后我们要配置淘宝镜像，加速我们后续的下载操作
npm config set registry https://registry.npmmirror.comVue 项目简介
创建
创建一个工程化的 Vue 项目，执行命令：npm create vue@3.3.4 (这里如果不指定版本就会自动安装最新版本)
安装依赖
然后我们要进入到我们刚才创建的 vue-project1 的目录下，执行 npm install 命令来安装依赖，注意这个过程需要联网
我们用 vscode 打开刚才创建的 Vue 文件夹，可以看到里面的文件
启动
方法一：在 cmd 中输入 npm run dev
方法二：直接在 vscode 中启动
看到以下页面就代表启动成功了
开发流程
我们通过打开这个网页的源代码可以发现，这个 html 页面其实对应的就是我们文件夹中的 index.html 这个 html 文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>
可以看见这里面的 src 引用的是 main.js，我们称其为 入口文件, 这个 createApp 我们叫做应用实例，它接管的区域就是 'app'。
import { createApp } from 'vue'
import App from './App.vue'import './assets/main.css'createApp(App).mount('#app')
通过这个 import App from 可以看到相关的数据都是写在 App.vue 这个文件当中，我们称其为 根组件
所以最后我们在浏览器页面中所呈现出来的数据，都是在这个 App.vue 根组件中定义的。
<!-- 定义JS，控制模板部分的数据和行为（JS） -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script><!-- 模板部分，控制的是页面的结构（HTML） -->
<template><header><img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /></div></header><main><TheWelcome /></main>
</template><!-- 当前组件的 CSS 样式 -->
<style scoped>
header {line-height: 1.5;
}.logo {display: block;margin: 0 auto 2rem;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}
}
</style>
API 风格
Vue 的组件有两种不同的风格：选项式 API 和 组合式 API
选项式 API：可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
组合式 API：是 vue3 提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活，更可组合的方式来编写组件。
示例：我们先写一个 Demp.vue
<script setup>
import { ref ,onMounted} from 'vue'//声明响应式数据
const count = ref(0)//声明函数 - 在组合式 API 中没有 this
function increment() {count.value++
}// 钩子函数
onMounted(() => {console.log('Vue mounted')
})
</script><template><button @click="increment">count: {{ count }}</button>
</template><style scoped></style>setup：是一个标识，告诉 Vue 需要进行一些处理，让我们可以更简洁的使用组合式 API。
ref()：接收一个内部值，返回一个响应式的 ref 对象，此对象只有一个指向内部值的属性 value
onMounted()：在组合式 API 中的钩子方法，注册一个回调函数，在组件挂载完成后执行
注意：在 Vue 中的组合式 API 使用时，是没有 this 对象的，this 对象是 undefined。
然后将这个 Demo 导到 App 里面
<!-- 定义JS，控制模板部分的数据和行为（JS） -->
<script setup>
import ApiDemo from './views/ApiDemo.vue'
</script><!-- 模板部分，控制的是页面的结构（HTML） -->
<template><ApiDemo></ApiDemo>
</template><!-- 当前组件的 CSS 样式 -->
<style scoped></style>
案例
要求在页面加载完毕之后，发送异步请求，加载数据，渲染表格
<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios'
// 声明响应式数据
const name = ref('');
const gender = ref('');
const job = ref('');
const userList = ref([]);// 声明函数 - 箭头函数
const search = async () => { // 基于 axios 发送异步请求，请求服务器端加载数据const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}`)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>注意我们这里如果要用 axios，我们需要在目录下执行安装 axios 的命令
npm install axios