Merge pull request #21 from bigmeow/master

Typescript支持以及相关demo

.eslintignore

@@ -1,5 +1,5 @@
 node_modules
-template
+templates
 test
 temp
 dist

README.md

@@ -5,15 +5,16 @@ Standard Tooling for Megalo Project Development
 
 | 包名 | 最新版本号 | 最后更新日期 | 包描述
 | ------ | ------ | ------ | ------ |
-| [@megalo/cli](./packages/@megalo/cli) | 1.0.0-alpha.1 | 2019/03/05 | 生成标准的megalo项目 |
-| [@megalo/cli-service](./packages/@megalo/cli-service) | 1.0.0-alpha.10 | 2019/03/18 | megalo项目的webpack零配置插件
+| [@megalo/cli](./packages/@megalo/cli) | 1.0.0-alpha.3 | 2019/03/29 | 生成标准的megalo项目 |
+| [@megalo/cli-service](./packages/@megalo/cli-service) | 1.0.0-alpha.15 | 2019/03/29 | megalo项目的webpack零配置插件
 | [@megalo/entry](./packages/@megalo/entry) | 0.1.2 | 2019/03/01 | 读取入口文件的webpack插件（未来可能废弃，交由megalo-aot处理） |
-| [@megalo/babel-preset-app](./packages/@megalo/babel-preset-app) | 1.0.0-alpha.1 | 2019/03/04 | 包装脚手架babel相关的配置 |
+| [@megalo/babel-preset-app](./packages/@megalo/babel-preset-app) | 1.0.0-alpha.3 | 2019/03/25 | 包装脚手架babel相关的配置 |
 
 ## 其他相关包
 | 包名 | 最新版本号 | 最后更新日期 | 包描述
 | ------ | ------ | ------ | ------ |
 | [@megalo/eslint-config-standard](https://github.com/megalojs/eslint-config-standard) | 1.0.0 | 2019/03/21 | eslint-config-standard for megalo project |
+| [@megalo/eslint-config-typescript](https://github.com/megalojs/eslint-config-typescript) | 1.0.0-alpha.1 | 2019/03/25 | eslint-config-typescript for magolo-cli |
 
 
 > 注： alpha 为内部开发测试版本，请勿在生产环境中使用

example/project01/package.json

@@ -17,12 +17,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@megalo/babel-preset-app": "^1.0.0-alpha.1",
-    "@megalo/cli-service": "^1.0.0-alpha.8",
-    "@megalo/entry": "^0.1.2",
-    "@megalo/eslint-config-standard": "^1.0.0-alpha.1",
+    "@megalo/babel-preset-app": "latest",
+    "@megalo/cli-service": "latest",
+    "@megalo/entry": "latest",
+    "@megalo/eslint-config-standard": "latest",
     "@megalo/target": "0.5.7",
     "@megalo/template-compiler": "^0.8.0",
+    "eslint": "^5.8.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0"
   },

example/project02/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    '@megalo/standard',
+    '@megalo/typescript'
+  ]
+}

packages/@megalo/cli/template/README → example/project02/README.md

@@ -1,12 +1,12 @@
-# <%- projectName %>
+# ts
 
 ## 描述
 
-<%- description %>
+a megalo project
 
 ## 作者
 
-<%- author %> <<%- email %>>
+bigMeow <[email protected]>
 
 ## 运行
 

example/project02/megalo.config.js

@@ -0,0 +1,43 @@
+module.exports = {
+  // 构件生产模式时是否生成source map（仅在process.env.NODE_ENV === 'production' 时该选项生效）
+  productionSourceMap: true,
+
+  // 开启eslint格式化代码
+  lintOnSave: true,
+
+  configureWebpack: config => {
+    // 你可以在这里粗放的修改webpack的配置并返回
+    console.log('configureWebpack执行了')
+    return config
+  },
+  chainWebpack: chainConfig => {
+    // 你可以在这里通过 https://github.com/neutrinojs/webpack-chain 来精细的修改webpack配置
+
+
+      console.log('chainWebpack执行了')
+  },
+  // 原生小程序组件存放目录，默认为src/native
+  // 如果你有多个平台的原生组件，你应当在此目录下再新建几个子文件夹，我们约定，子文件夹名和平台的名字一致:
+  // 微信小程序组件则命名为 'wechat'，支付宝为'alipay', 百度为 'swan'
+  // 如果只有一个平台，则无需再新建子文件夹
+  nativeDir: '/src/native',
+
+  css: {
+    loaderOptions: {
+      css: {
+        // https://github.com/webpack-contrib/css-loader#options
+      },
+      less: {
+        // https://github.com/webpack-contrib/less-loader
+      },
+      sass: {
+        // https://github.com/webpack-contrib/sass-loader
+      },
+      stylus: {
+        // https://github.com/shama/stylus-loader
+      },
+        // https://github.com/megalojs/megalo-px2rpx-loader
+      px2rpx: false
+    }
+  }
+}

example/project02/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "ts",
+  "version": "1.0.0",
+  "description": "a megalo project",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "build:wechat": "megalo-cli-service build",
+    "build:alipay": "megalo-cli-service build --platform alipay",
+    "build:swan": "megalo-cli-service build --platform swan",
+    "dev:alipay": "megalo-cli-service serve --platform alipay",
+    "dev:swan": "megalo-cli-service serve --platform swan",
+    "dev:wechat": "megalo-cli-service serve",
+    "lint": "eslint --fix --ext .js,.vue,.ts src"
+  },
+  "author": "bigMeow <[email protected]>",
+  "license": "ISC",
+  "babel": {
+    "presets": [
+      "@megalo/app"
+    ]
+  },
+  "devDependencies": {
+    "@megalo/babel-preset-app": "latest",
+    "@megalo/cli-service": "latest",
+    "@megalo/eslint-config-standard": "latest",
+    "@megalo/eslint-config-typescript": "latest",
+    "@megalo/target": "0.7.0",
+    "@megalo/template-compiler": "^0.9.1-0",
+    "@types/node": "^11.11.4",
+    "eslint": "^5.8.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "typescript": "^3.3.4000",
+    "vue-property-decorator": "^7.3.0"
+  },
+  "dependencies": {
+    "@megalo/vhtml-plugin": "^0.1.2",
+    "megalo": "^0.9.1-0",
+    "octoparse": "^0.3.2"
+  }
+}

example/project02/src/App.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+// https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
+Component.registerHooks([
+  'onLaunch', // 初始化
+  'onShow', // 当小程序启动，或从后台进入前台显示
+  'onHide', // 当小程序从前台进入后台
+  'onError', // 错误监听函数
+  'onPageNotFound', // 页面不存在监听函数
+  'globalData'
+])
+
+@Component
+class App extends Vue {
+  onLaunch (options) {
+    // Do something initial when launch.
+    console.log('App onLaunch, env文件自定义的环境变量VUE_APP_TEST值:', process.env.VUE_APP_TEST)
+  }
+
+  onShow (options) {
+    // Do something when show.
+    console.log('App onShow')
+  }
+
+  onHide () {
+    // Do something when hide.
+    console.log('App onHide')
+  }
+
+  onError (msg) {
+    console.log('App onError')
+    console.log(msg)
+  }
+
+  globalData () {
+    return {
+      a: 'I am global data'
+    }
+  }
+}
+
+export default App
+</script>

example/project02/src/components/HelloWorld.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="hello">
+    <h1 :style="'color:'+color">{{ msg }}</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Prop, Component } from 'vue-property-decorator'
+
+@Component
+export default class HelloWorld extends Vue {
+  @Prop(String) color
+  @Prop({ default: 'Welcome to Megalo' }) msg
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .hello{
+    font-size: 16px;
+    text-align: center;
+  }
+</style>

packages/@megalo/cli/template/src/index.js → example/project02/src/index.js

@@ -1,9 +1,24 @@
 import App from './App'
 import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
 import VHtmlPlugin from '@megalo/vhtml-plugin'
 
 Vue.use(VHtmlPlugin)
 
+// https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
+Component.registerHooks([
+  'onLoad', // 监听页面加载
+  'onShow', // 监听页面显示
+  'onReady', // 监听页面初次渲染完成
+  'onHide', // 监听页面隐藏
+  'onUnload', // 监听页面卸载
+  'onPullDownRefresh', // 监听用户下拉动作
+  'onReachBottom', // 页面上拉触底事件的处理函数
+  'onShareAppMessage', // 用户点击右上角分享
+  'onPageScroll', // 页面滚动
+  'onTabItemTap' // 当前是 tab 页时， 点击 tab 时触发
+])
+
 const app = new Vue(App)
 
 app.$mount()
@@ -36,7 +51,7 @@ export default {
     window: {
       backgroundTextStyle: 'light',
       navigationBarBackgroundColor: '#fff',
-      navigationBarTitleText: 'haha',
+      navigationBarTitleText: 'Typescript',
       navigationBarTextStyle: 'black'
     }
   }

example/project02/src/pages/hello.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="app">
+      <img class="img" src="../static/imgs/megalo_logo.png" @touchstart="changeStat">
+      <hello-world :color="color"></hello-world>
+      <h1 class="txt" v-show="t%2==1">click logo::{{t}}</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import HelloWorld from '@/components/HelloWorld.vue'
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component({
+  components: {
+    HelloWorld
+  }
+})
+export default class Hello extends Vue {
+  t = 1
+  color = '#007d37'
+
+  async beforeCreate () {
+    const p = new Promise((resolve, reject) => {
+      setTimeout(() => {
+        console.log('promise')
+        resolve()
+      }, 1000)
+    })
+    await p
+    const map = new Map()
+    map.set('name', '李宗')
+    let x: number = 0
+    const b = { age: 18 }
+    console.log('Page [hello] Vue beforeCreate')
+    // x = 'sb'
+    console.log(x, { ...b }, map)
+  }
+
+  created () {
+    console.log('Page [hello] Vue created')
+    var appInstance = getApp()
+    console.log(appInstance.globalData) // I am global data
+  }
+
+  beforeMount () {
+    console.log('Page [hello] Vue beforeMount')
+  }
+
+  mounted () {
+    console.log('Page [hello] Vue mounted')
+  }
+
+  onLoad (options) {
+    // Do some initialize when page load.
+    console.log('Page [hello] onLoad')
+  }
+
+  onReady () {
+    // Do something when page ready.
+    console.log('Page [hello] onReady')
+  }
+
+  onShow () {
+    // Do something when page show.
+    console.log('Page [hello] onShow')
+  }
+
+  onHide () {
+    // Do something when page hide.
+    console.log('Page [hello] onHide')
+  }
+
+  onUnload () {
+    // Do something when page close.
+    console.log('Page [hello] onUnload')
+  }
+  /**
+   * for other event handlers, please check https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
+   */
+
+  changeStat () {
+    this.t++
+    this.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16)
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.app{
+  padding-top: 100px;
+  .img {
+    display: block;
+    height: 120px;
+    width: 138px;
+    margin: 20px auto;
+  }
+  .txt {
+      color: #567567;
+      font-size: 13px;
+      text-align: center;
+  }
+}
+</style>