创建项目并安装依赖
pnpm create vite vant-01
cd vant-01
pnpm install
pnpm add unplugin-auto-import unplugin-vue-components -D
pnpm prettier -D
pnpm add postcss postcss-pxtorem postcss-preset-env amfe-flexible -D
vant按需引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
function _resolve(dir: string) {
return path.resolve(__dirname, dir)
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createStyleImportPlugin({
resolves: [VantResolve()],
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name: string) => {
// 必须使用es目录下的样式，否则自动引入样式文件的时候会缺失部分样式
return `../es/${name}/style/index`
},
},
],
}),
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
resolve: {
alias: {
'@': _resolve('src'),
},
},
})
配置prettier
.prettierrc
{
"printWidth": 80,
"semi": false,
"singleQuote": true,
"endOfLine": "lf",
"tabWidth": 2,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "avoid"
}
配置postcss
postcss.config.cjs
postcss-preset-env自动增加css前缀
postcss-pxtorem将px转为rem
module.exports = {
plugins: {
'postcss-preset-env': {},
'postcss-pxtorem': {
rootValue: 37.5, //换算基数
// rootValue({ file }) {
// // 如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为
// return file.indexOf('vant') !== -1 ? 37.5 : 75
// },
propList: ['*'],
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
selectorBlackList: ['.van'], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
unitPrecision: 5, //允许REM单位增长到的十进制数字,小数点后保留的位数。
minPixelValue: 1, //设置要替换的最小像素值
},
},
}
main.ts
// 省略代码...
import 'amfe-flexible'
// 省略代码...
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
/>
<title>Vite + Vue + TS</title>
</head>
<!-- 因为 iOS Safari 默认不会触发 :active 伪类，解决方法是在 body 标签上添加一个空的 ontouchstart 属性。具体说明详见：https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490 -->
<body ontouchstart="">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script>
// 禁止ios10+页面缩放: https://blog.csdn.net/qq_46003166/article/details/106851406
const disabledScale = () => {
var lastTouchEnd = 0
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault()
}
})
document.addEventListener(
'touchend',
function (event) {
var now = new Date().getTime()
if (now - lastTouchEnd <= 300) {
event.preventDefault()
}
lastTouchEnd = now
},
false
)
// 阻止双指放大
document.addEventListener('gesturestart', function (event) {
event.preventDefault()
})
}
disabledScale()
</script>
</body>
</html>
tsconfig.json
{
"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,
"importHelpers": true, // 不让同样的辅助函数重复的出现在多个文件中
"allowSyntheticDefaultImports": true, // 允许对不包含默认导出的模块使用默认导入。
"types": ["vite/client"], // "element-plus/global", "jest", "pinia-plugin-persist"
"baseUrl": ".", // 非相对模块的导入可以相对于baseUrl或通过下文会讲到的路径映射来进行解析
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*"],
"references": [{ "path": "./tsconfig.node.json" }]
}
