vue开发小想法

星屑
• 阅读 5922

这周入职新公司,公司这边用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来编译也是可以的

点赞
收藏
评论区
推荐文章
Chase620 Chase620
4年前
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢?1:抽离javascriptHome.vue<template<div<div:style"{padding:'24px',back
Easter79 Easter79
3年前
Vue 全家桶、原理及优化简议
不少互联网公司都在使用vue技术栈,或称为vue全家桶。使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js是一个JavaScriptMVVM(ModelViewViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计
可莉 可莉
3年前
17、vue
说明:vue3.0搭建的项目,不过没有引入ts,后来需要用到一个插件是用ts写的,所以vue要用到ts。。。一、安装typescript及loadernpminstalltypescripttsloadersavedev!image(https://oscimg.oschina.net/oscne
Vue3设计思想及响应式源码剖析 | 京东物流技术团队
一、Vue3结构分析1、Vue2与Vue3的对比对TypeScript支持不友好(所有属性都放在了this对象上,难以推倒组件的数据类型)大量的API挂载在Vue对象的原型上,难以实现TreeShaking。架构层面对跨平台dom渲染开发支持不友好,vue
爱学it学无止境 爱学it学无止境
11个月前
Vue3 + TS 仿知乎专栏企业级项目完结
Vue3TypeScript:打造高效、可靠的现代前端应用在快速迭代的前端开发领域,Vue.js3与TypeScript(TS)的结合已成为构建高效、可靠且易于维护的现代Web应用的优选方案。Vue3以其轻量级、高性能和灵活的响应式系统著称,而TypeS
融云IM即时通讯 融云IM即时通讯
6个月前
融云IM干货丨UINI-app支持TypeScript吗?
UINIapp支持TypeScript开发。具体来说,UINIapp允许在项目中使用TypeScript,并提供了相应的类型定义文件。开发者可以通过以下方式进行TypeScript配置:1.项目创建:在HBuilderX中创建项目时,可以在vue或nvue
星屑
星屑
Lv1
空有一身热爱,却入不了这山海。
文章
5
粉丝
0
获赞
0