蜀山 22/10/8 vue2

按需加载vant

脚手架 提供了一个框架，vite=》 方便维护
vite对标 的vue的webpack

vue的使用方法—适用于单文件

创建项目

选择vue

选择typescript


需要先把依赖安装一下

然后运行yarn dev 进入下面这个页面

基于移动端的两个ui框架

按需加载 vantui

如果我们要使用一个第三方库，先安装

进入hbuildx软件，先进行安装插件

点击方框，可以进行终端运行
要进入到总文件目录的运行终端，否则就安装文件到了别的目录了

安装模块

在这个文件里面我们使用ts语言

import vue from ‘@vitejs/plugin-vue’;
import Components from ‘unplugin-vue-components/vite’;
import { VantResolver } from ‘unplugin-vue-components/resolvers’;

export default {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
};

完成安装和配置后，实现自动导入，他会帮我们自动导入组件

组件的目录：src–》compones（存放组件的目录）–》创建文件first。app

根的入口文件，是app。vue文件

如果要用某个组件，请把组件先引入进来

现在app。vue里面引入first。app的使用

按钮有这些

总体概括：

按需加载nutui

同样也是在这个运行终端

按需加载样式的加载

加载NutUI

1. 安装nutui
   yarn add @nutui/nutui

2. 安装按需加载插件
   yarn add consola
   yarn add vite-plugin-style-import

3. 配置按需加载：vite.config.ts
   import vue from ‘@vitejs/plugin-vue’;
   import Components from ‘unplugin-vue-components/vite’;
   import { VantResolver } from ‘unplugin-vue-components/resolvers’;
   // add here
   import { createStyleImportPlugin } from ‘vite-plugin-style-import’

export default {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
// add here
createStyleImportPlugin({
resolves: [{
libraryName: ‘@nutui/nutui’,
libraryNameChangeCase: ‘pascalCase’,
resolveStyle: (name) => {
return @nutui/nutui/dist/packages/${name.toLowerCase()}/index.scss
},
}]
}),
],
// add here
css: {
preprocessorOptions: {
scss: {
// 配置 nutui 全局 scss 变量
additionalData: @import "@nutui/nutui/dist/styles/variables.scss";
}
}
}
};

4. 使用
   vanui -> 自动按需加载组件和样式、
   nutui -> 自动按需加载样式

nutui使用button需要自己导入

main.js 全局加载Button
import {Button} from ‘@nutui/nutui’

const app = createApp(App)
// 加载Button组件=> nut-button
app.use(Button)
app.mount(‘#app’)

First.Vue
Nut

后期都是做链式加载，所以会把变量单独拿出来

顺序有着千差万别！！！ 要先写样式，再写挂载app。否则样式加载不出来

加载button组件=》nut -button

只有nutui需要全局导入，vantui是自动导入

三方ui文档的使用

使用步骤:
1.引入
2.在vue文件里面使用，一般分为两部分

全局导入

效果图


让按钮可以左右滑动起来

vue数据插值

先把内容引入进来

然后运行yarn dev
会出现下面的界面

点击上面的网站 会在网页出现运行的界面

然后数据传值

数据的传输和展示是在两个板块
template写展示内容，但是数据在script上

响应式按钮 数据

什么时候需要响应式：
需要交互而且把数据反映到页面上

数据，字符串，可以直接定义ref，生成按钮
如果是对象，不可直接使用ref，需要使用reactive

以下举例

[]是类似于容器的东西，python中解释为列表
key：1 类似于字典
数值的传送有两种存在形式：
列表
键值对

数据的获取

如何在页面上显示数据 方括号或者点的形式都可以显示
点的形式不需要引号

定义一段文本

使用js

计算属性 箭头函数

计算属性 响应式求值

函数的数值：执行一次，数值才会变化一次，数据会根据调用自动变化

计算属性：不会自动变换，即使你调用很多次，数据也不会跟着变化
在页面现实的效果

click 事件
@监听

左边可以点击变换，右边不可以

会同步更新到页面上

点击看日志

在网页端，查看控制台日志元素。

指令

v-on监听一个事件
使用过程

弹窗提示

html里面的弹窗元素 alert

需要先进行导入
在script模块

全局加载 ------------全局导入并加载样式，无后顾之忧

按需加载，需要什么组件，就加载什么----------手动引入函数组件的样式

导入以后，点击点我呀组件，会弹出成功文案的弹窗

v-model 双向数据绑定 一方用于接收 一方用于确认

作业练习：写一个登陆页面
效果图如下

当不使用第三方ui的情况

有弹窗提示 登陆成功