Vue on 杨刚的个人网站

1、Vue

Fri, 19 Jan 2024 00:00:00 +0000

Vue
#

Vue读成view ，而不是V U E
Vue是个前端框架，是尤雨溪（中国人）的个人项目
这个框架主要关注点： View和 Model如何快速绑定

Vue的特点
#

非常简单，Easy，好学
遵循一种新的WEB架构模式： MVVM
它可以开发单页面的应用程序（每个单独的页面，就是一个独立的应用程序）
渐进式（从核心技术开发，一层一层的添加内容）与兼容性（允许兼容其他框架或其他技术）
视图组件化
虚拟 DOM（Virtual DOM）

MVVM架构
#

之前，我们学过MVC（Model - View - Controller），但是这套东西是后端框架提出来的，不适合前端
他们提出了自己的前端框架模式：MVVM（Model - View - ViewModel）
Model依旧是数据，View依旧是视图
ViewModel视图模型绑定对象（监听数据的变化，并实时做到与View进行同步）

2、API

Fri, 19 Jan 2024 00:00:00 +0000

全局配置
#

Vue.config 是一个对象，包含 Vue 的全局配置。

3、组件

Fri, 19 Jan 2024 00:00:00 +0000

组件
#

组件就是实现应用局部功能的代码和资源的集合

4、组件间通讯

Tue, 10 Dec 2024 00:00:00 +0000

父子组件
#

5、axios

Tue, 03 Dec 2024 00:00:00 +0000

Axios
#

Ajax要么就原生的JS写，要么就用Jquery的封装来写。要用封装，就必须要导入jquery.js。

6、路由

Mon, 03 Mar 2025 00:00:00 +0000

什么是路由
#

路由的本质就是一些key、value组成的映射关系，每一个key都会指向一个value，多个路由（route）需要通过一个路由器（router）进行管理。

7、插槽

Sat, 11 Nov 2023 00:00:00 +0000

插槽（slot）
#

插槽的作用
#

组件的插槽，为了让我们封装的组件更具有扩展性，例如导航栏封装为一个nav-bar组件，但是不同的使用，组件的样式都不一样
可以让使用者决定组件内部的一些内容展示什么（对组件进行扩展）

使用
#

8、VueCLI

Tue, 03 Dec 2024 00:00:00 +0000

什么是Vue CLI
#

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.
如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
- 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
- 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

VueCLI使用前提
#

NodeJs
#

可以直接在官方网站中下载安装.
网址: http://nodejs.cn/download/
默认情况下自动安装Node和NPM
Node环境要求8.9以上或者更高版本

cnpm镜像
#

由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
- npm install -g cnpm --registry=https://registry.npmmirror.com
这样就可以使用 cnpm 命令来安装模块了：
- cnpm install [name]

Webpack
#

全局安装：npm install webpack@3.6.0 -g

9、vuex

Mon, 03 Mar 2025 00:00:00 +0000

vuex是什么
#

概念：专门在vue中实现集中式状态管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读、写）也是一种组件间通信的方式，且适合于任意组件间通信。

10、常用插件

Sat, 11 Nov 2023 00:00:00 +0000

VsCode开发插件
#

Chinese (Simplified) Language Pack for Visual Studio Code：中文界面
auto rename tag
code runner：可以运行nodejs、python等代码
open in brower：在默认浏览器打开
live server：web服务器
vetur：写vue必备插件
Vue 2 Snippets：写vue必备插件
axios：axios补全插件
VueHelper vscode：vue，vue-router和vuex的代码提示
Path Intellisense：路径自动补全
Auto Close Tag：自动闭合标签
Beautify：格式化文件,保证正确的缩进
HTML CSS Support： CSS提示插件
JavaScript (ES6) code snippets：es6代码提示插件
VSCode Great Icons：给文件夹增加图标的插件

NProgerss
#

进度条插件，地址：https://github.com/rstacruz/nprogress

11、Vue3

Mon, 21 Jul 2025 00:00:00 +0000

Vue3
#

相比vue2的提升
#

性能提升
- 打包大小减少41%
- 初次渲染快55%，更新渲染快133%
- 内存减少43%
源码升级
- 使用Proxy代替defineProperty实现响应式
- 重写虚拟DOM的实现和Tree-Shaking
支持TypeScript
- 可以更好的支持TypeScript
新特性
- Composition API
- 新的内置组件

Vite创建Vue3工程
#

Vue3 不推荐使用 vue-cli 来创建（使用vue/cli，要确保版本大于4.5.0），而是使用 Vite。

12、pinia

Tue, 03 Jun 2025 00:00:00 +0000

pinia
#

pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据允许我们在各个组件中使用。

Vue on 杨刚的个人网站

1、Vue

Vue #

Vue的特点 #

MVVM架构 #

2、API

全局配置 #

3、组件

组件 #

4、组件间通讯

父子组件 #

5、axios

Axios #

6、路由

什么是路由 #

7、插槽

插槽（slot） #

插槽的作用 #

使用 #

8、VueCLI

什么是Vue CLI #

VueCLI使用前提 #

NodeJs #

cnpm镜像 #

Webpack #

9、vuex

vuex是什么 #

10、常用插件

VsCode开发插件 #

NProgerss #

11、Vue3

Vue3 #

相比vue2的提升 #

Vite创建Vue3工程 #

12、pinia

pinia #

Vue
#

Vue的特点
#

MVVM架构
#

全局配置
#

组件
#

父子组件
#

Axios
#

什么是路由
#

插槽（slot）
#

插槽的作用
#

使用
#

什么是Vue CLI
#

VueCLI使用前提
#

NodeJs
#

cnpm镜像
#

Webpack
#

vuex是什么
#

VsCode开发插件
#

NProgerss
#

Vue3
#

相比vue2的提升
#

Vite创建Vue3工程
#

pinia
#