vue-cli实战应用

声明

此篇博客只是记录博主在vscode编辑器下vue-cli项目中遇到的一些配置、坑、知识等等。主要基于webpack模板。如果有任何问题欢迎指出或评论。

关于vscode CPU占用过高

【前言】vscode异常卡顿，打开任务管理器CPU占用一直飙升，直到100%，还在想i3 8100也算不错的u了，怎么会这样？
【解决】这个问题也是在安装了淘宝镜像之后才知道，也就是cnpm，全局安装后和vscode冲突，导致CPU爆棚。

关于vscode 内存占用过高

【前言】8G内存办公，听歌都卡死。重启电脑之后发现vscode内存占用极高，最低在1400mb左右。
【解决】打开设置，查找git.enabled，关闭后重启vscode，发现内存占用稳定在300-500mb左右。

关于配置less

【NPM】

npm install less less-loader --save-dev

【配置】
打开build/webpack.base.conf.js，在module.rules中添加一段配置，如下

 {
 	test: /\.less$/,
 	loader: "style-loader!css-loader!less-loader"
 }

【使用】
在组件中的style标签使用，如下

<style scoped lang="less">
</style>

【拓展】less快速入门：http://lesscss.cn/

关于使用less全局配置

【前言】我们在vue组件中可能需要用到一些全局配置，这时候只配置less loader是不行的，直接引入less文件也没有效果，这时候我们需要用到以下这些东西。
【NPM】

npm install sass-resources-loader --save-dev

【配置】
打开build文件夹的utils.js，在exports.cssLoaders = function (options) {}中加上一下代码：

function lessResourceLoader() {
        var loaders = [
            cssLoader,
            'less-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/assets/styles/common.less'), //这个地方填写全局less文件路径
                    ]
                }
             }
        ];
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

上面记得更换路径，然后在return中改变less的值

less: lessResourceLoader()

【报错解决】
如果你在启动应用的时候发现报错，请检查less是否配置完成，并安装除了less、less-loader以外的其他依赖。

npm install stylus-loader css-loader style-loader --save-dev

关于使用font-awesome

【NPM】

npm install font-awesome --save //方法1
npm install vue-awesome --save //方法2

【使用】

import 'font-awesome/css/font-awesome.css' //方法1 在main中引入，然后根据官方的方法来使用即可