vue3+typeScript

项目创建

//脚手架版本 @vue/cli 4.5.6
vue create vue3
选择相关依赖
typescript
router
stote

依赖安装

npm install vue-property-decorator less-loader less 
npm install --save ant-design-vue@next
npm install eslint-plugin-prettier --save dev

ts语法

<script lang="ts">
import { getCurrentInstance, reactive } from "vue";
import { Options, Vue } from "vue-class-component";
//vue修饰器
import { Watch } from "vue-property-decorator";
@Options({
  components: {}
})
export default class Home extends Vue {
  instance: any = getCurrentInstance();
  state: any = reactive({ message: null });
 //深度监听state  
  @Watch("state", { immediate: false, deep: true })
  onState(val: string, oldVal: string) {
    console.log(val);
  }
}
</script>

js语法

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'Index',
  setup() {
    const state = reactive({ foo: 1 })
    const p = ref(0)
    function add() {
      state.foo++
    }
    return {
      state,
      p,
      add
    }
  }
}
</script>

ant design vue使用

//babel.config.js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
        libraryName: "ant-design-vue",
        libraryDirectory: "es",
        style: true
      }
    ]
  ]
};

ts

//src/core/antd/component.ts
import { Button,Input } from "ant-design-vue"

const ant = {
  install(Vue:any) {
    Vue.component(Button.name, Button);
    Vue.component(Input.name, Input);
  }
}

export default ant

js

基本和ts的差不多,这边不做演示

//main.js
import { createApp } from 'vue'
import ant from 'ant-design-vue';
const app = createApp(App)
app.config.productionTip = false;
app.use(ant)

vue.config.js

const vueConfig = {
  chainWebpack: config => {
    config.resolve.extensions.merge([".ts", ".tsx", ".js", ".json"]).end();
  },
  productionSourceMap: false,
  css: {
    /* less 变量覆盖，用于自定义 ant design 主题 */
    loaderOptions: {
      less: {
        // modifyVars: {
        //   'primary-color': '#1DA57A',
        //   'link-color': '#1DA57A',
        //   'border-radius-base': '2px',
        // },
        javascriptEnabled: true
      }
    }
  }
};
module.exports = vueConfig;

使用

<a-button type="danger">button</a-button>
<a-input v-model:value="state.message" />
<script lang="ts">
import { reactive } from "vue";
import { Options, Vue } from "vue-class-component";
@Options({
  components: {}
})
export default class Home extends Vue {
  state: any = reactive({ message: null });
}
</script>
最后修改：2021 年 02 月 10 日 01 : 16 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏