feat: add support vue3

lgwebdream · Aug 16, 2021 · be4ad72 · be4ad72
1 parent 58eec77
commit be4ad72
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 6 deletions.
diff --git a/build/template/vue3/app.js b/build/template/vue3/app.js
@@ -0,0 +1,52 @@
+module.exports = ({ isTypescript, ui }) => {
+  let text = '';
+  if (ui === 'element') {
+    text += `<template>
+  <div>
+    <el-button>{{message}}</el-button>
+  </div>
+</template>
+`;
+  } else {
+    text += `<template>
+  <div>
+    <h1>{{message}}</h1>
+  </div>
+</template>
+`;
+  }
+  if (isTypescript) {
+    text += `
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+export default defineComponent({
+  name: 'App',
+  setup: () => {
+    const count = ref(0)
+    return { count }
+  }
+})
+</script>`;
+  } else {
+    text += `
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  data: function() {
+    return {
+      message: 'hello world'
+    }
+  },
+});
+</script>
+`;
+  }
+
+  return {
+    text,
+    file: 'App.vue',
+  };
+};
diff --git a/build/template/vue3/index.js b/build/template/vue3/index.js
@@ -0,0 +1,19 @@
+const indexJs = require('./indexJs');
+const indexHtml = require('./indexHtml');
+const app = require('./app');
+
+module.exports = ({
+  ui,
+  projectName,
+  main,
+  buildTool,
+  isTypescript,
+  isSass,
+  isLess,
+}) => {
+  return [
+    indexHtml({ projectName, buildTool, main, isTypescript }),
+    indexJs({ ui, isSass, isLess }),
+    app({ ui, isTypescript }),
+  ];
+};
diff --git a/build/template/vue3/indexHtml.js b/build/template/vue3/indexHtml.js
@@ -0,0 +1,21 @@
+const { getScript } = require('../utils');
+
+module.exports = ({ projectName, buildTool, main, isTypescript }) => {
+  const isWebpack =
+    buildTool !== 'webpack'
+      ? `\n${getScript({ buildTool, main, isTypescript })}`
+      : '';
+  return {
+    file: 'index.html',
+    text: `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>${projectName}</title>  ${isWebpack}
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>`,
+  };
+};
diff --git a/build/template/vue3/indexJs.js b/build/template/vue3/indexJs.js
@@ -0,0 +1,37 @@
+const { sassName, lessName } = require('../../config');
+
+module.exports = ({ ui, isSass, isLess }) => {
+  let text = `import Vue from 'vue';
+import App from './App.vue';
+`;
+
+  if (ui === 'element') {
+    text += `
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+`;
+  }
+  if (isSass) {
+    text += `import './${sassName}';
+`;
+  }
+  if (isLess) {
+    text += `import './${lessName}';
+`;
+  }
+  if (ui === 'element') {
+    text += `
+Vue.use(ElementUI);
+`;
+  }
+
+  text += `
+new Vue({
+  el: '#app',
+  render: h => h(App),
+});`;
+  return {
+    text,
+    file: 'index.js',
+  };
+};
diff --git a/build/utils.js b/build/utils.js
@@ -3,7 +3,8 @@ const {
   devDependencies: devDependenciesConfig,
 } = require('../dependencies.config');
 const reactSrcTemplate = require('./template/react17');
-const vueSrcTemplate = require('./template/vue2');
+const vue2SrcTemplate = require('./template/vue2');
+const vue3SrcTemplate = require('./template/vue3');
 const emptySrcTemplate = require('./template/empty');
 const getStyles = require('./template/style');
 
@@ -83,7 +84,8 @@ module.exports.getSrcTemplate = ({
   isLess,
 }) => {
   const srcFilesMap = {
-    vue: vueSrcTemplate,
+    vue2: vue2SrcTemplate,
+    vue3: vue3SrcTemplate,
     react: reactSrcTemplate,
   };
   const scripts = (srcFilesMap[main] || emptySrcTemplate)({

diff --git a/build/vite/utils.js b/build/vite/utils.js
@@ -59,7 +59,7 @@ module.exports = {
     const exportTemplateArr = [];
     let importExportTemplate = '';
     let scriptTemplate = '';
-    if (main === 'vue') {
+    if (main === 'vue2') {
       result.plugins = {
         createVuePlugin: 'vite-plugin-vue2',
       };
@@ -75,6 +75,23 @@ module.exports = {
         root : './src',
         plugins: [${exportTemplateArr}],
       };`;
+    } else if (main === 'vue3') {
+      result.plugins = {
+        vue: '@vitejs/plugin-vue',
+      };
+      const pluginArr = result.plugins;
+      // eslint-disable-next-line guard-for-in
+      for (const key in pluginArr) {
+        importExportTemplate += `import {${key}} from '${pluginArr[key]}';
+        `;
+        exportTemplateArr.push(`${key}()`);
+      }
+      ViteConfigTemplate = `import { defineConfig } from 'vite';
+      ${importExportTemplate}
+export default defineConfig({
+  root: './src',
+  plugins: [vue()]
+})`;
     } else if (main === 'react') {
       result.plugins = {
         reactRefresh: '@vitejs/plugin-react-refresh',
@@ -130,9 +147,6 @@ export default defineConfig({
     } else if (ui === 'element') {
       result.packageOptions.push('element-ui');
     }
-    // ViteConfigTemplate=  uglifyjs({
-    //   ViteConfigTemplate
-    // }, )
     return ViteConfigTemplate;
   },
 };