利用vue-cli + vant搭建一个移动端开发模板 (2)

Vant没有在main.js里全局注册，而是使用动态引入的方式。根目录新建.babelrc

{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }

五、webpack配置

vue-cli3以后生成的项目，修改webpack都要在项目根目录新建一个vue.config.js来修改你的配置

module.exports = { lintOnSave: true, // 生产环境打包资源路径 publicPath: 'http://www.likecs.com/', outputDir: "dist", assetsDir: "static", // postcss-pxtorem配置 css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 37.5, // 换算的基数 propList: ['*'], }), ] } } }, // 代理 devServer: { // development server port 8000 // port: 8000, // // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11 // proxy: { // "/api": { // // target: "http://xx.xx.xx.xx:xxxx/", // changeOrigin: true, // pathRewrite: { // '^/api': 'http://www.likecs.com/' // } // } // } }, // 生产环境去掉sourceMap productionSourceMap: false, } 总结

这个框架只具备开发vue + vant的基本功能，总体上的目标算是达到了，后续也会迭代添加一些组件或者功能。整个过程中算是对自己架构能力进行一些锻炼。