初始typescript+vue项目详解
环境要求
1. 检查是否安装node.js运行环境
//终端输入
node -v
2. 检查是否安装npm和cnpm包管理程序
//终端输入
npm -v
cnpm -v // 淘宝镜像专用通道
3. 检查是否安装webpack构建工具
//终端输入
webpack -v
4. 检查是否安装Vue CLI3手脚架
// Vue CLI 提供了内建的 TypeScript 工具支持
npm i @vue/cli -g
//终端输入,这里是大写的"V"
vue -V
注意手脚架版本必须是vue-cli3
确定以上环境都没问题后,那么我们就往前走,构建项目开始。
第一步:按下快捷键:windows+x,输入cmd,按确定
注:为了创建项目顺利使用上/下键,特意选择cmd终端
// 终端输入,进入存放项目的目录,我的目录在D:\storecode\typescript
D:
cd storecode
cd typescript
创建项目
第二步:创建项目
// 终端输入
vue create vue-ts
注意:vue-ts项目名称不包含大写字母
接下来我们选择按上/下键切换选择 Manually select features,可以让我们手动选择功能
同样按上/下键切换选择,按空格键选中
注意:这里是多选,空括号的就是没选上的
- Babel:将ES6编译成ES5
- TypeScript:JS超集,主要是类型检查
- Router和Vuex,路由和状态管理
- Linter/ Formatter:代码检查工具
- CSS Pre-processors:css预编译 (稍后会对这里进行配置)
- Unit Testing:单元测试,开发过程中前端对代码进行自运行测试
是否使用Class风格装饰器?
即原本是:home = new Vue()创建vue实例
使用装饰器后:class home extends Vue{}
我们选择Y就行
继续选择Y(开发过程中发现不需要,再重新设置)
选择ESLint + Prettier时,ESLint与Prettier相冲突的配置项会被关闭,仍需要配置一遍
新手不建议选,新手选择第一个就行了 - tslint: typescript格式验证工具
- eslint w…: 只进行报错提醒;
- eslint + A…: 不严谨模式;
- eslint + S…: 正常模式;
- eslint + P…: 严格模式;
单元测试可以点击单元测试官方文档进行了解的,可以点击进去学习。
- In dedicated config files 生成各自的独立文件(直译:在专用配置文件中)
- In package.json 将所有的依赖目录放在package.json文件里
选N(以前不清楚,就选了y)
如果安装的下载工具多:npm yarn,一般会提示选择用哪一个下载,yarn速度快。
等待安装完成后,我们的项目创建就完成了。
启动
// 终端输入
cd vue-ts // 进入项目根目录
npm run serve // 启动
注意:根目录下找到package.json可以看到如下启动命令
- serve 开发启动
- build 生产打包环境
- test:unit 单元测试
- lint 检查代码是否符合 ESlint 的代码风格规范
ctrl+鼠标点击启动成功日志里的访问地址
加入element-ui
// 终端输入
npm i element-ui -S
// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// Home.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<!-- 安装好element-ui,这个按钮就是第一个调用实例 -->
<el-button type="primary">element-ui按钮</el-button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld
}
};
</script>
配置 .prettierrc
代码检查工具选择ESLint+Prettier时,ESLint与Prettier相冲突的配置会关闭,采用的是Prettier的配置项。
由于个人习惯于用单引号字符串和句尾五分号,但是Prettier会将字符串格式化为双引号,并在句尾自动添加分号,因此需要单独配置。
在package.json同级目录创建.prettierrc.js文件,并加上以下配置就可以了:
在package.json同级目录创建.eslintrc.js文件
报错小插曲:重启项目发现报错:
error and 0 warnings potentially fixable with the --fix
option.
报这个错是因为package.json中配置项少了 --fixed
配置完成,重启。
demo实例
让我们用一个demo来认识装饰器props,data,compute,methods,created,watch分别对应typescript装饰器里的写法。
<template>
<div class="hello">
<h1>{{msg}}--{{names}}</h1>
<el-input type="text" v-model="txt"></el-input>
<p>{{getTxt}}</p>
<el-button @click="add">add</el-button>
<p>{{sum}}</p>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
@Component
export default class MyDemo extends Vue {
//props
@Prop() private msg!:string
@Prop() private names!:string
// data
private txt: string = '1'
private sum: number = 0
// computed
get getTxt() {
return this.txt
}
// methods
private add() {
this.sum++
console.log(`sum: ${this.sum}`);
}
// 生命周期
created(){
console.log('created');
}
// watch
@Watch('txt')
changeTxt(newTxt: string, oldTxt: string) {
console.log(`change txt: ${oldTxt} to ${newTxt}`)
}
}
</script>