https://github.com/octref/veturpack

Project based on vuepack to try Vetur.
https://github.com/octref/veturpack

Last synced: about 2 months ago
JSON representation

Project based on vuepack to try Vetur.

• Host: GitHub
• URL: https://github.com/octref/veturpack
• Owner: octref
• Created: 2017-06-16T07:44:40.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-07-22T00:12:27.000Z (about 3 years ago)
• Last Synced: 2024-06-28T14:36:18.895Z (3 months ago)
• Language: Vue
• Homepage:
• Size: 209 KB
• Stars: 423
• Watchers: 14
• Forks: 87
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Veturpack

A Vue project with minimal setup and dependencies for trying out [Vetur](https://github.com/vuejs/vetur)'s features. Also used for creating minimal, reproducible case for Vetur bug reports.

## Usage

- Install latest version of [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)

- `git clone [email protected]:octref/veturpack.git`

- `cd veturpack`

- `yarn install`

- `code .`

## Things to Try

Try all features below in `src/Test.vue`. You can read more about these features in Vetur's documentation: https://vuejs.github.io/vetur/.

- Do an emmet expansion on the html template. For example, type `div` and then tab.

- Complete on ``. Read more about this feature in [Framework Support](https://vuejs.github.io/vetur/framework.html).

- Hover over any tags such as `
` or ``. You'll see the tag's description.

- Because of `"vetur.experimental.templateInterpolationService": true` in `.vscode/settings.json`, you should see an error on `{{ fo }}` in the template section. Change it to `foo` to fix the error.

- Delete the `foo` in `{{ foo }}`. Type `b`. You should see completion of `bar`.

- In script section, try `_.`. You should see all [lodash](https://lodash.com)'s methods.

- Install another library with types, such as [jquery](https://api.jquery.com/). `yarn add -S jquery && yarn add -D @types/jquery`. After importing it with `import * as $ from 'jquery'`, you should get `$.` completions.

- Setup [eslint-plugin-vue](https://eslint.vuejs.org/user-guide/) with a `.eslintrc`. Set `"vetur.validation.template": false` to turn off Vetur's builtin ESLint linter. You'll get ESLint warnings now.

- In `` section, add `//@ts-check`. Write some type-unsafe code, such as `let a = 'a'; a = 5`. You'll see an error.

- F1 -> Format the document. You can [configure](https://vuejs.github.io/vetur/formatting.html) the formatters and their settings as well.

- In `.prettierrc.json`, set `"singleQuote": true` and format again.

- Type `<style scss` and tab to choose a snippet. You should get a SCSS section setup. These snippets are [customizable](https://vuejs.github.io/vetur/snippet.html). 

- Try some CSS completions in the `<style lang="scss">` section.

- Make some errors in the Vue file and run [vti](https://vuejs.github.io/vetur/vti.html) — you should see all diagnostics printed on CLI.


## Next

For a more comprehensive setup, refer to https://github.com/chrisvfritz/vue-enterprise-boilerplate.

## License

MIT