Skip to content

Commit 4200779

Browse files
authored
Update README.md
Adding instructions for using basec in the UI
1 parent 21a870e commit 4200779

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Table of Contents
1717
* [Using the BaseIcon component](#using-the-baseicon-component)
1818
* [Using the `basec` command](#using-the-basec-command)
1919
* [Using `basec` through NPM scripts](#using-basec-through-npm-scripts)
20+
* [Using `basec` through the Vue UI](#using-basec-through-the-vue-ui)
2021
* [About](#about)
2122
* [Why should you use this plugin?](#why-should-you-use-this-plugin)
2223
* [FAQ](#faq)
@@ -168,6 +169,35 @@ npm run basec BuyButton -- --scaffold-button --prefix custom
168169

169170
This will have the same result as the previous example.
170171

172+
#### Using `basec` through the Vue UI
173+
You can also use the `basec` command through the Vue user interface like so:
174+
175+
- In the UI, open your proyect and go to the `Tasks` section, in a newly created proyect there are going to be three basic commands: `serve`, `build` and `lint`. Vue Clean also adds a new command called `basec`.
176+
177+
- You can configure the options for the `basec` command in the modal window opened by the `Parameters` button. In the following example we are replicating the `BaseDummy` component we created in the previous section.
178+
179+
<p align="center">
180+
<img src="https://github.com/DevTony101/vue-cli-plugin-clean/blob/master/docs/images/ui_doc_2.png" />
181+
</p>
182+
183+
Now if you press the `Run task` button, the following message will appear on the console:
184+
185+
<p align="center">
186+
<img src="https://github.com/DevTony101/vue-cli-plugin-clean/blob/master/docs/images/ui_doc_3.png" />
187+
</p>
188+
189+
- Through the modal window you can also choose what template you want your component to use through a combobox element. In the following example we are replicating the `CustomBuyButton` we created in the previous section.
190+
191+
<p align="center">
192+
<img src="https://github.com/DevTony101/vue-cli-plugin-clean/blob/master/docs/images/ui_doc_4.png" />
193+
</p>
194+
195+
The result is the same as you would expect:
196+
197+
<p align="center">
198+
<img src="https://github.com/DevTony101/vue-cli-plugin-clean/blob/master/docs/images/ui_doc_5.png" />
199+
</p>
200+
171201
## About
172202
### Why should you use this plugin?
173203
Configuring a new Vue project can be tedious, deleting the autogenerated files, installing the necessary dependencies... This plugin aims to be your tool to aid you in that

0 commit comments

Comments
 (0)