feat: router & vuex

Author: yyx990803

package.json

@@ -6,7 +6,11 @@
   ],
   "scripts": {
     "test": "jest --env node",
-    "lint": "eslint --fix packages/**/*.js packages/**/bin/* test/**/*.js"
+    "posttest": "yarn clean",
+    "lint": "eslint --fix packages/**/*.js packages/**/bin/* test/**/*.js",
+    "clean": "node scripts/cleanTestDir.js",
+    "sync": "node scripts/syncDeps.js",
+    "boot": "node scripts/bootstrap.js"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

packages/@vue/cli-service/generator/index.js

@@ -1,6 +1,6 @@
-module.exports = (generatorAPI, options) => {
-  generatorAPI.render('./template')
-  generatorAPI.extendPackage({
+module.exports = (api, options) => {
+  api.render('./template')
+  api.extendPackage({
     scripts: {
       'serve': 'vue-cli-service serve' + (
         // only auto open browser on MacOS where applescript
@@ -28,4 +28,20 @@ module.exports = (generatorAPI, options) => {
       'not ie <= 8'
     ]
   })
+
+  if (options.router) {
+    api.extendPackage({
+      dependencies: {
+        'vue-router': '^3.0.1'
+      }
+    })
+  }
+
+  if (options.vuex) {
+    api.extendPackage({
+      dependencies: {
+        vuex: '^3.0.1'
+      }
+    })
+  }
 }

packages/@vue/cli-service/generator/template/src/App.vue

@@ -1,3 +1,4 @@
+<%_ if (!options.router) { _%>
 <template>
   <div id="app">
     <img src="./assets/logo.png">
@@ -15,6 +16,17 @@ export default {
   }
 }
 </script>
+<%_ } else { _%>
+<template>
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view/>
+  </div>
+</template>
+<%_ } _%>
 
 <style>
 #app {
@@ -23,6 +35,23 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  <%_ if (!options.router) { _%>
   margin-top: 60px;
+  <%_ } _%>
+}
+
+<%_ if (options.router) { _%>
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
 }
+<%_ } _%>
 </style>

packages/@vue/cli-service/generator/template/src/main.js

@@ -1,8 +1,20 @@
 import Vue from 'vue'
 import App from './App.vue'
+<%_ if (options.router) { _%>
+import router from './router'
+<%_ } _%>
+<%_ if (options.vuex) { _%>
+import store from './store'
+<%_ } _%>
 
 Vue.config.productionTip = false
 
 new Vue({
+  <%_ if (options.router) { _%>
+  router,
+  <%_ } _%>
+  <%_ if (options.vuex) { _%>
+  store,
+  <%_ } _%>
   render: h => h(App)
 }).$mount('#app')

packages/@vue/cli-service/generator/template/src/router.js

@@ -0,0 +1,23 @@
+<%_ if (options.router) { _%>
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+import About from './views/About.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: About
+    }
+  ]
+})
+<%_ } _%>

packages/@vue/cli-service/generator/template/src/store.js

@@ -0,0 +1,18 @@
+<%_ if (options.vuex) { _%>
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  }
+})
+<%_ } _%>

packages/@vue/cli-service/generator/template/src/views/About.vue

@@ -0,0 +1,7 @@
+<%_ if (options.router) { _%>
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+<%_ } _%>

packages/@vue/cli-service/generator/template/src/views/Home.vue

@@ -0,0 +1,20 @@
+<%_ if (options.router) { _%>
+<template>
+  <div class="home">
+    <img src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'home',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+<%_ } _%>

packages/@vue/cli-service/package.json

@@ -58,7 +58,9 @@
     "yorkie": "^1.0.2"
   },
   "devDependencies": {
-    "vue": "^2.5.13"
+    "vue": "^2.5.13",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "publishConfig": {
     "access": "public"

packages/@vue/cli/__tests__/options.spec.js

@@ -59,19 +59,12 @@ test('save options (merge)', () => {
       bar: { b: 2 }
     }
   })
+})
 
-  // deep merge
-  saveOptions({
-    plugins: {
-      foo: { a: 2, c: 3 },
-      bar: { d: 4 }
-    }
-  }, true)
-  expect(loadOptions()).toEqual({
-    packageManager: 'yarn',
-    plugins: {
-      foo: { a: 2, c: 3 },
-      bar: { b: 2, d: 4 }
-    }
-  })
+test('save options (replace)', () => {
+  const toSave = {
+    foo: 'bar'
+  }
+  saveOptions(toSave, true)
+  expect(loadOptions()).toEqual(toSave)
 })