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>