vue-cli3.0以上 + typeScript 教程學習指導（一） 入門typeScript

之前在簡單的學習了ts後 一直想將它 與vue結合起來 一直沒有，對此就開始打算以文章的形式一步一步來  從簡單入手。

單純的typeScript如何教程：https://ts.xcatliu.com/

我將寫一系列的文章 來和大家一起進步，我的所有系列文章 會涉及到

      1，搭建  跑起來

      2 數據處理，指令v-if v-for  事件處理，生命週期

      3 計算屬性 watch

      4 父子傳值

       5 vueX的使用

       6 做一個登錄項目

        7 做一個登錄加下訂單的項目

所有系列文章地址https://blog.csdn.net/www_share8/category_9877844.html

現在我們就先來 搭建項目吧

vue create tslearn 

然後選擇自定義

然後等待下載就可以

然後運行起來就可以了  到這一步就進步算完成 我們的第一系列的目標了，但爲了後續的系列文章 這裏需要添加一些東西和改建一些項目。

想來添加 elment-ui  https://element.eleme.cn/#/zh-CN/component/input,

vue add element

選擇如上 選擇 語言 zh-cn 我選擇全部安裝

看到 button 按鈕 就知道  我們安裝 完成了  接下來做一些改動  刪除一些頁面 和規整一下路由,暫時不想涉及父子頁面

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>


export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

router index

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Index from '../components/HelloWorld.vue'

Vue.use(VueRouter)

const routes: RouteConfig[] = [
  {
    path: '/',
    name: 'Index',
    component: Index,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

將HelloWorld.vue 變成如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
  private msg: string = "測試";
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

配置一下  tsline.json  作用和eslint差不多

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**",
      "tests/**"
    ]
  },
  "rules": {
    "trailing-comma": [
      true,
      {
        "singleline": "never",
        "multiline": {
          "objects": "ignore",
          "arrays": "always",
          "functions": "never",
          "typeLiterals": "ignore"
        }
      }
    ],
    "quotemark": [
      false,
      "single"
    ],
    "indent": [
      true,
      "spaces",
      2
    ],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false,
    "semicolon": [
      false,
      "always",
      "ignore-interfaces"
    ],
    "member-access": false,
    "no-console": false,
    "max-line-length": [
      false
    ],
    "no-parameter-properties": false,
    "no-debugger": false,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "triple-equals": true,
    "no-empty": [
      true,
      "allow-empty-catch"
    ],
    "no-unnecessary-type-assertion": true,
    "return-undefined": true,
    "no-parameter-reassignment": true,
    "curly": [
      true,
      "ignore-same-line"
    ],
    "no-construct": true,
    "no-duplicate-super": true,
    "no-duplicate-switch-case": true,
    "no-duplicate-variable": [
      true,
      "check-parameters"
    ],
    "no-return-await": true,
    "no-sparse-arrays": true,
    "no-switch-case-fall-through": true,
    "prefer-object-spread": true,
    "use-isnan": true,
    "cyclomatic-complexity": [
      true,
      20
    ],
    "no-duplicate-imports": true,
    "encoding": true,
    "no-unnecessary-initializer": true,
    "number-literal-format": true,
    "one-line": true,
    "space-before-function-paren": [
      true,
      "asyncArrow"
    ],
    "no-unsafe-finally": true
  }
}

最終頁面就完成了

至此 我們就完成了 vue +typeScript的搭建工作，也是所有代碼的 基礎框架搭建好了。

接下來 看我的  第二系列  將和大家一起探討 數據 和事件