vue開發小想法

VonWeb發表於2019-02-16
Vue

這周入職新公司，公司這邊用vue框架，我習慣使用typescript來寫東西，vue搞出了.vue檔案，連js都不算，在.vue檔案中ts/js的程式碼提示，補全都沒有了，對於我這樣有小偏執的人來說，不能接受。

vue英文官網推薦了一個叫vue-class-component的包，可以以class的模式寫vue元件。vue-class-component(以下簡稱Component)帶來了很多便利：

  1. methods，鉤子都可以直接寫作class的方法

  2. computed屬性可以直接通過get來獲得

  3. 初始化data可以宣告為class的屬性

  4. 其他的都可以放到Component裝飾器裡
    舉個小例子

@Component({
    props: {
        firstName: String,
        lastName: String
    },
    components: {
        `component-a`: ComponentA
    }
})
export class XXXX extends Vue {
    firstName: string;
    lastName: string;
    
    //初始data
    middleName = `middle`;
    
    //computed 屬性
    get fullName() {
        return this.firstName + this.lastName;
    }
    
    //method
    hello() {
        alert(`Hello ${this.fullName}!`);
    }
    
    //鉤子
    mounted() {
        this.hello();
    }
}

現在儘管可以以class的模式來寫vue的元件了，但自動補全，程式碼提示等功能還是沒有，至少我用的vscode沒有這個功能，跑個題先，vscode真的非常棒，不愧是微軟出品，寫typescript超級贊，加上jsconfig.json寫javascript也很不錯，vscode出來之前我都是用sublime text，vscode不斷出新功能，sublime就替補了。話歸正題，要想獲取好的程式碼提示還得是原語言啊，js程式碼在.ts,.js檔案寫，scss在.scss寫,html在.html寫

最終vue元件以以下方式寫感覺挺爽，很順

import Vue from `vue`;
import Componet from `vue-class-component`;

require(`./XXX.template.scss`);

@Component({
    template: require(`./XXX.template.html`),
    props: {
        firstName: String,
        lastName: String
    },
    components: {
        `component-a`: ComponentA
    }
})
export class XXXX extends Vue {
    firstName: string;
    lastName: string;
    
    //初始data
    middleName = `middle`;
    
    //computed 屬性
    get fullName() {
        return this.firstName + this.lastName;
    }
    
    //method
    hello() {
        alert(`Hello ${this.fullName}!`);
    }
    
    //鉤子
    mounted() {
        this.hello();
    }
}

現在各個檔案迴歸它的本職工作了，哈哈哈，不過現在打包時有點小問題，

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解決方法也很簡單，在webpack配置檔案裡 加上

alias: {
    `vue`: `vue/dist/vue.esm.js`
}

即可。好的，現在程式碼補全，語法提示什麼功能都回來了

不使用typescript，也可以寫javascript,通過babel來編譯也是可以的

相關文章