蜀山 22/9/25 vue1

web开发技术栈

vant代码示例

nutui 代码示例

项目需求展示

vue

vue–js的库 基于数据驱动

在vuejs中，数据驱动是指当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom；简单来说就是通过控制数据的变化来改变DOM，让视图（DOM）的内容随着数据的改变而改变

html 基于dom

vue的使用方法

渐进式框架：可以很简单的构建小项目，也可以去做大项目
1直接加载vue。js文件

创建vue对象，然后设置数据

2基于脚手架创建项目
工程化的管理方式 拆分模板

查看nodejs安装版本


node.js 解析独立运行的js代码
npm包管理器，软件管家，用于安装软件工具 全局变量

工具yarn，更好的安装软件工具
dnimg.cn/9920fa80d4f74fddaf63ef8edef17eff.png)

包管理器，一键安装
linux平台下，yum安装器
python平台下，pip安装器

cdn内容分发网络

vite

vite骨架作用
vue 基于数据驱动

命令行创建项目：基于vite构建的项目

vite是一个构建的工具

目录结构

导入组件
基于跟组件创建app

mount（‘#app’）挂在呢容

三个标签

真是顺序页面

新建文件

组件和dom相似

组件导入进来后，可以复用，用了两次这个组件

先导入位置

vant

vant支持多种组件注册方式，请根据实际业务需要进行选择

全局注册

使用vant
1.安装
现在文件夹

要指定目录，才能安装到下面这个目录

2.全局加载


分开写，执行链式加载

局部导入

yarn add unplugin-vue-components -D
修改配置：vite.config.ts

import Components from ‘unplugin-vue-components/vite’;
import { VantResolver } from ‘unplugin-vue-components/resolvers’;
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
]

以按钮为例子

开启两个终端，一个一直运行文件，一个不断更新内容

app。vue上下标注

vite.condfig.ts

引入组件 main.ts

fiist写内容