itsfrank / vue-typescript

Typescript decorators to make vue feel more typescripty
MIT License
358 stars 25 forks source link

How to import the component of .vue format in typescript? #16

Closed fish2016 closed 7 years ago

fish2016 commented 7 years ago

I'm attempting to import a vue componet in a typescript-vue project, but webpack returned an ERROR: ERROR in ./src/views/create_card/create_card.ts (3,19): error TS2307: Cannot find module 'vux/src/components/group'.

Do you have any way to resolve this issue? and how to import a .vue componet in typescript????

this is the code for importing vue component: import Group from 'vux/src/components/group'

directory structure: "vux/src/components/group" is under "node_modules": node_modules/vux/src/components/group |----component.json |----index.md |----index.vue |----metas.yml

fish2016 commented 7 years ago

when I replace 'import' with 'require', the project can be compiled by tsc susseccessfully,

but vue would report a WARNING at run time: index.vue:9 [Vue warn]: Unknown custom element: <group> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

fish2016 commented 7 years ago

the following is the code mentioned by me.

`import { VueComponent } from 'vue-typescript'

// import Group from 'vux/src/components/group' // import Cell from 'components/cell' var Group = require('vux-components/group') var Cell = require('vux-components/cell')

var Switch = require('vux-components/switch') var Confirm = require('vux-components/confirm')

export default { components: { Group, Cell, Switch, Confirm } }

@VueComponent({ template: require('./create_card.html') //style: require('./../../css/weui.css') }) export class CreateCardComponent { ready(){ console.log('about is ready!', Group); } }`

fish2016 commented 7 years ago

I just found a way to solve this issue, just add the code for configuring the components attribute, after adding the forth line in the following, vue component can be used in typescript.

`@VueComponent({
    template: require('./create_card.html'),
    //style: require('./../../css/weui.css')
    **components: {Group, Cell, Switch, Confirm}**
})
export class CreateCardComponent {
    ready(){
        // console.log('about is ready!', Group);
        //console.log("ENV:", process.env);
        // $("#id_app"");
    }
}`