1.Vue工程化
1.1介绍
- 模块化：将js和css等，做成一个个可复用模块
- 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
- 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
- 自动化：项目的构建，测试，部署全部都是自动完成
1.2环境准备
1.2.1 NodeJS安装
1). 验证NodeJS的环境变量
NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v
![[图片]](https://i-blog.csdnimg.cn/direct/960527c555dc4b579e9998116f79aa9c.png)
2). 配置npm的全局安装路径
![[图片]](https://i-blog.csdnimg.cn/direct/f97d50e23adb443e8f752a8e14946648.png)
使用 管理员身份 运行命令行，在命令行中，执行如下指令：
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的软件包管理器。
![[图片]](https://i-blog.csdnimg.cn/direct/b383b7594fe348fdbcc3404ea7bc213f.png)
在开发前端项目的过程中，我们需要相关的依赖，就可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地了。
1.3 Vue项目创建
1.3.1项目创建
创建一个工程化的Vue项目，执行命令：npm create vue@3.3.4
![[图片]](https://i-blog.csdnimg.cn/direct/07609eb1128a4b19968f945cf4e34028.png)
项目创建完成以后，进入vue-project01 项目目录，执行命令安装当前项目的依赖：npm install
![[图片]](https://i-blog.csdnimg.cn/direct/182a53fcd8e84568a0c5a431520f337a.png)
1.3.2项目结构
1.3.3启动项目
-
方式一：命令行
启动项目，我们可以在命令行中执行命令：npm run dev，就可以启动Vue项目了。
![[图片]](https://i-blog.csdnimg.cn/direct/4060ac90e1e54bfd967bff7e826a78a5.png)
-
方式二：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将其打开。
![[图片]](https://i-blog.csdnimg.cn/direct/d8662cfe59244e108f7a781ec09fde87.png)
2). 参照官方文档，安装ElementPlus的组件库（在当前工程的目录下），执行如下命令：
npm install element-plus@2.4.4 --save
![[图片]](https://i-blog.csdnimg.cn/direct/99ee903a6a0649468248908e3f4af611.png)
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的官方文档，查看对应的组件源代码。
![[图片]](https://i-blog.csdnimg.cn/direct/02463ff5f3474a64a7bb4aa5c98377fa.png)
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-paginationv-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>
新特性)
