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中引入，然后根据官方的方法来使用即可