Initial router and components for the Vue project.
yarn global add vue-generator-cli
# or
npm i -g vue-generator-cli# init vue project via @vue/cli
vue create myproject
# cd a new Vue project
cd myproject
# init router.yaml and .vuegeneratorrc.js
vue-generator init
# edit router.yaml and .vuegeneratorrc.js
# create router and components
vue-generator all
# remove default router.js file
mv src/router.js src/router.bak.js
# run serve
yarn run serve
# or
npm run serve
# open browser http://localhost:8080/#/account/login
# edit router.yaml and .vuegeneratorrc.js
# update components
vue-generator components -f
# edit router.yaml and .vuegeneratorrc.js
# update router
vue-generator router -f.vuegeneratorrc.js
module.exports = {
template: 'default', // default template
eslint: 'airbnb', // eslint style
router: { // router config path
src: './router.yaml', // router config path
dist: './src/router', // output router path
componentsRoot: '@/components' // components root path
},
components: { // components config
src: './router.yaml', // components config path(same as router config)
dist: './src/compoents', // output components path
template: '', // template lang
script: '', // script lang
style: 'scss', // style lang
},
};router.yaml
---
router: # root
- index # index component & /index route
- account: # router-view component & /account route
- login # login component & /account/login route
- article: # router-view component & /article route
- article-list # article-list component & /article/article-list route
- name: article-detail # component name
path: ":article_id(\\d )" # /article/(\d ) route path
children: # children of route
- index # index component & /article/(\d )/index route
- edit # edit component & /article/(\d )/edit routesrc
├── App.vue
├── assets
│ └── logo.png
├── components
│ ├── Index.vue
│ ├── account
│ │ ├── Account.vue
│ │ └── Login.vue
│ └── article
│ ├── Article.vue
│ ├── ArticleList.vue
│ └── article-detail
│ ├── ArticleDetail.vue
│ ├── Edit.vue
│ └── Index.vue
├── main.js
└── router
├── account
│ └── index.js
├── article
│ ├── article-detail
│ │ └── index.js
│ └── index.js
└── index.js