Vite App 杜老师

## Day15 Web前端实战：Vue工程化、ElementPlus --- ##### 目录 * Vue工程化 * ElementPlus ##### Web开发

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

### 1. Vue工程化 #### 小白眼中的前端开发

#### 工程化 * 模块化：项目划分若干模块，单独开发、维护，提高效率 * 组件化：将页面的各个组成部分封装为一个一个的组件，提高复用 * 规范化：提供标准统一的目录结构、编码规范、开发流程 * 自动化：项目的构建、开发、测试、打包、部署 * 工程化：(模块化、组件化、规范化、自动化)在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。(统一规范、提高复用、便于维护)

#### 1.1 环境准备 * 介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。 * create-vue提供了如下功能： * 统一的目录结构 * 本地调试 * 热部署 * 单元测试 * 集成打包上线 * 依赖环境NodeJS：Node.js®是一个免费、开源、跨平台的JavaScript运行时环境，它让开发人员能够创建服务器、Web应用、命令行工具和脚本。

* 安装NodeJS：安装在develop下，如D:\develop\nodejs * npm：Node Package Manager，是NodeJS的软件包管理器。

```bash node -v npm -v ``` #### 配置npm的全局安装路径、切换为淘宝镜像，加速下载 ```bash npm config set prefix "D:\develop\nodejs" npm config set registry https://registry.npmmirror.com ```

#### 1.2 Vue项目简介 #### Vue项目-创建 * 创建一个工程化的Vue项目，执行命令：npm create vue@3.3.4 * 提示：执行上述指令，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具 #### Vue项目-安装依赖 * 进入项目目录，执行命令安装当前项目的依赖：npm install * 注意：创建项目以及安装依赖的过程，都是需要联网的。 ```bash # 项目工作目录如G:\workspace\duSSM\vue npm create vue@3.3.4 # 输入项目名 vue-project1 cd vue-project1 npm install npm run dev ```

#### Vue项目-项目结构使用VS Code打开Vue项目。

```bash ``` #### Vue项目-启动

#### 小结 * Vue项目操作 * 创建：npm create vue@版本号 * 安装依赖：npm install * 启动：npm run dev

#### ③ Vue项目执行流程 ##### index.html ```html Vite App 杜老师

``` ##### src\main.js ```javascript import { createApp } from 'vue'; import App from './App.vue' //import './assets/main.css' createApp(App).mount('#app') ``` ##### src\App.vue ```vue ```

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

* 选项式API：可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。 * 组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。 * 当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用Vue，例如渐进增强的应用场景，推荐采用选项式API。 * 当你打算用Vue构建完整的单页应用，推荐采用组合式API+单文件组件。 ##### src\views\ApiDemo.vue ```vue ``` ##### src\App.vue ```vue ```

序号	姓名	头像	性别	职位	入职时间	更新时间
{{index + 1}}	{{user.name}}		男女其他	班主任讲师学工主管教研主管咨询师其他	{{user.entrydate}}	{{user.updatetime}}

* setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。 * ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。 * 注意：在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。 #### ⑤ 案例在Vue项目中基于组合式API完成用户列表数据渲染 * 要求在页面加载完毕之后，发送异步请求，加载数据，渲染表格。 * 项目中用到axios，就需要安装axios的依赖：```npm install axios``` ##### src\views\EmpList.vue ```vue ``` ##### src\App.vue ```vue ```

##### 小结在组合式API中有没有this ? 在组合式API中如何更新响应式数据内容 ?

### 2. ElementPlus #### 什么是ElementPlus * Element：是饿了么团队研发的，基于 Vue3，面向设计师和开发者的组件库。 * 组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。 * 官网：https://element-plus.org/zh-CN/#/zh-CN

##### 目录 * 快速入门 * 常见组件 * 案例 #### ① 快速入门 ##### Element Plus快速入门 * 准备工作： * 创建vue项目 * 参照官方文档，安装Element Plus组件库（在当前工程的目录下）：```npm install element-plus@2.4.4 --save``` * main.js中引入Element Plus组件库（参照官方文档） ```javascript //引入ElementPlus import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(ElementPlus).mount('#app') ``` * 制作组件：访问Element官方文档，复制组件代码，调整 ```bash # 项目工作目录如G:\workspace\duSSM\vue npm create vue@3.3.4 # 输入项目名 vue-project2 cd vue-project2 npm install npm install element-plus@2.4.4 --save npm run dev ```

##### index.html ```html Element Plus快速入门(杜老师)

``` ##### src\main.js ```javascript import { createApp } from 'vue' //引入ElementPlus import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' createApp(App).use(ElementPlus).mount('#app') ``` ##### src\App.vue ```vue ``` ##### src\views\ElementDemo.vue ```vue ```

#### 小结 ElementPlus的使用步骤 * 安装：npm install element-plus@2.4.4 –save * 引入：在main.js中引入Element Plus（参照官方文档） * 组件：访问官方文档中的组件，调整成我们需要的样子即可

#### ② 常见组件 * 表格组件 * 分页条组件 * 对话框组件 * 表单组件 #### 表格组件用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 ##### src\views\ElementDemo.vue 相应位置添加如下代码 ```vue

```

##### 小结

#### 分页条组件 * 当数据量过多时，使用分页操作分解数据。 * 默认Element Plus的组件是英文的，如果希望使用中文语言，可以做如下配置： ```javascript //引入中文语言 import zhCn from 'element-plus/es/locale/lang/zh-cn' createApp(App).use(ElementPlus, { locale: zhCn }).mount('#app') ``` ##### src\main.js 修改如下 ```javascript import { createApp } from 'vue'; //引入ElementPlus import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import zhCn from 'element-plus/es/locale/lang/zh-cn'; import App from './App.vue'; createApp(App).use(ElementPlus, { locale: zhCn }).mount('#app') ``` ##### src\views\ElementDemo.vue 相应位置添加如下代码 ```vue

```