78 lines
2.3 KiB
Markdown
78 lines
2.3 KiB
Markdown
[](https://git.klemek.fr/klemek/vue-template/actions?workflow=lint.yml) [](https://git.klemek.fr/klemek/vue-template/actions?workflow=deploy.yml)
|
|
|
|
# Vue-boilerplate
|
|
|
|
_Minimal static Vue project_
|
|
|
|
<!-- TODO: 1. rename app (and tool URL) -->
|
|
|
|
### [Tool link]()
|
|
|
|
## Use this template
|
|
|
|
<!-- TODO: 3. remove this part -->
|
|
|
|
### Creating project
|
|
|
|
#### Method 1: Using GitHub repository template
|
|
|
|
[Use this template](https://git.klemek.fr/repo/create?template_id=10)
|
|
|
|
#### Method 2: CLI forking
|
|
|
|
```bash
|
|
git clone ssh://git@git.klemek.fr:42617/klemek/vue-template.git {PROJECT}
|
|
cd {PROJECT}
|
|
git remote rename origin template
|
|
git remote add origin {PROJECT REMOTE}
|
|
```
|
|
|
|
### Tasks
|
|
|
|
> Every task is indicated with a TODO
|
|
|
|
1. [ ] Rename app in [README.md](./README.md), [index.html](./index.html), [App.vue](./src/App.vue) and [package.json](./package.json)
|
|
2. [ ] Change app hue and saturation in [style.css](./public/style.css)
|
|
3. [ ] Remove this part and all TODO
|
|
|
|
### Updating from template
|
|
|
|
To update from templates latest changes:
|
|
|
|
```shell
|
|
make update-template
|
|
```
|
|
|
|
### Upgrade from version 1
|
|
|
|
```shell
|
|
git remote add template ssh://git@git.klemek.fr:42617/klemek/vue-template.git
|
|
git fetch template
|
|
git rm --force '*'
|
|
git checkout template/main -- '*'
|
|
git remote remove template
|
|
# re-code logic by checking online code
|
|
```
|
|
|
|
### Makefile targets
|
|
|
|
```txt
|
|
Usage: make [target1] [target2] ...
|
|
|
|
Commands/Targets:
|
|
help show this message
|
|
install install project
|
|
install update project
|
|
build build static site in "dist"
|
|
dev run dev server
|
|
lint lint code
|
|
format fix and reformat code
|
|
update-template fetch and merge core changes from template
|
|
```
|
|
|
|
### Tips
|
|
|
|
- [Material design colors](https://materialui.co/colors/) are available, you can use `class="red-500"` on your HTML (see [full list](https://github.com/shuhei/material-colors/blob/master/dist/colors.css))
|
|
- [Lucide icons](https://lucide.dev/icons) are available, you can use `<i icon=house></i>` on your Vue template
|
|
- The .button class make links more beautifuls (can also be .disabled or colored amber-300)
|