https://github.com/andfanilo/personal-codepen
WIP: A Vue.js codepen clone
https://github.com/andfanilo/personal-codepen
codepen vue vuejs
Last synced: 3 months ago
JSON representation
WIP: A Vue.js codepen clone
- Host: GitHub
- URL: https://github.com/andfanilo/personal-codepen
- Owner: andfanilo
- Created: 2018-07-26T23:31:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-27T11:08:49.000Z (over 7 years ago)
- Last Synced: 2025-04-07T17:51:56.107Z (9 months ago)
- Topics: codepen, vue, vuejs
- Language: Vue
- Homepage:
- Size: 109 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# personal-codepen
A personal Codepen setup in Vue. Idea by [this post](https://willianjusten.com.br/criando-um-codepen-simples-em-poucas-linhas/).
## Prerequisites
- [Nodejs version 8.x](https://nodejs.org/en/)
- [Vue CLI](https://cli.vuejs.org/)
For development, we recommend :
- [Visual Code](https://code.visualstudio.com/)
- [Vue.js Extension Pack in Visual Code](https://marketplace.visualstudio.com/items?itemName=mubaidr.vuejs-extension-pack)
- [Browser Vue.js devtools](https://github.com/vuejs/vue-devtools#vue-devtools)
## Build
`npm install`
Installs all of the specified packages of your project.
## Run
`npm run serve`
This should redirect you to http://localhost:8080 for your application.
## Build
`npm run build`
You can deploy the built content in the `dist/` directory to any static file server.
## Setup VSCode
Run the `Setup VS Code` and `Setup ESLint` from the recommended settings in Vue.js extension pack documentation into your Workspace settings :
- Enable FormatOnSave & Eslint for .vue files
```
"editor.formatOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
]
```
- Configure ESLint
Create/update eslint config file (.eslintrc.js or .eslintrc.json) in your project folder, then fill it with :
```
module.exports = {
plugins: ['vue'], // enable vue plugin
extends: ['plugin:vue/essential', 'prettier'], // activate vue related rules
}
```