Vue.js 是一款受歡迎的前端框架。使用它可以使開發者更加高效地構建交互式用戶界面。Vue.js 提供了許多功能和工具來方便開發者完成代碼。其中一個重要的特性就是import。

import是 JavaScript ES6 的一部分，也被支持在 Vue.js 中。它的作用是將代碼分割成塊，并且能夠按需加載模塊依賴。

// 引入一個名為“HelloWorld”的組件
import HelloWorld from './components/HelloWorld.vue';

使用import導入模塊之前，你需要設置一個編譯器。如果使用 Vue 的官方腳手架工具，那么編譯器默認已經被設置好了。但如果你手動創建了 Vue.js 項目，則需要確保在使用時啟用編譯器。

import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';
new Vue({
el: '#app',
components: { HelloWorld }
});

在上面的代碼中，我們首先導入了 Vue 和 HelloWorld 組件。之后，我們可以將 HelloWorld 組件添加到 Vue 實例的組件中。這樣就可以在 Vue 主組件中使用 HelloWorld 組件了。

使用import時，需要注意一些命名規則。命名規則建議使用 PascalCase 來表示組件名。JS 文件應該以小寫字母的 kebab-case 命名方式來書寫。

// HelloWorld.vue
<template><div class="hello">{{ msg }}
</div></template><script>export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script><style scoped>h1, h2 {
font-weight: 400;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}

總的來說，import是 Vue.js 非常有用的功能之一。它可以幫助我們將代碼分割成塊，提升網站的性能。此外，建議遵循命名規則來避免錯誤。