feat: update default component content

vuejs · Feb 4, 2018 · 59f5913 · 59f5913
1 parent 691cfa2
commit 59f5913
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 28 deletions.
diff --git a/packages/@vue/cli-plugin-typescript/generator/template/src/components/HelloWorld.vue b/packages/@vue/cli-plugin-typescript/generator/template/src/components/HelloWorld.vue
@@ -1,20 +1,30 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
+    <p>
+      For guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://github.com/vuejs/vue-cli/tree/dev/docs" target="_blank">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <%_ for (plugin of plugins) { _%>
+      <li><a href="<%- plugin.link %>" target="_blank"><%- plugin.name %></a></li>
+      <%_ } _%>
+    </ul>
+    <h3>Essential Links</h3>
     <ul>
       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
       <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
     </ul>
-    <h2>Ecosystem</h2>
+    <h3>Ecosystem</h3>
     <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://router.vuejs.org/en/essentials/getting-started.html" target="_blank">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org/en/intro.html" target="_blank">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org/en" target="_blank">vue-loader</a></li>
       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
     </ul>
   </div>
@@ -42,8 +52,8 @@ export default class HelloWorld extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1, h2 {
-  font-weight: normal;
+h3 {
+  margin: 40px 0 0;
 }
 ul {
   list-style-type: none;

diff --git a/packages/@vue/cli-service/__tests__/buildLib.spec.js b/packages/@vue/cli-service/__tests__/buildLib.spec.js
@@ -39,10 +39,10 @@ test('build as lib', async () => {
   })
   expect(h1Text).toMatch('') // no props given
 
-  const h2Text = await page.evaluate(() => {
-    return document.querySelector('h2').textContent
+  const h3Text = await page.evaluate(() => {
+    return document.querySelector('h3').textContent
   })
-  expect(h2Text).toMatch('Essential Links')
+  expect(h3Text).toMatch('Installed CLI Plugins')
 })
 
 afterAll(async () => {

diff --git a/packages/@vue/cli-service/__tests__/buildWc.spec.js b/packages/@vue/cli-service/__tests__/buildWc.spec.js
@@ -47,10 +47,10 @@ test('build as wc', async () => {
   })
   expect(childStyleCount).toBe(1)
 
-  const h2Text = await page.evaluate(() => {
-    return document.querySelector('build-wc-hello-world').shadowRoot.querySelector('h2').textContent
+  const h3Text = await page.evaluate(() => {
+    return document.querySelector('build-wc-hello-world').shadowRoot.querySelector('h3').textContent
   })
-  expect(h2Text).toMatch('Essential Links')
+  expect(h3Text).toMatch('Installed CLI Plugins')
 })
 
 afterAll(async () => {

diff --git a/packages/@vue/cli-service/__tests__/buildWcAsync.spec.js b/packages/@vue/cli-service/__tests__/buildWcAsync.spec.js
@@ -53,10 +53,10 @@ test('build as wc in async mode', async () => {
   })
   expect(childStyleCount).toBe(1)
 
-  const h2Text = await page.evaluate(() => {
-    return document.querySelector('build-wc-async-hello-world').shadowRoot.querySelector('h2').textContent
+  const h3Text = await page.evaluate(() => {
+    return document.querySelector('build-wc-async-hello-world').shadowRoot.querySelector('h3').textContent
   })
-  expect(h2Text).toMatch('Essential Links')
+  expect(h3Text).toMatch('Installed CLI Plugins')
 })
 
 afterAll(async () => {

diff --git a/packages/@vue/cli-service/generator/index.js b/packages/@vue/cli-service/generator/index.js
@@ -1,5 +1,29 @@
+// get link for a 3rd party plugin.
+function getLink (id) {
+  const pkg = require(`${id}/package.json`)
+  return (
+    pkg.homepage ||
+    (pkg.repository && pkg.repository.url) ||
+    `https://www.npmjs.com/package/${id.replace(`/`, `%2F`)}`
+  )
+}
+
 module.exports = (api, options) => {
-  api.render('./template')
+  api.render('./template', {
+    plugins: api.generator.plugins
+      .filter(({ id }) => id !== `@vue/cli-service`)
+      .map(({ id }) => {
+        const name = id.replace(/^(@vue|vue-)\/cli-plugin-/, '')
+        const isOfficial = /^@vue/.test(id)
+        return {
+          name: name,
+          link: isOfficial
+            ? `https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-${name}`
+            : getLink(id)
+        }
+      })
+  })
+
   api.extendPackage({
     scripts: {
       'serve': 'vue-cli-service serve' + (

diff --git a/packages/@vue/cli-service/generator/template/src/components/HelloWorld.vue b/packages/@vue/cli-service/generator/template/src/components/HelloWorld.vue
@@ -1,20 +1,30 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
+    <p>
+      For guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://github.com/vuejs/vue-cli/tree/dev/docs" target="_blank">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <%_ for (plugin of plugins) { _%>
+      <li><a href="<%- plugin.link %>" target="_blank"><%- plugin.name %></a></li>
+      <%_ } _%>
+    </ul>
+    <h3>Essential Links</h3>
     <ul>
       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
       <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
     </ul>
-    <h2>Ecosystem</h2>
+    <h3>Ecosystem</h3>
     <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://router.vuejs.org/en/essentials/getting-started.html" target="_blank">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org/en/intro.html" target="_blank">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org/en" target="_blank">vue-loader</a></li>
       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
     </ul>
   </div>
@@ -31,8 +41,8 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1, h2 {
-  font-weight: normal;
+h3 {
+  margin: 40px 0 0;
 }
 ul {
   list-style-type: none;