# Initial Commit
# Create new npm project
- Create new project
npm init
| import { mount } from 'vue-test-utils' | |
| import { createRenderer } from 'vue-server-renderer' | |
| import MyComponent from './MyComponent.vue' | |
| const renderer = createRenderer() | |
| renderer.renderToString( | |
| mount(MyComponent).vm, | |
| (error, html) => { |
| <template> | |
| <h2 class="red">{{msg}}</h2> | |
| </template> | |
| <script> | |
| export default { | |
| data () { | |
| return { | |
| msg: 'Hello from Component A!' | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .group { | |
| display: block; | |
| margin: 0 15px 15px; |
| function aliasthat { | |
| if [ -n ${1} ]; then | |
| fc -e "sed -i -e \"s/^.*/echo alias $1=\\\"'\\\"\'&\'\\\"'\\\" >> ~\/.bash_alias/\"" | |
| . ~/.bash_alias | |
| fi | |
| } |
| // ----- Extracting Chunks ----- | |
| exports.entry['vendor/vue'] = ['vue', 'vuex', 'vue-resource', 'vue-router'] | |
| exports.entry['vendor/bootstrap'] = ['jquery', 'bootstrap', 'tether'] | |
| exports.entry['vendor/components'] = ['bootstrap-for-vue'] | |
| exports.entry['vendor/plugins'] = ['moment', 'sifter'] | |
| exports.entry['vendor/echo'] = ['pusher-js', 'laravel-echo', 'echo-for-vue'] | |
| exports.plugins.push( | |
| new webpack.optimize.CommonsChunkPlugin({ | |
| name: 'manifest' | |
| }), |
I hereby claim:
To claim this, I am signing this object:
| Feature | vue-loader | vueify | rollup-plugin-vue |
|---|---|---|---|
| Support for Vue 1.x | Version 8.x | Version 8.x | Version 2.x |
| Support for Vue 2.0 | Version 9.0+ | Version 9.0+ | Version 2.x |
| ES2015 | With buble-loader or babel-loader |
Preconfigured to use babel |
With rollup-plugin-buble or rollup-plugin-babel |
| Scoped CSS | ✓ | ✓ | - |
| CSS Modules | ✓ | ✓ | - |
| PostCSS | ✓ | ✓ | - |
| Hot Reload | ✓ | ✓ |
| Using rollup-plugin-vue |
| Create a module for vue component. |