Vueのインポートファイルのインポート、およびパス@。違い
インポート***:
によって、HTMLファイルscript
ラベル導入のjsファイル。
そしてVUEでimport xxx from xxx
パス論文を導入し、唯一のjsファイルを導入することができます。
「XXX」は、インポートされたファイルから名前を参照し、ガイダンス文書、変数名の同等の名前ではありません。
「XXXパスは、」ファイルへの相対パスを指します。
例えば:
ルーティングindex.jsに導入apple.vueとbanana.vue
import banana from '@/components/banana'
import apple from '../components/apple'
上記の例は、相対パスは2つの方法で定義され、ファイル拡張子は省略されています。
***方法
親子ディレクトリの相対パスを定義することとして. /
カレントディレクトリを指すが、. ./
カレントディレクトリ内のディレクトリを指し
*** @方法
相対パスのルートを定義するように
VUEはwebpack.base.conf.jsにおける次の構成ファイルを有しています
// 连接路径并返回
function resolve(dir) { return path.join(__dirname, '..', dir) } module.exports = { resolve: { // 在导入语句没带文件后缀时,webpack会自动按照顺序添加后缀名查找 extensions: ['.js', '.vue', '.json'], // 配置别名 alias: { 'vue$': 'vue/dist/vue.esm.js', // 将项目根目录中,src的路径配置为别名@ '@': resolve('src'), } } }
インポート***:
によって、HTMLファイルscript
ラベル導入のjsファイル。
そしてVUEでimport xxx from xxx
パス論文を導入し、唯一のjsファイルを導入することができます。
「XXX」は、インポートされたファイルから名前を参照し、ガイダンス文書、変数名の同等の名前ではありません。
「XXXパスは、」ファイルへの相対パスを指します。
例えば:
ルーティングindex.jsに導入apple.vueとbanana.vue
import banana from '@/components/banana'
import apple from '../components/apple'
上記の例は、相対パスは2つの方法で定義され、ファイル拡張子は省略されています。
***方法
親子ディレクトリの相対パスを定義することとして. /
カレントディレクトリを指すが、. ./
カレントディレクトリ内のディレクトリを指し
*** @方法
相対パスのルートを定義するように
VUEはwebpack.base.conf.jsにおける次の構成ファイルを有しています
// 连接路径并返回
function resolve(dir) { return path.join(__dirname, '..', dir) } module.exports = { resolve: { // 在导入语句没带文件后缀时,webpack会自动按照顺序添加后缀名查找 extensions: ['.js', '.vue', '.json'], // 配置别名 alias: { 'vue$': 'vue/dist/vue.esm.js', // 将项目根目录中,src的路径配置为别名@ '@': resolve('src'), } } }