初體驗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,
}