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