language-vuejs

atom vuejs 开发必用插件 by youngjuning
youngjuning
6,257
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

巨人的肩膀