diff options
Diffstat (limited to 'docs/guide/quickstart')
| -rw-r--r-- | docs/guide/quickstart/page-anatomy.md | 16 | ||||
| -rw-r--r-- | docs/guide/quickstart/store-anatomy.md | 21 |
2 files changed, 26 insertions, 11 deletions
diff --git a/docs/guide/quickstart/page-anatomy.md b/docs/guide/quickstart/page-anatomy.md index 120bf70b..fd49a8f5 100644 --- a/docs/guide/quickstart/page-anatomy.md +++ b/docs/guide/quickstart/page-anatomy.md @@ -1,5 +1,6 @@ # Page Anatomy -Single-file components (SFC) consist of a `template`, `script` and `style` block. +Single-file components (SFC) consist of a `template`, `script` and `style` +block. ## Template block When creating a new page, each template consists of at least 3 components: @@ -7,7 +8,8 @@ When creating a new page, each template consists of at least 3 components: - `<page-title>` - `<page-section>` -Learn more about the [page title](/guide/components/page-title)and [page section](/guide/components/page-section) components. +Learn more about the [page title](/guide/components/page-title)and [page +section](/guide/components/page-section) components. ```vue <template> @@ -20,9 +22,11 @@ Learn more about the [page title](/guide/components/page-title)and [page section </template> ``` ## Scripts block -In the scripts section, be sure to import the `PageTitle` and `PageSection` components and declare them in the `components` property. +In the scripts section, be sure to import the `PageTitle` and `PageSection` +components and declare them in the `components` property. -Importing `BContainer` in the [scripts block](#scripts-block) is not required as it is already registered globally. +Importing `BContainer` in the [scripts block](#scripts-block) is not required as +it is already registered globally. ```vue <script> @@ -36,7 +40,9 @@ export default { ``` ## Style block -Add the `scoped` attribute to the style block to keep the styles isolated to the SFC. While the `scoped` attribute is optional, it is preferred and global changes should be done in global style sheets. +Add the `scoped` attribute to the style block to keep the styles isolated to the +SFC. While the `scoped` attribute is optional, it is preferred and global +changes should be done in global style sheets. ```vue <style lang="scss" scoped> </style> ``` diff --git a/docs/guide/quickstart/store-anatomy.md b/docs/guide/quickstart/store-anatomy.md index 63b48542..3ad5694f 100644 --- a/docs/guide/quickstart/store-anatomy.md +++ b/docs/guide/quickstart/store-anatomy.md @@ -2,7 +2,8 @@ ## Store -A "store" is a container that holds the application's state. [Learn more about Vuex.](https://vuex.vuejs.org/) +A "store" is a container that holds the application's state. [Learn more about +Vuex.](https://vuex.vuejs.org/) ```sh # Store structure @@ -19,14 +20,22 @@ A "store" is a container that holds the application's state. [Learn more about V ### Modules -The application store is divided into modules to prevent the store from getting bloated. Each module contains its own state, mutations, actions, and getters. [Learn more about Vuex modules.](https://vuex.vuejs.org/guide/modules.html) +The application store is divided into modules to prevent the store from getting +bloated. Each module contains its own state, mutations, actions, and getters. +[Learn more about Vuex modules.](https://vuex.vuejs.org/guide/modules.html) #### Module Anatomy -- **State:** You cannot directly mutate the store's state. [Learn more about state.](https://vuex.vuejs.org/guide/state.html) -- **Getters:** Getters are used to compute derived state based on store state. [Learn more about getters.](https://vuex.vuejs.org/guide/getters.html) -- **Mutations:** The only way to mutate the state is by committing mutations, which are synchronous transactions. [Learn more about mutations.](https://vuex.vuejs.org/guide/mutations.html) -- **Actions:** Asynchronous logic should be encapsulated in, and can be composed with actions. [Learn more about actions.](https://vuex.vuejs.org/guide/actions.html) +- **State:** You cannot directly mutate the store's state. [Learn more about + state.](https://vuex.vuejs.org/guide/state.html) +- **Getters:** Getters are used to compute derived state based on store state. + [Learn more about getters.](https://vuex.vuejs.org/guide/getters.html) +- **Mutations:** The only way to mutate the state is by committing mutations, + which are synchronous transactions. [Learn more about + mutations.](https://vuex.vuejs.org/guide/mutations.html) +- **Actions:** Asynchronous logic should be encapsulated in, and can be composed + with actions. [Learn more about + actions.](https://vuex.vuejs.org/guide/actions.html) Import new store modules in `src/store/index.js`. |