Vue的第二周

原创已于 2023-01-30 03:09:28 修改 · 83 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-01-06 19:49:45 首次发布

文章详细介绍了前端开发中的组件化概念，包括父子组件的访问和slot的使用。接着讨论了模块化的重要性及ES6的模块语法。然后深入讲解了webpack的原理和配置，以及如何结合vue-loader处理Vue项目。此外，还阐述了VueCLI的用途和不同版本的差异。最后，文章探讨了前端路由的原理，特别是vue-router的配置和动态路由管理。

一组件化开发

1.1 父子组件的访问

（1）父组件访问子组件

$children: 拿所有子组件
$refs: 拿指定的子组件

（2）子组件访问父组件

$parent: 上一级父组件
$root: 根组件

1.2 slot的使用

（1）基本使用

插槽的基本使用
插槽的默认值 button
如果有多个值同时放入到组件进行替换时, 一起作为替换元素

（2）具名插槽

在多个插槽的情况下, 替换制定插槽的内容

（3）编译的作用域

父组件模板所有的东西都在父级作用域内编译, 子组件模板的所有东西会在子级作用域内编译

（4）作用域插槽

父组件替换插槽的标签, 但是内容由子组件来提供

二前端模块化

2.1 为什么要使用模块化

（1）简单些js代码带来的问题

（2）闭包引起代码不可复用

（3）自己实现了简单的模块化

（4）AMD/CMD/CommonJS

2.2 ES6中模块化的使用

（1）export

（2）import

三 webpack

3.1 什么是webpack

（1）webpack

是一个JS应用的静态模块打包工具

（2）安装webpack

3.2 webpack的起步

（1）webpack命令

（2）webpack配置

①webpack.config.js

②package.json

3.3webpack的loader

（1）css-loader/style-loader

（2）less-loader/less

（3）url-loader/file-loader

（4）babel-loader

3.4 webpack中配置vue

（1）vue-loader

3.5 webpack的plugin

（1）plugin是什么

plugin是插件的意思, 用户对某个现有的架构进行扩展
webpack中的插件就是对webpack现有功能的各种扩展, 比如打包优化, 文件压缩等

（2）loader和plugin区别

loader - 主要用户转换某些类型的模块, 它是一个转换器
plugin - 是插件, 是对webpack本身的扩展, 它是一个扩展器

（3）plugin的使用过程

步骤一: 通过npm安装需要使用的plugin (某些webpack已经内置的插件不需要安装)
步骤二: 在webpack.config.js中的plugins中配置插件

3.6 搭建本地服务器

webpack提供一个可选的本地开发服务器(基础node.js搭建), 内部使用express框架, 可以实现让浏览器自动刷新显示我们修改后的结果

它是一个单独的模块, 在webpack中使用需要先安装

npm install --save-dev webpack-dev-server

3.7 配置文件的分离

很多配置开发时需要, 发布时不需要,反之一样, 所以要做分离

四 Vue CLI

4.1 什么是CLI

（1）什么是CLI

CLI 是(Command-Line Interface) 命令行界面, 俗称脚手架
Vue CLI是官方发布的vue.js项目脚手架, 可以快速搭建vue开发环境以及webpack配置

（2）CLI依赖webpack node npm

（3）CLI2 CLI3

4.2 CLI初始化项目的过程

4.3 CLI2生产的目录结构的解析

4.4 runtime-complier 和 runtime-only的区别

4.5 Vue CLI3

（1）如何通过CLI3创建项目

（2）CLI3的目录结构

（3）配置文件

五 Vue-Router

5.1 什么是前端路由

（1）后端渲染/后端路由

早期的网站开发整个HTML页面是由服务器来渲染

服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示
一个页面有自己对应的网址, 也就是URL.
URL会发送到服务器,
服务器会通过正则对该URL进行匹配,并且最后交给一个Controller进行处理.
Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
这就完成了一个IO操作.
上面的操作, 就是后端路由

当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿
这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化
后端路由的缺点

一种情况是整个页面的模块由后端人员来编写和维护的
另一种情况是前端开发人员如果要开发页面,需要通过PHP和Java等语言来编写页面代码
而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情

（2）前后端分离

随着Ajax的出现, 有了前后端分离的开发模式
后端只提供API来返回数据, 前端通过Ajax获取数据,并且可以通过JavaScript将数据渲染到页面中
这样做最大的优点就是前后端责任的清晰, 后端专注于数据上,前端专注于交互和可视化上
当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可
目前很多的网站依然采用这种模式开发

（3）SPA/前端路由

其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
也就是前端来维护一套路由规则