安裝

項(xiàng)目根目錄下打開終端或命令行工具礼华，運(yùn)行以下命令來安裝相關(guān)依賴包：

npm install less-loader less --save-dev

這會(huì)將 Less 和 Less loader 作為開發(fā)依賴項(xiàng)安裝到你的項(xiàng)目中馁害。
如果沒有其他需求，安裝好就已經(jīng)可以在項(xiàng)目中直接使用了。

在項(xiàng)目中使用

1. Vue文件中使用

找到 src/App.vue 文件中 <style> 代碼塊懊直，添加 lang="less" 和 scoped:

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

lang="less" 表示該<style>標(biāo)簽中的代碼將使用 Less 語法編寫。
scoped 是一個(gè)特殊的屬性火鼻，它告訴Vue要對(duì)該組件的樣式進(jìn)行作用域限制室囊。當(dāng)你使用scoped屬性時(shí)，組件中的樣式只會(huì)應(yīng)用到該組件內(nèi)部凝危，不會(huì)影響其他組件波俄。

2. 引入獨(dú)立less樣式文件

在 src/assets/styles 文件夾下新建一個(gè)，名為index.less的通用樣式文件,并添加自己習(xí)慣的通用樣式蛾默，可參考以下內(nèi)容：

body, html {
  min-height: 100%;
  font-size: 16px;
  color: #333;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body, ul, div, img, h5, h4, h3, h2, h1, p, span, table, figure, i, em, tt, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
body > * {
  margin: auto;
}
a {
  cursor: pointer;
  text-decoration: none;
}
i {
  font-style: normal;
}
textarea {
  font-family: inherit;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.none {
  position: absolute;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  border: none;
}
.cursor-p {
  cursor: pointer;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

然后在src/main.js中引入：

import '@css/index.less'

修改后的代碼如下：

import Vue from 'vue'
import App from './App.vue'
import '@css/index.less'

// 禁用生產(chǎn)環(huán)境提示
Vue.config.productionTip = false

new Vue({
  render: (h) => h(App)
}).$mount('#app')

@css 是上一章配置的路徑別名

Less具體語法可參考 Less官方文檔

配置 sourceMap

在你的項(xiàng)目根目錄下懦铺，找到 vue.config.js 文件，根據(jù)以下內(nèi)容進(jìn)行修改：

module.exports = {
  // 配置css相關(guān)選項(xiàng)
  css: {
    // 開啟 source map
    sourceMap: true
  },
}

Source Map 開啟后啟動(dòng)開發(fā)環(huán)境和生產(chǎn)環(huán)境都啟用了 Source Map支鸡，顯然不符合我們的預(yù)期冬念。
正常情況下，我們需要在開發(fā)環(huán)境下啟用Source Map牧挣，在生產(chǎn)環(huán)境下禁用Source Map急前。

可以通過環(huán)境來設(shè)置是否開啟此功能，代碼如下：

css: {
  sourceMap: process.env.NODE_ENV == 'development'
}

一般來說瀑构，process.env.NODE_ENV 會(huì)在開發(fā)環(huán)境中被設(shè)置為 'development'裆针，在生產(chǎn)環(huán)境中被設(shè)置為'production'。我們通過三目運(yùn)算判斷是否是開發(fā)環(huán)境寺晌，如果是開啟反之則關(guān)閉即可世吨。

vue.config.js 修改后的完整內(nèi)容：

const path = require('path')

module.exports = {
  // 靜態(tài)資源訪問路徑
  publicPath: './',
  // 指定構(gòu)建后的輸出目錄，默認(rèn)是 'dist'
  outputDir: 'dist',
  // 配置開發(fā)服務(wù)器選項(xiàng)
  devServer: {
    // 開發(fā)服務(wù)器啟動(dòng)時(shí)是否自動(dòng)打開瀏覽器
    open: true,
    // 端口號(hào)
    port: 3000
  },
  // 配置css相關(guān)選項(xiàng)
  css: {
    // 開啟 source map
    sourceMap: process.env.NODE_ENV == 'development'
  },
  // webpack 的配置對(duì)象
  configureWebpack: {
    // 配置Webpack模塊解析的方式呻征，使得你可以通過模塊名字而不是相對(duì)路徑來引入模塊
    resolve: {
      // 設(shè)置路徑別名
      alias: {
        '@': path.resolve('src'),
        '@public': path.resolve('public'),
        '@img': path.resolve('src/assets/images'),
        '@js': path.resolve('src/assets/scripts'),
        '@css': path.resolve('src/assets/styles')
      }
    }
  }
}

配置完成后耘婚，重新啟動(dòng)開發(fā)服務(wù)器就能看到效果了。

配置 Less 全局變量

在你的項(xiàng)目根目錄下陆赋，找到 vue.config.js 文件沐祷，根據(jù)以下內(nèi)容進(jìn)行修改：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // 配置全局變量
          globalVars: {
            'logoName': 'logo'
          }
        }
      }
    }
  }
}

在less中使用配置的變量

.classname {
  background: url('@img/@{logoName}.png');
}

框架搭建整體流程

• 第一步 Vue2 使用 Vue 腳手架 Vue CLI 搭建一個(gè) Vue.js 前端項(xiàng)目框架

• 第二步 Vue2 vue.config.js 基礎(chǔ)配置，路徑別名alias

• 第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局變量

• 第四步 Vue2 配置ESLint

• 第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置圖片壓縮

• 第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui

• 第七步 Webpack 配置多環(huán)境和全局變量 cross-env 和 webpack.DefinePlugin

點(diǎn)擊下載步驟 1-7 配置完成的完整 Demo