Project style and component style

// No matter the component create by yourself, or by library/framework. Component should have itself style even in other projects. This kind of component like modal, dropdown, table, alert, datepicker..etc. If you create your own components. Be careful of mixing the project style into your component. (same to js config)

Global project style setting

It’s one of solutions to use common style in your project:

// in global stylus setting, you may have variable.stylus, extend,stylus..etc.

// in App.vue, use it without "scoped"

<style lang="stylus">

@import '~styl/index'

</style> // use "scoped" vue way to have css scoped for all components.

<style lang="stylus" scoped>

@import '~styl/variables'

#app {

You may face changing component style out of component, but it’s already rendor with data-xxxx.

You can change it by “>>>”:

// in App.vue

<style lang="stylus" scoped>

>>> .i-modal {

...

}

Class setting

Set class name directly to normal html tag and use js to config vue component.

// assign it's class name directly to normal html tag.

<button

class="btn btn-round btn-primary"

:disabled="isUserExpired()"

@click="handleEditItem()">

{{ $t('button.update') }}

</button> // assign it's class name setting to vue component(If the component create by yourself).

// some plugin maybe control style by js directly

<i-modal

v-if="exampleModal.options.shouldShow"

:className="exampleModal.className"

:options="exampleModal.options">

</i-modal>

Should style control by js or css?

Complex way use js, easy for css. Still, some animation must control it directly.

// control in js

<i-icon

:name="socialIcon.name"

:color="socialIcon.color"

:width="socialIcon.width"

:height="socialIcon.height">

</i-icon>

// replace this to..

<i-icon

:name="socialIcon.name"

:className="socialIcon.className">

</i-icon>

// you may have default icon style, and setting your project style by class.

Transation

All the principle is same, if the animation is complex, or can be reuse even combine with complex rule. You should use vue transation. If you just want a fade in after two second. Just use css directly. Try to use js to config and control style by css.

// html

<transition :name="animationType">

<keep-alive>

<router-view id="view"></router-view>

</keep-alive>

</transition> // js

this.animationType =

animationType === 1 ? 'slide-left' :

animationType === 2 ? 'slide-right' :

animationType === 3 ? 'slide-top' :

animationType === 4 ? 'slide-bottom' : ''

There are some transation example in vue official website, and you can extend it by yourself or just use some library.

Conclusion

It’s a good experience to use vue to develop appplication. Vue become more powerful now! I wish that vue will get more attention in any workplace. Welcome to discuss the best way to develop vue project. Thanks for reading this post. :)

Thanks