提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

vue3学习笔记

Vue JS 项目 笔记 学习 插件 代码
2023-04-18 16:49:34 时间

创建/运行项目

在IDEA新建一个vue项目

nodejs(运行环境)

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

 npm

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

C:Usersqiye>npm -v
9.3.1

C:Usersqiye>node -v
v18.14.0

因为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.

<script src="https://unpkg.com/vue@3"></script>

基础结构

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3"></script>
  <title>开始vue3</title>
</head>

<body>
  <div id="app"></div>

  <script>
    Vue.createApp().mount('#app');
  </script>
</body>
</html>

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

相关文章