vue结合webpack创建项目
1，cmd中vue init webpack demo
2,装上需要的插件和配置
配置1:七牛云 npm install qiniu-webpack-plugin --save-dev //编译后自动资源文件自动上传到七牛云服务器
webpack.prod.conf.js中配置:
var QiniuPlugin = require('qiniu-webpack-plugin');
publicPath: //七牛云cdn域名
new QiniuPlugin({
ACCESS_KEY: 'azk83bZK6HuTETH__HQfUhq7Q42OMgDRhawIVK1Pzb',
SECRET_KEY: 'JHlqitpMnaN73ey7KqtzL5TNjUiLX7cKdGlqOHFXzm’,
bucket: 'webfile',
path: ''
}),
配置2:babel-plugin-syntax-dynamic-import //懒加载组件和路由
npm install babel-plugin-syntax-dynamic-import
.babelrc 文件中plugins 参数加上syntax-dynamic-import
配置3:autoprefixer // 兼容浏览器前缀
.postcssrc.js
"autoprefixer": {
"browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8']
},
配置4:postcss-px2rem //px转rem
npm install postcss-px2rem
.postcssrc.js
'postcss-px2rem':{'remUnit':75}
配置5: less
npm install less less-loader --save
引入外部less的时候使用style lang=less src=‘index.less’
配置6:npm install imagemin-webpack-plugin //图片压缩
var ImageminPlugin = require('imagemin-webpack-plugin').default
module.exports = {
plugins: [
// Make sure that the plugin is after any plugins that add images
new ImageminPlugin({
disable: process.env.NODE_ENV !== 'production',
pngquant: {
quality: '95-100'
}
})
]
}