CSS Module 是一個用于解決 CSS 命名沖突的工具。它允許在 JavaScript 中編寫 CSS，使用不同的命名空間來隔離不同組件間的樣式，這樣就可以避免樣式的污染和沖突了。而 Vue.js 的 CSS Module 是基于 Webpack 的實現，并且集成了 CSS Preprocessor，也就是說可以使用 SCSS/Less/Stylus 來編寫樣式。
首先，我們需要在 Vue 項目中啟用 CSS Module。在 webpack.config.js 中添加如下代碼：
```
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
loader: 'css-loader?modules'
}
]
}
}
```
這樣配置之后，我們在組件中就可以使用 :global 和 :local 兩個關鍵字來標記樣式的命名空間了。:global 用于聲明全局的樣式，而 :local 則用于聲明本地的樣式，它們的作用域限制分別是全局和本地。默認情況下，所有樣式都是本地的。
例如，我們可以在組件的 style 標簽中編寫以下樣式：
``````
這里，我們定義了一個類名為 example 的樣式，它使用了 :global 關鍵字來聲明 .other-example 類是全局的，并添加了一個背景顏色為綠色的樣式。
另外，我們也可以在 script 標簽中使用 require 或 import 語句來導入樣式，然后在模板中使用樣式名。例如：
```
Hello, Vue.js!
```
這里，我們使用 import 語句導入了 styles.module.scss，并將樣式對象賦值給了 style 屬性。然后在模板中使用 $style.example 來引用樣式。
最后，需要注意的是，CSS 模塊的類名是動態生成的，由 Webpack 自動添加前綴生成。因此，我們需要使用 $style 來訪問樣式，在渲染后它會自動計算為正確的類名。
總之，Vue.js 的 CSS Module 可以大大提高我們編寫 CSS 的效率和可維護性，避免了樣式沖突和污染的問題。同時，它還支持 SCSS/Less/Stylus 等預處理器，讓我們可以更加舒適的編寫樣式。