初体验vue-cli3.x

以下是使用vue-cli3.x的一些总结，后续后持续更新

1.查看官方文档

https://cli.vuejs.org/zh/guide/

2.安装

注：若要使用 Vue CLI 3，需将 Node 版本升级至 8.9 及以上。

npm install -g @vue/cli
//初始化项目
vue create xx //你的项目名称

注：之后的操作都在package.json(同目录)新建vue.config.js进行项目的配置

3.静态资源文件引入

解决build静态文件引入错误的问题

module.exports = {
    publicPath:'./'
}

4.添加全局less文件

在前端项目中，经常会用到相同的主题色。此时，我们需要存储这些变量，且将其全局引入。

安装less

npm install less-loader less --save-dev

安装style-resources-loader

npm install style-resources-loader --save-dev

//使用sass把less替换成less即可
function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, 'src/assets/css/base.less')//你的文件目录
            ]
        })
}
module.exports = {
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
       
    }

5.rem和lib-flexible

安装postcss-px2rem

npm install postcss-px2rem --save-dev

使用lib-flexible后配置px转换成rem

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            },
            postcss: {
                plugins: [require('postcss-px2rem')({
                    remUnit: 75
                })]
            }
        }
    }
}

6.使用雪碧图

安装webpack-spritesmith

npm install webpack-spritesmith --save-dev

module.exports = {
    configureWebpack:{
        plugins:[
            new SpritesmithPlugin({
                // 目标小图标
                src: {
                    cwd: path.resolve(__dirname,'./src/assets/sprite'),//小图标的目录
                    glob: '*.png'
                },
                // 输出雪碧图文件及样式文件
                target: {
                    image: path.resolve(__dirname, './src/assets/images/sprite.png'),//生成雪碧图的目录
                    css: [[path.resolve(__dirname, './src/assets/css/sprite.less'),css{format:'function_based_template'}]]//生成雪碧图对应的
                },
                customTemplates: {
                  'function_based_template': path.resolve(__dirname, './src/utils/my_handlebars_template.handlebars')//模板
                },
                // 样式文件中调用雪碧图地址写法
                apiOptions: {
                    cssImageRef: '../images/sprite.png'//对于雪碧图css对应的雪碧图的相对路径
                },
                spritesmithOptions: {
                    algorithm: 'binary-tree',
                    padding:10
                }
            })
        ]
    }
}

my_handlebars_template.handlebars的代码如下：

{{#spritesheet}}
[class^="icon-"],
[class*=" icon-"]{
    background-image: url({{{escaped_image}}});
    background-size:{{px.width}} {{px.height}};
}
{{/spritesheet}}
{{#sprites}}
.icon-{{name}}{
    background-position:{{offset_x}}px {{offset_y}}px;
    width:{{width}}px;
    height:{{height}}px;
}

{{/sprites}}

7.Compiler 模式变更为 Runtime 模式

在升级至 Vue CLI 3 之后，直接运行可能会出现如下报错：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

这是因为 3.x 版本默认使用的是运行时模式，需要对 main.js 文件进行修改：

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

8.禁止build后map文件生成

module.exports = {
     productionSourceMap:false,
}