衡山 22/11/27 vue4

更改按需配置

原配置环境

更改别名配置 修改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';