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

   $ git clone https://github.com/yungshenglu/VueTS-Starter/

2. After cloning, change the your current directory into the repository and setup the project

   $ 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

   $ 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
2. Install Vue-CLI for initializing the project

   $ npm install -g "@vue/cli"

3. Create a Vue project via Vue-CLI

   $ 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.

     🎉 Successfully created project todolist.
     👉 Get started with the following commands:
     
     $ cd todolist
     $ npm run serve

     NOTES: See Configuration Reference.

4. Change directory to your project and show all files

   $ 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?

   $ 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

   $ 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

   $ 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

---

License

GNU GENERAL PUBLIC LICENSE Version 3