vue.js学习

开发工具

VSCode
插件：
Live Server：浏览器实时预览

开发环境

node.js安装与配置

安装

官网：https://nodejs.org/en
安装过程中使用默认值
安装完成后，打开git-bash命令行工具（也可以用cmd，需要管理员权限），查看Node.js版本信息，测试nodejs是否安装成功
cmd下输入：node -v，查看是否能够正常打印出版本号
cmd下输入：npm -v，查看是否能够正常打印出版本号

注：安装node之后会自带npm

步骤参考：https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
https://blog.csdn.net/lvoelife/article/details/129255679

配置node.js

在nodejs安装路径下，新建node_global和node_cache两个文件夹

设置缓存文件夹

npm config set cache "E:\NodeJs\node_cache"

设置通过npm安装的包的存放路径，这里将global文件重新映射，需要在系统设置中新建系统变量

npm config set prefix "E:\NodeJs\node_global"

配置环境变量：
右键计算机 -> 属性 -> 高级系统设置 -> 环境变量 -> 找到系统变量栏中的 path -> 双击 -> 新建 -> 添加刚刚复制的路径 -> 再一路点击确定，让设置生效。

注意：设置成功后，之后用命令npm install XXX -g（全局安装），安装以后模块就在E:\NodeJs\node_global里

安装淘宝镜像cnpm

管理员身份打开cmd，使用以下命令安装cnpm 淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

检查是否安装成功，出现下图所示版本即为成功，后续用npm安装还是使用cnpm安装都可以

cnpm -v

Vue的安装

使用命令安装Vue

安装命令：

npm install vue -g

当命令执行完，就可以在之前的配置的目录下面找到安装的Vue文件
cmd输入vue命令可以验证是否安装完成

安装vue命令行工具(脚手架)：vue-cli

安装命令：

使用这个命令安装的是低于vue3.x版本的命令行工具
npm install vue-cli -g
使用这个命令安装的是最新版本的命令行工具，版本高于3.0
npm install @vue/cli -g
安装指定版本的命令行工具（x.x.x为版本号）
npm install @vue/cli@x.x.x -g
由于vue-cli 3.x以上版本无法使用init指令，如果想使用init指令初始化项目，需要安装另外安装
npm install -g @vue/cli-init

卸载命令：

卸载低于vue 3.x版本的命令
npm uninstall vue-cli -g
卸载vue3.x以上版本的命令
npm uninstall @vue/cli -g

Vue命令行工具向下兼容，用最新的就可以了。
参考：https://blog.csdn.net/weixin_45583303/article/details/111354653

Vue简介

教程：https://cn.vuejs.org/tutorial/#step-3
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
Vue 的单文件组件 (Single-File Component，缩写为 SFC),SFC 是一种可复用的代码组织形式，会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

核心功能

声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。
响应式状态：能在改变时触发更新的状态，在 Vue 中，响应式状态被保存在组件中。可以使用 data 组件选项来声明响应式状态，该选项应该是一个返回对象的函数

API 风格

选项式 API (Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
选项式 API对初学者而言更为友好

双花括号法

<h1>{{ message }}</h1>

在双花括号中的内容并不只限于标识符或路径,还可以使用任何有效的 JavaScript 表达式。

组合式 API (Composition API)

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。
组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题,形式更加自由。