Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bryanadamss/vue-cli-plugin-auto-alias
A vue-cli plugin that automatically sets aliases
https://github.com/bryanadamss/vue-cli-plugin-auto-alias
Last synced: about 2 months ago
JSON representation
A vue-cli plugin that automatically sets aliases
- Host: GitHub
- URL: https://github.com/bryanadamss/vue-cli-plugin-auto-alias
- Owner: BryanAdamss
- License: mit
- Created: 2020-06-23T06:27:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-26T23:18:32.000Z (almost 3 years ago)
- Last Synced: 2024-10-11T03:37:22.870Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 331 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-cli-plugin-auto-alias
> A vue-cli plugin that automatically sets aliases. According to the `rootDirName` and then auto generated directory alias
English | [δΈζ](https://github.com/BryanAdamss/vue-cli-plugin-auto-alias/blob/master/README.zh-CN.md)
## Install
```sh
vue add vue-cli-plugin-auto-alias
or
vue add auto-alias
```
## DefaultOptions
```javascript
// vue.config.js
module.exports = {
pluginOptions: {
'vue-cli-plugin-auto-alias': {
// rooot dir for auto gen alias
rootDirName: 'src',
// letter-case
// support case: camelCase,capitalCase,constantCase,dotCase,headerCase,noCase,paramCase,pascalCase,pathCase,sentenceCase,snakeCase
// https://www.npmjs.com/package/change-case
case: 'pascalCase',
// custom alias
alias: {
// just like a normal resolve in Webpack
// test:path.resolve(__dirname,'test')
},
},
},
}
```
## Examples
- If your directory structure as follows
```sh
|---node_modules
|---public
|---src/ # rootDir
--- assets/
--- components/
--- router/
--- store/
--- views/
--- custom-dir/
|--- package.json
|--- vue.config.js
```
- and the options as follows
```javascript
// vue.config.js
module.exports = {
pluginOptions: {
'vue-cli-plugin-auto-alias': {
// rooot dir for auto generated alias
rootDirName: 'src',
// letter-case
// support case: camelCase,capitalCase,constantCase,dotCase,headerCase,noCase,paramCase,pascalCase,pathCase,sentenceCase,snakeCase
// https://www.npmjs.com/package/change-case
case: 'pascalCase',
// custom alias
alias: {
Public: path.resolve(__dirname, 'public'),
},
},
},
}
```
- and you will get webpack alias as follows
```javascript
// vue inspect > output.js
{
resolve: {
alias: {
'@': 'D:\\Workspace\\web-front-report\\src',
vue$: 'vue/dist/vue.runtime.esm.js',
// according to the rootDirName auto generated alias
Assets: 'D:\\Workspace\\web-front-report\\src\\assets',
Components: 'D:\\Workspace\\web-front-report\\src\\components',
Router: 'D:\\Workspace\\web-front-report\\src\\router',
Store: 'D:\\Workspace\\web-front-report\\src\\store',
CustomDir: 'D:\\Workspace\\web-front-report\\src\\custom-dir',
// custom alias
Public: 'D:\\Workspace\\web-front-report\\public
},
}
```
## NPM
- [vue-cli-plugin-auto-alias](https://www.npmjs.com/package/vue-cli-plugin-auto-alias)
- [@bryanadamss/drawing-board](https://www.npmjs.com/package/@bryanadamss/drawing-board)
- [@bryanadamss/num2chn](https://www.npmjs.com/package/@bryanadamss/num2chn)
- [ant-color-converter](https://www.npmjs.com/package/ant-color-converter)
## Show your support
Give a βοΈ if this project helped you!
## π License
Copyright Β© 2020 [[email protected]](https://github.com/BryanAdamss).
This project is [MIT](https://github.com/kefranabg/readme-md-generator/blob/master/LICENSE) licensed.
## Contributors β¨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
