做网站是经典网站设计作品
重点是vue3的学习
文章目录
- 前言
- 一、vue是什么？
- 二、使用步骤
- 1.下载node.js
- 2.常用命令及创建vue工程
- 3.初始文件
- 4.一个简单的效果
- 1.组件包里面的一个组件
- 2.根组件
- 总结
前言
- 下载node.js，node常用命令，初始化工程。学了像ssm、redis等后端技术，需要对前端进行扩展，说白了，你学Java，基本上是全干工程师。收集各方面资料，形成自己的理解，仅供参考。
一、vue是什么？
- 1.vue是一种前端的用于事件的渐进式框架，用于快速构建用户界面UI和单面应用程序SPA。
- 2.前端主要四要素：
逻辑： if、for
事件：DOM、BOM操作
视图：HTML、CSS
通信：ajax、axios - 3.常见前端框架区别
| 工具/框架 | 类型 | 数据绑定 | 学习曲线 | 适用场景 |
|---|---|---|---|---|
| jQuery | DOM 操作库 | 无 | 低 | 传统网站、简单交互 |
| Bootstrap | CSS/UI 框架 | 无 | 低 | 快速搭建响应式页面 |
| React | UI 框架 | 单向 | 中 | 复杂 SPA、高性能需求 |
| Vue | 渐进式框架 | 双向/单向 | 低-中 | 灵活项目、快速开发 |
| Angular | 全功能框架 | 双向 | 高 | 大型企业应用、强类型需求 |
- 4.为什么叫渐进式？
允许开发者根据项目需求逐步采用其功能，而非强制要求一次性全盘接受整套框架，可以像JQuery一样局部使用。 - 5.学了有什么用？
快速构建动态网站，需要使用事件操作与后端进行交互，与用户交互，快速响应式开发。
二、使用步骤
1.下载node.js
- 直接搜索node.js进行下载即可，进入官网下载页面后，选择左边的稳定版。
- 查看是否安装。打开cmd，输入node，弹出版本信息。
- vue和vite环境都依赖于node环境。所以我们要下载。
2.常用命令及创建vue工程
- 在需要进行vue工程的文件夹里打开cmd，如果权限不够需要进行声明权限。
1.查看版本信息：
node
2.创建vue工程：
npm create vue@latest
根据需求选择功能。
3.进入后需要加载依赖，类似于java的maven导入坐标并加载：
npm i
4.启动前端工程：
因为设置了通过dev启动，以vite的方式进行启动的，通过在调试下面的dev进行启动。
npm run dev
5.停止服务器：
在终端中使用快捷键：ctrl+c即可停止服务器。
3.初始文件
- public里面的favicon.ico是页签图标。
- index.html它只是一个挂载容器，相当于把启动挂载到入口文件里面去，它是入口文件。
- App.vue是一个根组件，类似于springboot的主配置类。
- components是组件文件夹。
index.html:
<!DOCTYPE html>
<html lang=""><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.ts"></script></body>
</html>main.ts就相当于springboot的启动类。
main.ts:
// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'
// 启动
createApp(App).mount('#app')
一个简单的App.vue示例：
<template><!-- 写html结构 --><div class="app"><h1>你好啊！</h1></div></template><script lang="ts">
// 写js或ts 推荐ts
export default {name:'App' // 组件名
}
</script><style>
/* 写样式 */
.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>
4.一个简单的效果
注意这里是vue2语法，同样适用于vue3中。
1.组件包里面的一个组件
- template里面写HTML：button表示绑定了一个事件，表示点击触发函数。
- script里面写js或ts：定义函数，data 函数返回一个对象，包含组件的响应式数据，也就是返回给template中，在template中进行引用。
- 这是vue2的写法，叫做OptionsAPI，选项式的设计风格，但我站在后端的角度来思考，我觉得这一点都不适应，感觉很别扭，就像我们设计类的时候，有各自的属性与方法，它们是绑定在一起的，而这样分散的设计我个人觉得不满足高内聚，所以vue3优化了，适用了CompositonAPI，通俗的讲可以一坨一坨的写，就像类一样。
- style里面写样式：里面是一些css选择器的定义。
<template><!-- 写html结构 --><div class="person"><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts">
// 写js或ts 推荐ts
export default {name:'Person', // 组件名data() {return {name:'张三',age:18,tel:'13888888888'} },methods:{changeName(){this.name = 'zhang-san'},changeAge(){this.age += 1},showTel(){alert(this.tel)}}
}
</script><style scoped>
/* 写样式 scoped表示本文件中写的样式只作用于本文件*/.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}.button {margin: 0 5px;}
</style>
OptionsAPI:
CompositionAPI:
2.根组件
<template><!-- 写html结构 --><div class="app"><h1>你好啊！</h1><Person/></div></template><script lang="ts">
// 1.导入组件
import Person from './components/Person.vue'
// 写js或ts 推荐ts
export default {name:'App', // 组件名components:{Person} // 2.注册组件
}
</script><style>
/* 写样式 */
.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>
总结
- 简单的入了个门，转换了思维模式，既然要做后端，既然要做项目，前端也应该去学习。
学习了node.js是vue的依赖环境，常用的node命令来启动vue工程，学习了vue的基本结构，通过一个简单的例子实现了前端工程，明白了OptionsAPI与Composition的区别。