介绍脚手架的使用（理解工程化）
html 直接写 vue 代码，小时候玩积木 (练习了单个知识点的使用) 脚手架环境写 vue 代码，真正的建造高楼大厦
1.什么是脚手架
- 工地脚手架 --- 辅助造楼
- vue 脚手架 --- 辅助开发
2.Vue脚手架类型
npm 命令汇总
初始化
npm init 自动创建pacakge.json，记录项目相关信息
安装生产依赖 （项目开发完，打包后依旧需要的依赖包）
npm install 包名 --save
npm install 包名
npm i 包名 -S
安装开发依赖 （只有开发过程中才需要的依赖）
npm install 包名 --save-dev
简写 npm i 包名 -D
npm i sass -D
读取package.json中的依赖信息，并依次安装
npm install
简写
npm i
删除依赖
npm uninstall 包名
执行script脚本
npm run xxx
例如
npm run serve
随堂代码
自行下载 代码仓库地址
认识 Vue 工程化目录
-
node_modules 项目依赖包
-
public
- index.html 单页面应用的页面模板
-
src 核心代码区
- assets 静态资源目录（img、css）
- components 公共组件
- views 页面组件
- App.vue 根组件
- main.js 入口文件（初始化 vue 项目的文件）
-
.gitginore 让 git 忽略某些文件
-
package.json 依赖等信息的记录文件
-
vue.config.js 项目环境表现的配置
Vue3 单文件组件
-
基本使用流程
- 封装.vue 组件
- 引入
- 挂载（注册）
- 调用
-
SFC 语法定义 (Single File Component)
单文件组件
-
相应语言块（template、script、style）
- template 组件结构
- style 组件样式
- script 组件功能
-
预处理器
@vue/cli 环境会根据 script、style 标签的 lang 调用不同的预处理器解析对应语法
- style css 语法/less 语法/scss 语法
- script lang="ts"
- ts 语法预编译声明
<script lang="ts"> // use TypeScript </script>
-
scss 样式预编译语法声明
对 css 做了上层封装，升级，里面有一些 CSS 不能使用高级语法 开发者使用 scss 语法写样式更方便，但是最终会被编译为 CSS 给到浏览器去使用
<style lang="scss">
// 内部无法解析less语法 $primary-color: #333; body { color: $primary-color; } </style>
-
src 导入 【了解】
拆分.vue 单文件组件内部代码，让一个文件内部的代码不要过于庞大 根据代码量灵活处理
-
注释
高手写的代码会说话（命名规范） template、script、style 区域都支持代码注释 通过 crtl + / 快捷键直接执行注释 talk is cheap , show me the code
为 vscode 安装.vue 单文件的语法解析插件
- TypeScript Vue Plugin (Volar)
- Vue Language Features (Volar)
- Vue VSCode Snippets
组件迁移
目的：熟悉单文件组件及运行环境
- Divider.vue
- Select.vue
单文件组件 CSS 功能
1.组件作用域CSS
<style scoped> .title{ color: orange; } </style>
2.深度选择器
富文本 v-html , 带有标签跟样式的文本 富文本页面
.rich-cont :deep(p){
color: orange;
text-indent: 0 !important;
}
.rich-cont :deep(img){ width: 100%; }
3.全局选择器
:global(.title){ color: orange; }
4.CSS Modules
<style module="cssdemo"> .tit{ color: skyblue; } </style>
5.CSS中的v-bind()
<script setup>
import { ref } from 'vue';
const myColor = ref('red')
const handleColor = ()=>{
let color = myColor.value=='red'?'blue':'red' myColor.value = color
}
</script>
<style scoped>
/* v-bind动态控制样式 */
.bindStyle{ color:v-bind(myColor) }
</style>
vue-router4
理解 SPA 单页面应用程序 (Single Page Application)
整个项目所有交互都呈现在一个 html 中 单页面应用中所谓的页面切换，其本质是组件的切换 vue-router 路由可以让我们更高效的管理页面组件之间的关系 路由，按需引导用户访问对应的组件 路由器，按需引导用户网络
集成安装 vue-router
-
安装 npm i vue-router
-
配置 router/index.js
- 引入、配置、导出
-
注入 main.js
让 Vue 项目跟 VueRouter 两者产生关联
-
呈现
在 App.vue 中呈现
<router-view/> <RouterView/> -
切换
<router-link to="/">首页</router-link> <RouterLink to="/contact">联系你们</RouterLink>
路由规则的定义
routes 配置，约定路径与组件之间的对应关系
routes:[ //约定路由映射关系 (路径----组件)
{
path:'/',
component:Home
},
{
path:'/login',
component:Login
}
]
两种路由模式：
history 配置
-
hash 模式 createWebHashHistory
- 为了方便项目上线，采用 hash 更便捷
-
history 模式 createWebHistory
- history 模式在未来打包上线的时候，可能会导致页面 404 【经典面试题】
- http://127.0.0.1:5173/login 会被后端误认为是一个数据接口
- 需要后端配合，将前端路由进行独立声明配置
两个内置组件
- 负责呈现
- 负责跳转
