更改按需配置
原配置环境
更改别名配置 修改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-field
v-model="username"
name="用户名"
label="用户名"
placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<van-field
v-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';