Vue.js 是一款非常流行的前端 JavaScript 框架，它采用組件化的方式構建用戶界面。在 Vue.js 中，我們可以使用 import 和 require 兩種方式導入外部模塊。那么，它們的區別和使用方式是什么呢？

import 和 require 在導入模塊時的語法稍有不同。import 是 ES6 中的模塊化語法，可以實現按需加載模塊，而 require 則是 CommonJS 中的語法，只能加載整個模塊。下面分別給出 import 和 require 的用法示例：

// import 示例
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h =>h(App)
}).$mount('#app')
// require 示例
const Vue = require('vue')
const App = require('./App.vue')
const router = require('./router')
Vue.config.productionTip = false
new Vue({
router,
render: h =>h(App)
}).$mount('#app')

通過上面的示例可以看出，import 和 require 在使用方法上有一些區別。另外，import 的語法更加簡潔明了，而 require 的語法相對繁瑣，需要在最后添加一個點來代表當前目錄。在實際使用中，可以根據具體情況選擇使用 import 還是 require。

需要注意的是，在使用 Vue.js 時，推薦使用 import 的方式導入模塊。因為 Vue.js 是一個基于 ES6 構建的框架，使用 import 語法可以更好地體現出 Vue.js 的特性，并且可以提高代碼的可讀性和維護性。