Vue2.5 + TypeScript + Vue-cli 开发初体验

发布:elantion 日期:2018-11-07 阅读:407 评论:0

在确定使用vue之前,我曾想过使用我熟悉得不能再熟悉的React全家桶,毕竟可以一拿来就上手。但一个合格的前端工程师怎么可能死守一种框架呢,于是毅然投入Vue的怀抱。
我还记得Vue还没出1.0之前,我觉得Vue可能是世界上最容易上手的框架了,但在大型项目一直不敢使用,因为怕不稳定。但现在已经是2.5了,一切都变得非常成熟了,而且还能用上 TypeScript,我还有什么理由拒绝呢?

vue-cli 极速创建项目

vue-cli: https://cli.vuejs.org

我之前的项目都是使用Webpack来处理构建的工作,用了很久,基本上闭着眼晴都会写配置文件,但 vue-clic 更简单,直接一个命令就帮我创建好了项目(Yeoman了解一下)。
安装 vue-cli

npm install -g @vue/cli

cd到你要创建项目的目录,然后用下面命令创建一个名叫hello-word的新项目

vue create hello-world

在配置的过程中,使用空格选择中 TypeScript,然后按说明完成配置,过程很简单。如果之后你要修改构建的流程,可以在根目录新建一个vue.config.js文件,输入你要改变的地方,例如修改静态文件的地址:

module.exports = {
    baseUrl:
        process.env.NODE_ENV === 'production'
            ? '/projects/hello-word/'
            : '/',
};

这样就可以使你在打包线上文件的时候使用正确的地址。

配置好之后,用命令 vue serve就可以开始自动构建和启动静态服务器了(类似webpack-dev-serve),非常简单。如果开发完之后,用命令vue build打包,你就可以发布了,简直不要太开心。当然,test命令也是有的,像我这种懒人就不想弄了哈。

TypeScript的不同之处

如果你只是使用普通的 JavaScript,现在就可以直接像以前那样马上开干了,TypeScript 不一样,需要一点配置。
在根目录找到tsconfig.json,确定strict的值是true,开启严格模式,否则 TypeScript 最强大的功能就被你抛弃了。
现在写组件可以使用vue-property-decorator插件了,书写起来更直观:

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
    private async created() {
        // 跟 vue 生命周期的 created 一模一样
    }
    private id: number = 0; // data 变量直接写到对象上
    private clickButton(){
        // 以前 methods 的方法,现在可以直接写到对象上
    }
    // 其余属性都一样
    // ...
}

它提供了七个修饰符,例如@Prop就是以前的props。想全部了解请直接看Github文档:https://github.com/kaorun343/vue-property-decorator

总结

其实整个新项目开发起来跟以前没什么区别,还是熟悉的配方,还是熟悉的味道。Vue还是一如既往的简单易用,只是这次用在一个小项目上,下次有机会想试试在大型项目上使用,看看与成熟得一批的React有什么优势?