update

README.md

-# vue-cli3多页开发插件
+# vue-cli3多页开发插件TS版
+
+### 安装插件
+vue add ts-multi-pages
 
 ### 新建页面
 npm run add [page]

commands/add.js

@@ -8,7 +8,7 @@ const resolve = require('resolve')
 const path = require('path')
 const chalk = require('chalk')
 const inquirer = require('inquirer')
-const baseDir = resolve.sync('vue-cli-plugin-multi-pages', { basedir: process.cwd() })
+const baseDir = resolve.sync('vue-cli-plugin-ts-multi-pages', { basedir: process.cwd() })
 const source = path.resolve(path.dirname(baseDir), 'generator/template/**')
 module.exports = (api, opts)=>{
     api.registerCommand('add', {
@@ -17,8 +17,11 @@ module.exports = (api, opts)=>{
     }, async function serve (args) {
         const entry = args._[0]
         if(entry){
+            if(!fs.existsSync(api.resolve('./src/pages'))){
+              fs.mkdirSync(api.resolve('./src/pages'))
+            }
             const entryPath = api.resolve(`./src/pages/${entry}`)
-            if( fs.existsSync(api.resolve(entryPath))){
+            if( fs.existsSync(entryPath)){
                 console.log(chalk.red(`${entry}页面已存在，请重新填写页面！`))
                 return
             } 
@@ -35,9 +38,9 @@ module.exports = (api, opts)=>{
                 copy(source, api.resolve(entryPath), function(err, files) {
                     if (err) throw err;
                     // 修改html 
-                    modifyFile(`${entryPath}/main.html`,{title:answers.name},'string')
-                    modifyFile(`${entryPath}/main.ts`,{name:entry})
-                    modifyFile(`${entryPath}/views/Main.vue`,{title:answers.name})
+                    modifyFile(`${entryPath}/index.html`,{title:answers.name},'string')
+                    modifyFile(`${entryPath}/index.ts`,{name:entry})
+                    modifyFile(`${entryPath}/views/App.vue`,{title:answers.name})
                     console.log(chalk.green(`页面${entry}创建成功！`))
                 });
               }

commands/build.js

@@ -14,6 +14,9 @@ const buildModes = {
   wc: 'web component',
   'wc-async': 'web component (async)'
 }
+if(!fs.existsSync(path.resolve('./src/pages'))){
+  fs.mkdirSync(path.resolve('./src/pages'))
+}
 const allPages = fs.readdirSync(path.resolve('./src/pages/')).filter(page=>(page!=='.DS_Store' && page !=='common'))
 const modifyConfig = (config, fn) => {
   if (Array.isArray(config)) {
@@ -49,9 +52,21 @@ module.exports = (api, options) => {
     }
     
     if(!args._[0]){
-      console.log(chalk.red(`npm run build [page] 缺少页面参数: page`))
+      
+      const stat = fs.statSync(`${process.cwd()}/src/pages`)
+      if(stat.isDirectory()){
+        const dirs = fs.readdirSync(`${process.cwd()}/src/pages`)
+        const commonIndex = dirs.indexOf('common')
+        if(commonIndex>=0){
+          dirs.splice(commonIndex,1)
+        }
+        args._[0] = dirs.join('+')
+      } else {
+        console.log(chalk.red('找不到需要打包的目录pages'))
         return
       }
+    }
+    
     const pageData =  getPages(args)
     if(pageData.length===0){
       console.log(chalk.red(`你所编译的页面不存在`))
@@ -185,12 +200,12 @@ async function build (args, api, options) {
   if (entry) {
     const pagePath = "./src/pages/" + entry
     webpackConfig.entry={}
-    webpackConfig.entry[entry] = pagePath + '/main.ts'
+    webpackConfig.entry[entry] = pagePath + '/index.ts'
     webpackConfig.output.publicPath = ''
     webpackConfig.output.path = targetDir
     for(let item of webpackConfig.plugins) {
       if (item.options && item.options.template) {
-        item.options.template= pagePath + '/main.html'
+        item.options.template= pagePath + '/index.html'
         item.options.header = headerTpl
         item.options.footer = footerTpl
       }
@@ -199,7 +214,7 @@ async function build (args, api, options) {
       if(item.test.toString().indexOf('png|jp')>=0){
         for (const itemChild of item.use) {
           if(itemChild.options){
-            itemChild.options.publicPath = itemChild.options.publicPath.indexOf(entry)<0?itemChild.options.publicPath+'/'+entry:itemChild.options.publicPath
+            itemChild.options.publicPath = (itemChild.options.publicPath||'/').indexOf(entry)<0?itemChild.options.publicPath+'/'+entry:itemChild.options.publicPath
             break
           }
         }
@@ -295,4 +310,3 @@ async function build (args, api, options) {
 module.exports.defaultModes = {
   build: 'production'
 }
-  
\ No newline at end of file

commands/serve.js

@@ -76,11 +76,11 @@ const {
       if (entry && entry.indexOf('+')<0 && allPages.indexOf(entry)>=0) {
         const pagePath = "./src/pages/" + entry
         webpackConfig.entry = {
-          app: pagePath + '/main' 
+          app: pagePath + '/index' 
         }
         for(let item of webpackConfig.plugins) {
             if (item.options && item.options.template) {
-                item.options.template = pagePath + '/main.html'
+                item.options.template = pagePath + '/index.html'
                 item.options.header = headerTpl
                 item.options.footer = footerTpl
             }
@@ -334,7 +334,7 @@ const {
       }))
     return [
       ...multiPageRewrites,
-      { from: /./, to: path.posix.join(baseUrl, 'main.html') }
+      { from: /./, to: path.posix.join(baseUrl, 'index.html') }
     ]
   }
   

generator/template/index.ts

+import Vue from "vue";
+import App from "./views/App.vue";
+// import axios from 'axios';
+// import VueAxios from 'vue-axios';
+
+// const win = window as any;
+// 全局设置cors cookie
+// axios.defaults.withCredentials = true;
+// axios.defaults.headers['Content-Type'] = 'application/json';
+// Vue.use(VueAxios, axios);
+// 阻止启动生产消息
+Vue.config.productionTip = false;
+
+new Vue({
+  name: "<%= name %>",
+  components: {
+    App
+  },
+  created() {
+    console.log("app created");
+  },
+  methods: {},
+  render: h => h(App)
+}).$mount("#app");

generator/template/main.ts

-import Vue from 'vue';
-import Main from './views/Main.vue';
-import axios from 'axios';
-import VueAxios from 'vue-axios';
-import '@/utils/common';
-
-const win = window as any;
-// 全局设置cors cookie
-axios.defaults.withCredentials = true;
-axios.defaults.headers['Content-Type'] = 'application/json';
-Vue.use(VueAxios, axios);
-// 阻止启动生产消息
-Vue.config.productionTip = false;
-
-new Vue({
-  name: '<%= name %>',
-  components: {
-    Main,
-  },
-  created() {
-  },
-  methods: {
-  },
-  render: (h) => h(Main),
-}).$mount('#app');

generator/template/views/Main.vue → generator/template/views/App.vue

 <template>
   <div class="container">
-      <HeaderBar><%= title %></HeaderBar>
+      <%= title %>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import HeaderBar from '@/components/headerBar/index.vue';
+import { Component, Vue } from 'vue-property-decorator';
 @Component({
-  components: {
-    HeaderBar,
-  },
+  components: {},
 })
-export default class Main extends Vue {
+export default class App extends Vue {
   // 生命周期钩子
   public created() {
     console.log('created')
@@ -24,5 +21,4 @@ export default class Main extends Vue {
 </script>
 
 <style lang="scss" >
-@import 'sassHelper';
 </style>

package.json

 {
-  "name": "vue-cli-plugin-multi-pages",
-  "version": "1.1.3",
-  "description": "vue-cli3多页开发插件",
+  "name": "vue-cli-plugin-ts-multi-pages",
+  "version": "1.1.8",
+  "description": "vue-cli3多页开发插件TS版",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"