1、初始化vue项目
//下载脚手架
npm install -g vue-cli
//初始化webpack 项目
vue init webpack my-project
cd my-project
yarn
yarn dev
//新项目就能跑起来了
//查看vue 版本号
vue -V
2、px转rem
npm i lib-flexible --save //下载
npm install px2rem-loader //下载
import 'lib-flexible/flexible' //在main.js引入
//配置px2rem-loader
//在build文件中找到util.js，将px2rem-loader添加到cssLoaders中,如：
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
同时，在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
重启之后就可以生效了。
3、配置sass(新版的vue-cli初始化的项目只需要下载不需要配置)
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
//配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置
// 如果你是.sass文件要设置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
使用
<style lang="scss">
4、配置stylus css预加载编译器
下载stylus插件 yarn add stylus stylus-loader --save -dev
使用的时候 如果是在.vue文件里面写的话就是这样
<style scoped lang="stylus">
.home
background #f00
width 100px
height 100px
</style>
5、路由按需加载
1、路由修改
routes: [
{
path: '/',
name: 'Home',
// component: Home,
component: () => import(/* webpackChunkName: "Home" */ '@/pages/Home/')
},
]
2、在webpack.base.conf.js文件中配置chunkFileName
output: {
path: config.build.assetsRoot,
filename: '[name].js',
chunkFilename: '[name].js', //只需添加这一行
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
5、打包之后去掉map文件
WX20190327-150203.png
