一、常用工具
1、移动端组件库
mint-ui 官网:https://mint-ui.github.io/#!/zh-cn
2、第三方插件
- postcss 浏览器的适配插件
postcss官网
npm安装包 - axios 连接口的插件
axios官网 - better-scroll
better-scroll官网
一般会用到pullup和pulldown 这两个插件,分别为上拉加载更多和下拉刷新
二、常用webpack配置
使用vue cli3需要手动创建 vue.config.js 文件来配置webpack
1、移动端适配
const pxtovw = require('postcss-px-to-viewport')
module.exports = {
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
plugins: [
new pxtovw({
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/node_moudles/]
})
]
}
}
},
}
2、给文件路径配置别名
const path=require('path')
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set("assets", path.resolve(__dirname,'./src/assets/'))
.set("views", path.resolve(__dirname,'./src/views/'))
}
}
3、配置代理
module.exports={
//配置代理
devServer:{
proxy:{
"/api":{
target:"http://localhost:3005/",
changeOrigin:true,
pathRewrite:{
//重写路径
// '^/api':''
}
}
}
}
}
4、jsonserver设置
在根文件里创建一个mock的文件夹,把所需的json文件导入,毕节创建一个js文件配置映射
然后启动jsonserver服务 json-server ./mock/mock.js -p 9000 -r ./mock/routes.json -w