Skip to content

Commit 469216d

Browse files
committed
Update README
1 parent 237a854 commit 469216d

File tree

1 file changed

+13
-9
lines changed

1 file changed

+13
-9
lines changed

README.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ All the power of Vue CLI's scaffolding & single file components tailored for a C
55
## What's Included
66

77
- `npm run dev` / `yarn dev`: first-in-class development experience.
8+
89
- Webpack + `vue-loader` for single file Vue components
910
- State preserving hot-reload
1011
- Page reloading on file edits (twig, html, etc)
@@ -21,25 +22,23 @@ All the power of Vue CLI's scaffolding & single file components tailored for a C
2122

2223
### Fork It And Make Your Own
2324

24-
You should fork this repo to create your own boilerplate. This scaffold makes no assumptions about pre-processor, babel, or linting configurations.
25+
You should fork this repo to create your own boilerplate. This scaffold makes no assumptions about pre-processors used or linting configurations.
2526

2627
I've also created a [fork of this boilerplate](https://github.com/chasegiunta/craft-vue-tailwind) that integrates TailwindCSS & Purgecss.
2728

2829
## Setup
2930

3031
This boilerplate requires Vue CLI 3 be [installed globally on your machine](https://cli.vuejs.org/guide/installation.html).
3132

32-
33-
34-
``` bash
33+
```bash
3534
# create & install project
3635
composer create-project chasegiunta/craft-vue PATH
3736

3837
# run Craft's setup & install
3938
./craft setup
4039

41-
# install the Asset Rev plugin
42-
./craft install/plugin assetrev
40+
# install the Twigpack plugin
41+
./craft install/plugin twigpack
4342

4443
# install dependencies
4544
npm install # yarn
@@ -57,26 +56,31 @@ You can also run your `dev` & `build` tasks from the GUI to get valuable build s
5756

5857
**NOTE:** During development, _only your assets_ will be served from `localhost:8080` and referenced in the base template. You'll still load your site locally under your normal development domain (mysite.test, etc.). This will also cause a brief unstyled flash on page loads due to JS/CSS assets loading from javascript for development. **This flash isn't present after build, on production**.
5958

60-
After running `npm run build`, the easiest way to test your build files locally is to comment the environment variable in your `.env` file, and refresh the page. This will serve your assets from the build directory, rather than webpack's dev server.
59+
If webpack's dev server (`yarn dev`) is not running, Twigpack will serve your assets from the build directory.
6160

6261
For a detailed explanation on how things work, check out the [Vue CLI docs](https://cli.vuejs.org/).
6362

6463
## Pre-Processors
6564

6665
This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS:
67-
``` bash
66+
67+
```bash
6868
npm install sass-loader node-sass --save-dev
6969
# yarn add sass-loader node-sass --dev
7070
```
71+
7172
Note you also need to install node-sass because sass-loader depends on it as a peer dependency.
7273

7374
Read more about this at https://cli.vuejs.org/guide/css.html#pre-processors
7475

7576
## Automatic Component Registration
76-
Any vue components placed within `src/components` will be registered with Vue automatically. **This requires their filenames to be in PascalCase**, eg. MyVueComponent.vue
77+
78+
Any vue components placed within `src/components` will be registered with Vue automatically. You may nest these in subfolders if you wish.
7779

7880
## Babel Compiling
81+
7982
This boilerplate uses babel-preset-env for configuring babel. [You can read more about it here.](https://cli.vuejs.org/config/#babel)
8083

8184
## Linting
85+
8286
You can enable linting by adding the `@vue/cli-plugin-eslint` plugin through the GUI `vue ui`.

0 commit comments

Comments
 (0)