更改按需配置

原配置环境

更改别名配置修改4处配置


import { resolve } from 'path'刘老师(2153136714)  11:38:44
resolve: {alias: [{ find: '@', replacement: resolve(__dirname, 'src') },{ find: '_c', replacement: resolve(__dirname, 'src/components') },{ find: '_v', replacement: resolve(__dirname, 'src/views') },]}

刘老师(2153136714)  11:48:30
tsconfig.json刘老师(2153136714)  11:48:31
{"compilerOptions": {...// add here"paths": {"@": ["./src"],"@/*": ["./src/*"] // 多加个这个}},
}

导入别名用法

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import { createStyleImportPlugin } from 'vite-plugin-style-import'
import { resolve } from 'path'export default defineConfig({plugins: [vue(),Components({resolvers: [VantResolver()],}),createStyleImportPlugin({resolves: [{libraryName: '@nutui/nutui',libraryNameChangeCase: 'pascalCase',resolveStyle: (name) => {return `@nutui/nutui/dist/packages/${name.toLowerCase()}/index.scss`},}]}),],css: {preprocessorOptions: {scss: {// 配置 nutui 全局 scss 变量additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`}}},resolve: {// 配置别名(方便)alias: [{ find: '@', replacement: resolve(__dirname, 'src') },{ find: '_c', replacement: resolve(__dirname, 'src/components') },{ find: '_v', replacement: resolve(__dirname, 'src/views') },]}
});

{"compilerOptions": {"target": "ESNext","useDefineForClassFields": true,"module": "ESNext","moduleResolution": "Node","strict": true,"jsx": "preserve","resolveJsonModule": true,"isolatedModules": true,"esModuleInterop": true,"lib": ["ESNext", "DOM"],"skipLibCheck": true,"noEmit": true,// add here"paths": {"@": ["./src"],"@/*": ["./src/*"] // 多加个这个}},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }]
}

数据插值

打印数字在控制台查看

展示html

计算属性

箭头函数普通函数

a链接

绑定事件

双向数据绑定

登陆页面

<van-form @submit="onSubmit"><van-cell-group inset><van-fieldv-model="username"name="用户名"label="用户名"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="password"type="password"name="密码"label="密码"placeholder="密码":rules="[{ required: true, message: '请填写密码' }]"/></van-cell-group><div style="margin: 16px;"><van-button round block type="primary" native-type="submit">提交</van-button></div>
</van-form>

需要导入两个部分

3.png)

import { showSuccessToast, showFailToast } from 'vant';import 'vant/es/toast/style';

衡山 22/11/27 vue4相关推荐

22.11.27补卡 HDU-2612 bfs
这题dfs没法写, 因为dfs没法处理最优解的情况分别记录每个人走每一个kfc的最短路径然后一个双重循环搜最小值就好了初始化记得初始化为最大值, 不然有可能影响最min取值 ps: 这题我用st ...
我们社会的普遍价值观 2012-01-10 22:31:27
http://www.douban.com/note/195011760/ 我们社会的普遍价值观 2012-01-10 22:31:27 总有这么一批人小时候,他们问你 "在哪儿上学啊?& ...
daily scrum 11.27
今日任务做了什么明日任务李嘉良 (18)写换皮肤功能研究相关技术开始着手编写代码王泓洋 (29)优化metro图标商讨设计图标修改图标王熹 (29)优化metro图标商讨设计图 ...
scrum 11.27
今天的任务: 明天的任务: 燃尽图和燃速: 转载于:https://www.cnblogs.com/coding-hundredOfYears/archive/2012/11/27/2791802.h ...
14届蓝桥杯青少组选拔赛C++_2022.11.27
14届蓝桥杯青少组选拔赛C++_2022.11.27 一.选择题 T1. 执行 cout << 5 / 3; 语句后,输出的结果是( B ). A.0 B.1 C.2 D.3 T2. ...
AMD发布22.11.1驱动，支持《使命召唤:战区2.0》
他来了他来了,带着迷人的脚步走来了! <使命召唤:战区2.0>正式上线了.有Steam周榜三连冠的<使命召唤19>在前,<战区2.0>可以说是备受瞩目,免费大逃杀, ...
AMD发布22.11.2驱动，支持《极品飞车：不羁》等游戏
12月又来新驱动!AMD发布肾上腺素版22.11.2显卡驱动,支持今日发布的<极品飞车:不羁>,第三人称生存恐怖游戏<木卫四协议>,以及即将在12月14日发布的<巫师 3 ...
2021/11/27大数据1+XJava答案
2021/11/27 步骤二 //已经提供Student类的属性,补充完成该类的有参(五个参数)及无参构造方法public Student(){}public Student(String name, ...
一起来看看AMD最新显卡驱动22.11.1！
AMD最新推出了显卡驱动22.11.1,可以支持新上线的使命召唤:战区2,并且还修复了一系列的问题,AMD忠实用户们期待了嘛~ 更新内容支持使命召唤®:战区 2.0 漫威蜘蛛侠:迈尔斯·莫拉莱斯™ ...

衡山 22/11/27 vue4

目录

更改按需配置

更改别名配置修改4处配置

数据插值

展示html

计算属性

箭头函数普通函数

a链接

绑定事件

双向数据绑定

登陆页面

衡山 22/11/27 vue4相关推荐

最新文章

热门文章

衡山 22/11/27 vue4

目录

更改按需配置

更改别名配置 修改4处配置

数据插值

展示html

计算属性

箭头函数 普通函数

a链接

绑定事件

双向数据绑定

登陆页面

衡山 22/11/27 vue4相关推荐

最新文章

热门文章

更改别名配置修改4处配置

箭头函数普通函数