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來編譯也是能夠的