Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yungshenglu/vue2ts-starter
Starter repository for using Vue 2 and TypeScript
https://github.com/yungshenglu/vue2ts-starter
prettier starter-project typescript vue yarn
Last synced: 19 days ago
JSON representation
Starter repository for using Vue 2 and TypeScript
- Host: GitHub
- URL: https://github.com/yungshenglu/vue2ts-starter
- Owner: yungshenglu
- License: gpl-3.0
- Created: 2020-05-14T15:34:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T18:12:05.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T23:33:22.636Z (about 1 month ago)
- Topics: prettier, starter-project, typescript, vue, yarn
- Language: Vue
- Homepage:
- Size: 27.9 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# VueTS-Starter
This repository is my starter repository for Vue and TypeScript
---
## Description
### Execution
1. To run our production, you need to clone our project first
```bash
$ git clone https://github.com/yungshenglu/VueTS-Starter/
```
2. After cloning, change the your current directory into the repository and setup the project
```bash
$ cd VueTS-Starter/ & npm install
```
- The command `npm install` will install some necessary packages for this project
- It will take few second for running above command
3. Compiles and hot-reloads for development
```bash
$ npm run serve
```
- It will take few second for running above command
- You won't get any error messages if running successful
4. Congratulation! you can open your browser to `http://localhost:8080` and see our VueTS-Starter
### Implementation
1. Make sure you have already install [Node.js](https://nodejs.org/en/)
2. Install Vue-CLI for initializing the project
```bash
$ npm install -g "@vue/cli"
```
3. Create a Vue project via Vue-CLI
```bash
$ vue create vuets-starter
# You will need to do some settings below if succeed
Vue CLI v4.2.3
? Please pick preset: Manually select features
? Check the feautures needed for your projects: TS, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alognside Typescript? No
? Pick a CSS pre-processor? Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: TSLint
? Pick a additional lint feautres: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
...
```
* This will take a while for initializing the project
* You will get the following messages if initialized succeed.
```bash
🎉 Successfully created project todolist.
👉 Get started with the following commands:
$ cd todolist
$ npm run serve
```
> **NOTES:** See [Configuration Reference](https://cli.vuejs.org/config/).
4. Change directory to your project and show all files
```bash
$ cd Vue-TodoList/ & ls
README.md package-lock.json public tsconfig.json
node_modules package.json src tslint.json
```
5. How to run the project on local machine?
```bash
$ npm run serve
# You will NOT get any error meesage if compiled succeed
```
* If compiled succeed, you can open your browser to http://localhost:8080
#### Deploy on GitHub Pages
1. To deploy our production, make sure your current directory is the root of this repository and run the following command
```bash
$ npm run build
```
- It will take few second for ruuning above command
- You will get a new folder `dist/` after building successful
- You don't need to push `dist/` on your GitHub because `dist/` has already been ignored by git via `.gitignore`
2. Before deploying, make sure you have already created your repository on GitHub
3. Change the directory into `dist/` and create a new branch for deploying on your GitHub Pages
```bash
$ cd dist/
# You need to initialize git due to dist/ is ignored as default
$ git init
$ git add -A
$ git commit -m "Deploy on GitHub Pages"
# Deploy to your GitHub repository on branch "gh-pages"
$ git push -f https://github.com/[GITHUB_ACCOUNT]/VueTS-Starter.git master:gh-pages
$ cd -
```
4. After deploying, you can find it on your GitHub with branch `gh-pages`
5. Open setting page of your repository and move to the section `GitHub Pages`
6. Select `Source` of your GitHub Pages to `gh-pages branch`
7. Congratulation! you can open your browser to the link of your GitHub Pages
---
## Contributor
> **NOTICE:** You can follow the contributing process [CONTRIBUTING.md] to join me. I am very welcome any issue!
* [David Lu](https://github.com/yungshenglu)
---
## License
[GNU GENERAL PUBLIC LICENSE Version 3](LICENSE)