知识回归

使用网页三剑客：HTML5+CSS3（lass,sass）+JavaScript(TypeScript）-Vue+Vite/react+webpack

这套体系学会，我们就可以轻松的开发web网站。
前端技术它的作用：给客户展现
nodejs+TypeScript 把后端（后台）的事情全都做了。

开发一套系统，还需要和系统进行交互。
例如：qq登录，输入用户名和密码。点击登录按钮。它去后台系统中查询此用户名是否存在，去验证输入密码是否正确。
后端：java(SUN、Oracle）+企业级框架+亿级高并发架构+大数据+人工智能
企业级框架：SpringtBoot+SpringMVC+Spring+MybatisPlus
亿级高并发架构：nginx+redis+springjdbc+rabbitmq/rocketmq+es+docker+k8s
大数据+hadoop+spark+storm+flink+clickhouse
人工智能

开发环境

前端开发环境：

• nodejs（安装一路next）运行js、vue框架等支持；
• 开发前端代码：HbuilderX，Vscode；
  后端开发环境：
• idea（提示智能）、eclipse（衰落）

利用最前沿前端开发技术实现网站开发

Vue+Vite+pnpm构建项目

验证环境

• node -v nodejs运行环境
• npm -v nodejs自带的工具，安装其它工具
• 构建项目：npm、yarn、pnpm， npm install -g pnpm
• pnpm -v pnpm升级npm包管理工具

安装Vue脚手架+Vite（行业最新方式）

Vue+Vite的项目

• pnpm create vite 创建一个vue+vite构建的项目（官网提供不够简洁）
• pnpm create vite wz3 --template vue
• cd wz3 上面的创建工程命令，会在当前目录下创建wz3目录，这句话先要进入这个目录（必须）
• 下面的两句命令必须在自己项目的目录下运行，否则就乱套了。
  pnpm install，给当前项目安装依赖工具包，在wz3目录中创建目录：node_modules（js包）这个目录非常大几百兆
  pnpm run dev，上面命令执行完成，就会搭建一个最基础结构（脚手架）首页，启动nodejs服务，就可以看到这个页面。启动一个web服务（nodejs），启动好后，会自动展现一个网站：http://localhost:1573（端口可能变化）

创建的项目的目录结构

使用HBuilderX来管理vue项目

两种方式：

• 导入
• 直接打开工程目录（推荐）
  

开发要使用文件

• index.html
• App.vue
• main.js

这句话特别关键，vue规范，vue渲染你开发的页面代码后，将内容最终放入到div中。 div.innerhtml（“”） - App.vue - main.js

当访问浏览器：http://localhost:5173/，实际就访问node的服务，默认访问index.html，
index.html里面有一个div将来放加工后的html片段（网页，渲染），它还调用main.js
main.js利用vue的函数库，创建新的app对象，然后利用mount方法，挂载到div.app上。最终展现用户。

导入elementplus组件，注册组件

修改main.js

import { createApp } from 'vue'
// 从安装element-plus函数库获取函数:ElementPlus
import ElementPlus from 'element-plus'
// elementplus全局的样式表
import 'element-plus/dist/index.css'
// import './style.css' 默认全局，自己写，去掉
import App from './App.vue'


// createApp(App).use(ElementPlus).mount('#app')
const app = createApp(App) //利用函数createApp创建实例
app.use(ElementPlus)
app.mount('#app')

自定义vue组件

vue组件包括3部分
1）template HTML片段+Vue脚本，vue会自动和其它的组件内容合并。
插值表达式：${变量}，{{变量}}
2）script js脚本，es6最新语法，vue3.x最新语法setup
3）style，样式css，scoped参数，限定只渲染本组件

home.vue组件

NotFound.vue组件