vue项目整合typescript

vue项目中编写组件

vue组件中大多数方法修改为通过@compoent（修饰器）组件，来为组件类添加各种‘装饰属性’，即所谓的注解；
注解： 一种依赖注入方式，为了降低代码耦合度；
简单来说，就是vue负责为类额外添加一些成员和功能，而开发者负责通过注解的方式将数据传给vue，vue收到注解传入的数据后，可以用在类上

• 我们看下面段代码：通过 @Component 为 名为 App的类 传了一个对象，而对象中，就包含了 很多属性，比如：components

<template>
  <div id="app">
    <MenuBar/>
    <ItemList/>
    <MemoEditor v-if="$store.state.isShow"/>
    <test/>
  </div>
</template>

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

@Component({
  components: {
    MenuBar,
    ItemList,
    MemoEditor,
    test
  },
})
export default class App extends Vue {
  
}
</script>

vue文件@import和import的区别

• script脚本下import是js语法，引用css文件
• style中@import在css中引用style文件