vue3学习笔记

创建/运行项目

在IDEA新建一个vue项目

nodejs(运行环境)

vue的开发/编译工具(vite)是基于nodejs平台的, 所以第一步先安装nodejs,下载地址: Node.js, 安装LST(长期维护)版本即可.

 npm

安装完毕后命令行会增加一个包管理工具: npm, 包管理可以理解为通过他可以下载js插件, 后续我们开发用到的JS插件都通过他安装. 查看下版本:

C:\Users\qiye>npm -v
9.3.1

C:\Users\qiye>node -v
v18.14.0

vue3
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
See Configuration Reference.

因为npm下载插件的默认源是国外服务器, 为了加速改成国内的, 在命令行输入:

设置npm安装源

npm config set registry https://registry.npmmirror.com

比如安装"axios"(接口请求用的js插件, 后面会用到), 就可以执行:
安装axios
npm i axios -S

这里的-S的意思是保存"安装记录", 这样其他人使用你的项目的时候, 可以直接通过npm i安装所有你安装的包. 安装好的插件会存在于项目根下的"node_modules"文件夹.

package.json

"安装记录"保存在项目根目录下的"package.json"中, 其内容是一个JSON, 其中安装记录就保存在"dependencies"字段中.

准备工作到这里就差不多了, 接下来我们初始化项目.

变量和函数(data & methods)

本文是系列文章, 带你从 0 学习 vue3. 让你快速上手vue

vue 是一个 js 框架, 他用 js 封装了 DOM操作, 所以写 vue 不需要直接操作 DOM, 而只要做 2 件事情:
1建立数据变量, 把DOM 的"样式/属性/内容"等和"变量"进行绑定.
2操作数据变量, 绑定的DOM 样式/属性/内容等会自动根据数据更新.

代码编辑器
在写代码之前安装一下代码编辑器, vscode来自微软, 支持vue和ts的语法提示

引入vue.js

和其他js库一样, 我们可以通过"script"标签引入vue.

基础结构

下面代码是一个vue的最小项目, 不包含任何逻辑代码.

Vue.createApp是vue的初始化语法, 通过mount指定的元素, vue会检查元素内部的html元素中的vue模板语法, 这里"#app"的意思是id为app的元素. 下面我们分2步实现让页面显示"hi vue".