由于近期刚学习了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开发环境的配置过程,关于其中深层次的开发实现还有待去实践
- 参考文档