• Packages
  • Themes
  • Documentation
  • Blog
  • Discuss
Sign in

language-vuejs

atom vuejs 开发必用插件 by youngjuning
  • #vuejs
  • #vue
  • #vue-router
  • #vuex
  • #axios
youngjuning
6,257
2
  • Repo
  • Bugs
  • Versions
  • License
Flag as spam or malicious

Vue component support in Atom

Adds syntax highlighting and snippets to Vue component files in Atom.

Originally converted from vuejs/vue-syntax-highlight.

Working with SCSS/Sass

Since vue-loader redirects language=x to loader style!css!x and sass-loader is using SCSS as default, you need to remap them in webpack.config.js:

vue: {
  loaders: {
    sass: 'style!css!sass?indentedSyntax',
    scss: 'style!css!sass'
  }
}

This is so that this package can support both old Sass and new SCSS. Refer to hedefalk/atom-vue#5 and the official solution for more info.

Usage

Just press TAB or ENTER to unfold a snippet

Single file template

template          <!--Single file component template-->

HTML snippets

router-view       <!--Vuejs router-view component-->
router-link       <!--Vuejs router-link component with named route-->
component         <!--Include component in HTML-->
i18n              <!--Include internationalization component-->

HTML tags

v-for             <!--Vuejs binding for list rendering-->
v-if              <!--Vuejs binding for if conditional rendering-->
v-else-if         <!--Vuejs binding for else if rendering-->
v-else            <!--Vuejs binding for else conditional rendering-->
v-show            <!--Vuejs binding for show conditional rendering-->
v-model           <!--Vuejs binding for model binding-->

Javascript

beforeCreate      // Vuejs instance lifecycle hook for beforeCreate
created           // Vuejs instance lifecycle hook for created
beforeMount       // Vuejs instance lifecycle hook for beforeMount
mounted           // Vuejs instance lifecycle hook for mounted
beforeUpdate      // Vuejs instance lifecycle hook for beforeUpdate
updated           // Vuejs instance lifecycle hook for updated
beforeUpdate      // Vuejs instance lifecycle hook for beforeUpdate
updated           // Vuejs instance lifecycle hook for updated
beforeDestroy     // Vuejs instance lifecycle hook for beforeDestroy
destroyed         // Vuejs instance lifecycle hook for destroyed
vwatch            // Vuejs way to watch instance properties
methods           // Vuejs methods event handlers
components        // Use it when you want to add child components to parent component.
props             // Vuejs way to pass data to child components
vprops            // Vuejs way to pass data to child components with validation
vcomputed         // Vuejs computed property

Vuex

vstore            // Vuex template for a complete store with state,getters,actions and mutations
vmut              // Vuex mutation snippet
vact              // Vuex action snippet
vget              // Vuex getter snippet
vtype             // Vuex constant type snipppet

巨人的肩膀

  • language-vue
  • vuejs2-snippets
  • vue2-autocomplete

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

  • Terms of Use
  • Privacy
  • Code of Conduct
  • Releases
  • FAQ
  • Contact
with by