Vue工程化 - 技术栈

一、Vue项目创建

先创建一个你放Vue工程用的文件夹

打开文件夹输入cmd

1.2.执行命令：npm create vue``@3.3.4（这里@后面指定你想要的版本即可）

Project name：------------------》项目名称，默认值：vue-project，可输入想要的项目名称。
Add TypeScript? ----------------》是否加入TypeScript组件？默认值：No。
Add JSX Support? --------------》是否加入JSX支持？默认值：No。
Add Vue Router...--------------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
Add Pinia ...----------------------》是否添加Pinia组件来进行状态管理？默认值：No。
Add Vitest ...---------------------》是否添加Vitest来进行单元测试？默认值：No。
Add an End-to-End ...-----------》是否添加端到端测试？默认值No。
Add ESLint for code quality? ---》是否添加ESLint来进行代码质量检查？默认值：No。

完成后，我们用VSCODE打开创建好的工程文件夹

2.安装依赖： npm install

3.启动：npm run dev

启动Vue工程后访问 http://localhost:5173/确定是否工程启动

项目结构

二、Vue开发流程

我们输入locahost:5173打开后所看到的是index.html默认首页 ，在index中有引入了main.js 是我们程序的入口文件 ，在入口文件中创建了一个应用实例接管了id为app的div元素，在入口文件创建应用实例时又传入了一个根组件App.vue。

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

这样提高了我们组件的复用性和可维护性。

其中scoped代表在style中定义的CSS样式仅仅针对于当前组件文件中的元素生效。

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

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

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

三、组合式API开发案例

首先我们现在想做一个组件能够实现如下图所示。

那我们先在views文件夹 下创建一个EmpList.vue 的根组件，

我们先在<template>和<style>标签中构建基本的框架。

知识准备：

v-model：

作用：在表单元素上使用，双向数据绑定 。可以方便的获取或设置表单项数据
语法：v-model="变量名"
这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。视图中的输入的数据变化，也会影响Vue的数据模型。

v-for:

**作用：**列表渲染，遍历容器的元素或者对象的属性

语法： <tr v-for="(item,index) in items" :key="item.id">{``{item}}</tr>

参数：

items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始；可以省略，省略index语法： v-for = "item in items"

key：

作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

html 复制代码

<script setup>
//引入ref
import { ref, onMounted } from 'vue'
import axios from 'axios'

//声明数据变量 userList, name, gender, job
const userList = ref([])
const name = ref('')
const gender = ref('')
const job = ref('')

//声明函数,基于axios查询数据
const search = () => {
  //发送请求
  axios.get(`https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}`).then(res => {
    //将查询到的数据赋值给userList
    userList.value = res.data.data
  })
}

//定义钩子函数 onMounted
onMounted(() => {
  //调用search函数
  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>
    <!-- 表头部分 -->
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>
    </thead>
    
    <!-- 表体部分 -->
    <tbody>
      <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-show="user.job == 1">班主任</span>
          <span v-show="user.job == 2">讲师</span>
          <span v-show="user.job != 1 && user.job != 2">其他</span>
        </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>
    </tbody>
  </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>

四、ElementPlus基本使用

我们按照基本流程创建好一个Vue的工程文件后，在目录中找到package.json右击在集成终端中打开。

随后安装ElementPlus的依赖(从官网里看) npm install element-plus@2.4.4 --save

配置好环境后，我们去官网看看快速开始教程。

简单解析一下这段话，先引入vue的创建应用实例方法createApp，随后导入Element Plus的组件 库，再导入Element Plus的样式文件 （确保UI组件有正确的样式显示），再导入根组件App.vue (这是应用的主要组件，通常包含应用的布局和结构)。最后创建一个应用实例app，调用应用实例的use 方法导入ElementPlus组件（简单来说，app.use() 就是将各种功能"安装"到 Vue 应用中的标准化方式，让第三方库或自定义功能能够集成到 Vue 应用中），最后将应用实例app挂载到'#app'上。

，

我们现在把这段代码放到，我们的main.js文件里

我们和官方文档有所不同的就是，用了链式编程，创建应用实例后立马添加组件立马挂载。

main.js

javascript 复制代码

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'


createApp(App).use(ElementPlus).mount('#app')

准备工作完成了，我们现在打开ElmentPlus官网的组件库，找到想用的组件，点击查看源代码，复制到自己的工程即可。

我们在views文件夹下创建一个ElementDemo.vue用于存放我们的快速入门组件。我们把App.vue就当成一个管理组件的布局，具体每个组建的实现在views文件夹里实现。

ElementDemo.vue

javascript 复制代码

<script setup>

</script>

<template>
  <div class="button-row">
    <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>
  </div>

  <div class="button-row">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>
</template>

<style scoped>
    .button-row {
      margin-bottom: 10px;
    }
</style>

完成好测试组件的实现，我们再到App.vue中去管理他

再script标签中导入ElementDemo.vue组件并命名为ElementDemo，再在template中放置这个组件。

App.vue

javascript 复制代码

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

<template>
  <ElementDemo />
</template>

<style scoped>

</style>

最后效果如图

五、ElementPlus常用组件

（一）表格组件

我们还是老样子去Element官网找打表格组件一栏，找到心仪的表格，复制到项目中

ElementDemo.vue

我们想要知道这些组件标签的属性有什么用，就自己去官网api上找对应的api文档

javascript 复制代码

<script setup>
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<template>
  <!-- 按钮 -->
  <div class="button-row">
    <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>
  </div>

  <div class="button-row">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>
  <!-- 表格 -->
  <div class="button-row">
    <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>
  </div>
</template>

<style scoped>
.button-row {
  margin-bottom: 10px;
}
</style>

效果如下

（二）分页条组件

我们还是到官网挑选心仪的组件

复制完后我们根据Api删除一些我们不需要的部分。最后结果如下

javascript 复制代码

<script setup>
    import { ref } from 'vue'
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const currentPage4 = ref(4);
const pageSize4 = ref(100);

const background = ref(false);

const total = ref(400);//总记录数

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};
</script>

<template>
  <!-- 按钮 -->
  <div class="button-row">
    <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>
  </div>

  <div class="button-row">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>
  <!-- 表格 -->
  <div class="button-row">
    <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>
  </div>
  <!-- 分页条 -->
  <div class="button-row">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.button-row {
  margin-bottom: 10px;
}
</style>