初体验vuecli3x

以下是使用 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,}