尝试ts开发

Author: yangdan8

package.json

@@ -20,9 +20,11 @@
     "iview": "^2.4.0",
     "vue": "^2.4.4",
     "vue-router": "^2.7.0",
-    "vuex": "^2.4.1"
+    "vuex": "^2.4.1",
+    "sinon": "^4.0.1"
   },
   "devDependencies": {
+    "@types/node": "^8.0.34",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
@@ -62,7 +64,7 @@
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "^1.3.1",
+    "karma-sinon-chai": "^1.3.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.31",
     "karma-webpack": "^2.0.2",
@@ -77,8 +79,9 @@
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "sinon": "^4.0.1",
     "sinon-chai": "^2.8.0",
+    "ts-loader": "^2.3.7",
+    "typescript": "^2.5.3",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.0.4",
     "vue-style-loader": "^3.0.1",

src/App.vue

@@ -4,10 +4,11 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import * as Vue from 'vue';
+export default Vue.extend({
   name: 'app'
-};
+});
 </script>
 
 <style scoped>

src/main.ts

@@ -0,0 +1,43 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import * as Vue from 'vue';
+let iView = require('iview');
+import 'iview/dist/styles/iview.css';
+import './common/reset.css';
+import './common/index.css';
+import router from './router';
+
+Vue.use(iView);
+
+Vue.config.productionTip = false;
+
+router.beforeEach((to, from, next) => {
+    iView.LoadingBar.start();
+    let title = to.meta.title;
+    title = title ? title + ' - Home' : 'iView demo';
+    window.document.title = title;
+    next();
+});
+
+router.afterEach(() => {
+    iView.LoadingBar.finish();
+    window.scrollTo(0, 0);
+});
+
+/* eslint-disable no-new */
+new Vue({
+    el: '#app',
+    router,
+    template: '<App/>',
+    components: {
+        App: (resolve) => require(['./App'], resolve)
+    }
+});
+
+
+// interface NodeRequire extends NodeRequireFunction {
+//   resolve(id: string): string;
+//   cache: any;
+//   extensions: NodeExtensions;
+//   main: NodeModule | undefined;
+// }

src/router/index.ts

@@ -0,0 +1,8 @@
+import * as Vue from 'vue';
+import * as VueRouter from 'vue-router';
+let RouterConfig = require('./config');
+
+Vue.use(VueRouter);
+
+// 路由配置
+export default new VueRouter(RouterConfig);

src/typings/base.d.ts

@@ -0,0 +1,14 @@
+// export const require: (url: string) => any;
+//export const require: (url: string) => any;
+
+// export declare var require: NodeRequire | ;
+
+
+interface NodeRequireFunction {
+  (id: string| (  string[],resolve?: (component: any) => void): any;
+}
+
+// export type AsyncComponent = (
+//   resolve: (component: Component) => void,
+//   reject: (reason?: any) => void
+// ) => Promise<Component | EsModuleComponent> | Component | void;

src/vue-shims.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+    import * as Vue from "vue";
+    export default Vue;
+}

tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "outDir": "./built/",
+        "sourceMap": true,
+        "strict": true,
+        "module": "es2015",
+        "moduleResolution": "node",
+        "target": "es5"
+    },
+    "include": [
+        "./src/**/*"
+    ]
+}

tslint.json

@@ -0,0 +1,23 @@
+{
+    "defaultSeverity": "error",
+    "extends": [
+        "tslint:recommended"
+    ],
+    "jsRules": {},
+    "rules": {
+        "quotemark": [
+            true,
+            "single"
+        ],
+        "indent": [
+            true
+        ],
+        "interface-name": [
+            false
+        ],
+        "arrow-parens": false,
+        // Pending fix for shorthand property names.
+        "object-literal-sort-keys": false
+    },
+    "rulesDirectory": []
+}