Vue.jsの今後と次世代Web開発について

38bee248082f6071230de65e9d74a944?s=47 kazupon
March 25, 2018

 Vue.jsの今後と次世代Web開発について

MANABIYA
2018-03-24 (sat) Webセッション 3時限目の発表内容
https://manabiya.tech

38bee248082f6071230de65e9d74a944?s=128

kazupon

March 25, 2018
Tweet

Transcript

  1. 3.

    kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n,

    vuejs/jp.vuejs.org maintainer storybook vue support member CUUSOO SYSTEM CTO @kazu_pon kazupon
  2. 18.
  3. 23.

  4. 27.

    • Core • Vue Test Utils • Vue CLI 3.0

    • eslint-plugin-vue 4.0 • vue-component-compiler • Style Guide • Cookbook Vue Project Roadmap https://github.com/vuejs/roadmap
  5. 32.
  6. 49.

    ҎԼͷ՝୊ղܾΛ໨త • SFCίϯύΠϧϩδοΫͷॏෳͷআڈ • ϝϯςφϯεͷվળ vue-loader rollup-plugin-vue vueify parse /

    compile parse / compile parse / compile vue-template- compiler vue-template- compiler vue-template- compiler
  7. 56.
  8. 61.

    • ϦϦʔεܭը: 2018೥4݄ or 5݄ • Vue 3.0 ީิ (֬ఆͰ͸ͳ͍Ͱ͢)

    • APIͷେ͖ͳഁյతมߋ͸͠ͳ͍ํ਑ • 2.x ܥͱฒߦͯ͠όʔδϣϯ؅ཧ 2.x-next
  9. 72.

    ͜Εʹର͢ΔιϦϡʔγϣϯ • Vue CLI • ެࣜςϯϓϨʔτͷఏڙ npm install -g vue-cli

    vue-cli init webpack my-app cd my-app npm install npm run dev
  10. 74.
  11. 81.

    ϓϦηοτϞσϧ • ~/.vuerc ʹ࣭໰߲ ໨ɺπʔϧͷઃఆɺ ϓϥάΠϯͳͲͷ ৘ใ͕อଘ͞ΕΔ • ϦϞʔτͷϓϦηο τ΋ࢀরՄೳ

    { "useConfigFiles": true, "router": true, "vuex": true, "cssPreprocessor": "sass", "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "version": "^3.0.0", "config": "airbnb", "lintOn": ["save", "commit"] } } }
  12. 82.

    σϑΥϧτθϩίϯϑΟά • webpackɺbabelɺ eslintͳͲͷઃఆ͸ ͳΔ΂͘Ӆṭ͞Ε ΔΑ͏ʹͳ͍ͬͯΔ • .vue ϑΝΠϧʹΑ ΔϓϩτλΠϐϯ

    ά΋ैདྷͲ͓Γఏ ڙ { // package.json "eslintConfig": { "root": true, "extends": [ "plugin:vue/essential", "eslint:recommended" ] }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
  13. 83.

    ઃఆͷॊೈੑ • vue.config.jsʹΑ ΔઃఆͷΧελϚ ΠζΛఏڙ • APIϓϩΩγ • webpack •

    ͳͲ… module.exports = { // ... // webpackͷΧελϚΠζ chainWebpack: () => {}, configureWebpack: () => {}, // ։ൃαʔόͷΧελϚΠζ devServer: { proxy: null, before: app => {} }, // Vue CLI ϓϥάΠϯͷΧελϚΠζ pluginOptions: { // ... } }
  14. 84.

    ϓϥάΠϯʹΑΔ֦ுੑ • Service • Generator • Prompt . !"" README.md

    !"" generator.js # generator (optional) !"" prompts.js # prompts file (optional) !"" index.js # service plugin #"" package.json
  15. 95.
  16. 104.

    • 2018೥5݄։࠵ܾఆʂ • 1 ηογϣϯ(Nuxt) + 8 LT Λ༧ఆ •

    ۙʑΞφ΢ϯε༧ఆʂ Vue.js Tokyo v-meetup #7