Vue CLI 3.X 初体验__Vue.js__前端__命令行__TypeScript
发布于 3 年前 作者 banyungong 1191 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

由于近期刚学习了typescript,想找个项目来看看,加之听说vue-cli 3.0开始已经支持自动搭建基于typescript的开发环境,所以也安装了一个体验一下,下面会简单说一下体验的整个流程,多图预警!多图预警!

vue-cli 3.0已经改名字了,变成了[@vue](/user/vue)/cli,我们先全局安装一下

npm install -g [@vue](/user/vue)/cli
或者
yarn add global [@vue](/user/vue)/cli

装完之后可以查看一下是否已经安装,我这里安装的版本是 [@vue](/user/vue)/cli@3.0.0-beta.6

npm list -g --depth 0

创建项目

接下来运行一下命令创建一个项目

vue create <project-name>

选择配置,默认配置还是手动,这里我选择手动Manually

配置相关插件和功能

这里选择自己需要的一些插件和功能,我想试一下typescript,所以选上,

  • typescript

  • vue-router

  • vuex

  • css预处理器

  • 格式检查

  • 单元测试

    是否使用class风格的组件语法,这里选y,脚手架就会帮我们安装以下组件

  • vue-class-component

  • vue-property-decorator

    是否使用babel做转义,选y

    选择一种css预处理语言,这里我选择LESS

    选择一种校验规则,我选择TSLint

    选择校验的时机

  • 保存的时候校验

  • 提交的时候校验

    我选择第一项

    选择单元测试的配置,这里选择Mocha + Chai

    这里是询问怎么存放babel,postcss,eslint等的配置文件

  • 单独存放

    • 集成在package.json

    我选择第一项,单独存放

    询问是否保存当前配置,我选择否

    选择一个包管理器来安装,这个看自己喜好吧,我选择yarn

    配置好了,开始安装

    安装完毕,运行命令启动服务

    yarn serve

服务启动后,在浏览器中打开相应网址,就可以看到效果了

项目分析

我们看一下生成的项目的目录,可以看到项目精简了不少,没有了config和build等目录,由于我配置的是typescript项目,所以在项目的view目录下多出了一个 shims.d.ts 声明文件,根目录下多出了一个ts的配置文件 tsconfig.json

我们点开package.json 文件可以看到目录下加了一些修饰符的组件

看到这里问题来了,没有了build目录,我们怎么修改项目的配置呢?比如说我想修改一下调试的端口,其实我们可以在项目根目录下增加一个vue.config.js文件,配置如下

module.exports = {
  devServer: {
    port: 8989
  }
}

保存以后重启服务器,就可以看到端口已经变成了我们修改的了,关于vue.config.js的详细配置项请 点击这里

项目初体验

接下来我们尝试用typescript写点东西,体验一下。点开component目录下的HelloWorld.vue文件,发现编辑器居然画了红线,这不科学啊

我们修改一下代码就好了

其实这个问题是由于我编辑器上的vetur插件引起的,完全是误伤友军。关于这个问题请查看报错原因

下面我们来点ts代码,这里我定义了一个数据,然后去改变它,再监听这个事件

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

@Component
export default class HelloWorld extends Vue {
  protected testdata: number = 666;
  @Prop() private msg: string|any;
  @Watch('testdata')
  public onTestDataChanged(val: number, oldVal: number) {
    alert(`当前的值为:${val}`);
  }
  private mounted() {
    alert(`当前的值为: ${this.testdata}`);
    setTimeout(() => {
      this.testdata = 999;
    }, 500);
  }
}

运行结果如下,可以看到结果是按预想的实现了

结语

本文简单介绍了用Vue CLI 3.X来搭建typescript开发环境的配置过程,关于其中深层次的开发实现还有待去实践

  • 参考文档

10分钟上手最新vue脚手架

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: azumia 原文链接:https://juejin.im/post/6844903587739336717

回到顶部