1. Primero inicialice un proyecto cli:
https://blog.csdn.net/weixin_39854011/article/details/109364695
2. npm i vant
3. Importe componentes automáticamente a pedido: npm i babel-plugin-import -D
en babel Nuevo configuración en .config.js:
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import {
Button } from 'vant';
//转换为:
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
4. Estilo de inicialización
npm i normalize.css
5. El estilo en Vant usa px como la unidad por defecto. Si necesita usar la unidad rem, se recomiendan las siguientes dos herramientas:
postcss-pxtorem es un complemento de postcss, usado para convertir la unidad a rem
lib-flexible se utiliza para establecer el valor de referencia remota
$ npm install postcss-pxtorem --save-dev
$ npm i -S amfe-flexible
Introducir amfe-flexible en main.js
$ import 'amfe-flexible'
$ import 'amfe-flexible/index.js'
Configurar en vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
// 把px单位换算成rem单位
rootValue: 37.5, // vant官方使用的是37.5
selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
propList: ['*']
})
]
}
}
}
}
o
"postcss-pxtorem": {
"rootValue": 75,
"propList": ['*','!font','!font-size']
}
En este punto en vue.config.js
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
lintOnSave: "error",
assetsDir: "staic",
devServer: {
},
css: {
// 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
extract: true,
// 开启cssSourceMap
sourceMap: false,
// css预设器配置项
loaderOptions: {
postcss: {
plugins: [
require("postcss-pxtorem")({
// 把px单位换算成rem单位
rootValue: 37.5, // vant官方使用的是37.5
selectorBlackList: ["vant", "mu"], // 忽略转换正则匹配项
propList: ["*"]
})
]
}
},
// 启用CSS modules for all css / pre-processor files.
modules: false,
},
chainWebpack: config => {
// 移除 prefetch 插件
// config.plugins.delete("prefetch");
// eslint自动修复
config.module
.rule("eslint")
.use("eslint-loader")
.loader("eslint-loader")
.options({
fix: true
});
// 别名
config.resolve.alias
.set("@", resolve("src"))
.set("assets", resolve("src/assets"))
.set("common", resolve("src/common"))
.set("components", resolve("src/components"));
}
};
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "amfe-flexible/index.js";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
A continuación podemos desarrollar: