Vue CLI 3.X 初体验

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

vue-cli 3.0已经改名字了，变成了@vue/cli，我们先全局安装一下

npm install -g @vue/cli
或者
yarn add global @vue/cli

装完之后可以查看一下是否已经安装，我这里安装的版本是 @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脚手架