在前面的章节,已经讲解了部分vue-element-admin的知识:
本文主要讲解的是alias别名。
2. alias我们知道,在日常的开发中,要引入一个文件,经常要写一连串的东西,如下:
import stickTop from '../src/components/stickTop'
当项目逐渐变大之后,文件与文件直接的引用关系会很复杂,这时候就需要使用alias了。
2.1 alias使用方式
alias一般在vue.config.js
里配置,使用方式如下。
① 案例一:
resolve: {
alias: {
'~': resolve(__dirname, 'src')
}
}
//使用
import stickTop from '~/components/stickTop'
② 案例二:
alias: {
'src': path.resolve(__dirname, '../src'),
'components': path.resolve(__dirname, '../src/components'),
'api': path.resolve(__dirname, '../src/api'),
'utils': path.resolve(__dirname, '../src/utils'),
'store': path.resolve(__dirname, '../src/store'),
'router': path.resolve(__dirname, '../src/router')
}
//使用
import stickTop from 'components/stickTop'
import getArticle from 'api/article'
这些使用方式没有好与坏对与错,纯看个人喜好和团队规范。
3. element项目详解在element
项目,alias
是如何使用的呢?我们来看下,首先打开vue.config.js
文件,预料之内,有一段代码块:
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
可以看到,src
都使用@
来替代,打开某个js
文件,可以看到,是这样引用src
下的文件的:
本文完!