TS入门009_01Vue_ts配置cli版本

直接上官网

  • https://vuejs.org/

  • 找到 TS 支持,我的是 3.0版本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    # 1. Install Vue CLI, if it's not already installed
    npm install --global @vue/cli

    # 2. Create a new project, then choose the "Manually select features" option
    vue create my-project-name

    # 提示你是否在当前目录生成 y
    Vue CLI v3.0.0
    ? Generate project in current directory? (Y/n) 
    #  是否选择预置的？ 选 Manually
    Vue CLI v3.0.0
    ? Please pick a preset: (Use arrow keys)
    ❯ default (babel, eslint) 
    Manually select features 

    # 选择你要的内容 router / vuex  做项目可以选上，这里必须的是 ts / babel 
    ? Check the features needed for your project: 
    ◉ Babel
    ◉ TypeScript
    ◯ Progressive Web App (PWA) Support
    ◯ Router
    ◯ Vuex
    ❯◉ CSS Pre-processors
    ◉ Linter / Formatter
    ◯ Unit Testing
    ◯ E2E Testing

    ? Use class-style component syntax? Yes
    ? Use Babel alongside TypeScript for auto-detected polyfills? Yes
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
    by default): SCSS/SASS
    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedica
    ted config files
    # 是否以后都用这个当作默认配置
    ? Save this as a preset for future projects? (y/N) n

  • 创建好项目 yarn serve

来看 app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
// 这是 js 语法
import { Component, Vue } from 'vue-property-decorator';
// 这是 js 语法
import HelloWorld from './components/HelloWorld.vue';


// 这里是新的组件写法 装饰器语法
@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

<style lang="scss">
...
</style>

  • 新建我们的组件 Hjx

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
        <div>
            I am hjx!
            <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
        </div>
    </template>
    <script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component';
    import HelloWorld from './HelloWorld.vue';

    @Component({
    components: {
        HelloWorld
    },
    })
    export default class Hjx extends Vue{}
    </script>

  • App.vue 里 使用 它

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">

        <Hjx/>
    </div>
    </template>

    <script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import Hjx from './components/Hjx.vue';

    @Component({
    components: {
        Hjx
    },
    })
    export default class App extends Vue {}
    </script>

    <style lang="scss">
    #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>

代码