You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A plugin that helps you bootstrap your Vue application by doing some common configurations.
6
+
A plugin that helps you bootstrap your Vue application by performing some common configurations.
5
7
6
-
## Features
7
-
The **primary goal** of this plugin is to purge out all the files that come shipped in the `views/` and `components/`folder. By default, it also rewrites the `Home.vue` and `App.vue` components to just leave the minimum necessary to function.
8
+
## Features ✨
9
+
The **primary goal** of this plugin is to purge out all the files stored in the `views/` and `components/`folders that, by default, come shipped within a normal `vue-cli` project. It also rewrites the `Home.vue` and `App.vue` components to leave just the minimum necessary to function.
8
10
9
11
Some additional features are:
10
12
11
-
-**Add support for base components**: It is a good practice that you keep a handful of components that you are going to use across all your app (like buttons, form fields, etc). This plugin automatically adds [global registering](https://vuejs.org/v2/guide/components-registration.html#Automatic-Global-Registration-of-Base-Components) for your base components. It also adds a `BaseIcon.vue` file, a component that you can use to show SVG icons [as recommended](https://vuejs.org/v2/cookbook/editable-svg-icons.html#Base-Example) by Vue and finally it creates a `icons.svg` file on the `public/` folder in which you can store all your icons. The file structure of your app will then look something like this:
13
+
-**Support for base components**: It is a good practice that you keep a handful of components that you are going to use across all your Vue application (like buttons, form fields, etc). These type of components are called **Base Components** and can be enabled to use globally in your project through [global registering](https://vuejs.org/v2/guide/components-registration.html#Automatic-Global-Registration-of-Base-Components), a process that is automatically done by this plugin. In addition, this plugin creates a `BaseIcon.vue` file, a component that you can use to display **SVG** icons stored in a `icons.svg` file (also created by this plugin) [as recommended](https://vuejs.org/v2/cookbook/editable-svg-icons.html#Base-Example) by Vue. The file structure of your app will then look something like this:
12
14
13
15
```
14
16
public
@@ -22,7 +24,7 @@ src
22
24
│ └── base
23
25
│ └── BaseIcon.vue
24
26
├── router
25
-
│ ├── index.js 👈 With all paths removed except Home
27
+
│ ├── index.js 👈 With all paths removed except Home
26
28
└── store
27
29
├── index.js
28
30
├── views
@@ -31,20 +33,10 @@ src
31
33
├── main.js
32
34
```
33
35
34
-
-**Add Prettier configuration**: If you chose Prettier as your code formatter, you might want to configure it with some additional options. This plugin adds a `.prettierrc.js` configuration file to your root folder with some preconfigured options. (This will only surt effect if the `@vue/eslint-config-prettier` is installed on your project).
36
+
-**Support for TailwindCSS**: If by any reason you want to use **Tailwind**as your CSS framework, this plugin can help you get started by automatically creating `postcss.config.js` and `tailwind.config.js` configuration files, in addition to creating a `tailwind.css` file on the `assets` folder.
35
37
36
38
```js
37
-
// Default structure of the .prettierrc.js config file
38
-
module.exports= {
39
-
trailingComma:"es5",
40
-
vueIndentScriptAndStyle:true,
41
-
};
42
-
```
43
-
44
-
-**Add support for TailwindCSS**: If by any reason you want to use **Tailwind** as your CSS framework, this plugin can help you get started by automatically creating a `postcss.config.js` and a `tailwind.config.js` file, in addition to creating the `tailwind.css` file on the `assets` folder.
45
-
46
-
```js
47
-
// Default structure of the .postcss.config.js config file
39
+
// Default structure of the postcss.config.js config file
48
40
module.exports= {
49
41
plugins: {
50
42
tailwindcss: {},
@@ -54,7 +46,7 @@ module.exports = {
54
46
```
55
47
56
48
```js
57
-
// Default structure of the .tailwind.config.js config file
49
+
// Default structure of the tailwind.config.js config file
58
50
module.exports= {
59
51
purge: [],
60
52
theme: {
@@ -66,9 +58,17 @@ module.exports = {
66
58
};
67
59
```
68
60
69
-
Right now these are all the features this plugin has and they are all **optional**, more of that in the next section.
61
+
-**Prettier configuration**: If you chose Prettier as your code formatter, you might want to configure it with some additional options. This plugin adds a `.prettierrc.js` configuration file to your root folder with some default options. (This will only surt effect if the `@vue/eslint-config-prettier` plugin is installed on your project).
62
+
63
+
```js
64
+
// Default structure of the .prettierrc.js config file
65
+
module.exports= {
66
+
trailingComma:"es5",
67
+
vueIndentScriptAndStyle:true,
68
+
};
69
+
```
70
70
71
-
## Getting Started
71
+
## Getting Started 👨💻
72
72
After your project has been created with the `vue-cli` service, add the plugin like so:
0 commit comments