|
| 1 | +## 开始 |
| 2 | + |
| 3 | +``` |
| 4 | +npm install |
| 5 | +npm run serve |
| 6 | +npm run build |
| 7 | +``` |
| 8 | + |
| 9 | +vue3.x 结合 typescript 初体验 |
| 10 | + |
| 11 | +### 一、Vue3.0 的设计目标 |
| 12 | + |
| 13 | +- 更小\更快 - Vue 3.0 大小大概减少一半，只有 10kB |
| 14 | +- 加强 TypeScript 支持 |
| 15 | +- 加强 API 设计一致性 - 易读 |
| 16 | +- 提高自身可维护性 |
| 17 | +- 开放更多底层功能 |
| 18 | + |
| 19 | +vue3.x 采用 Function-based API 形式组织代码，使其更容易压缩代码且压缩效率也更高,由于 修改了组件的声明方式，以函数组合的方式完成逻辑，天然与 typescript 结合。（vue2.x 中的组件是通过声明的方式传入一系列 options 的，所以在 2.x 下使用 typeScript 需要装饰器的方式`vue-class-component`才行） |
| 20 | + |
| 21 | + |
| 22 | +``` |
| 23 | + // vue2.x 要想使用ts 需要这样处理,详见官方文档 https://cn.vuejs.org/v2/guide/typescript.html |
| 24 | +<script lang="ts"> |
| 25 | + import Vue from 'vue' |
| 26 | + import Component from 'vue-class-component' |
| 27 | + @Component |
| 28 | + export default class App extends Vue {} |
| 29 | +</script> |
| 30 | +``` |
| 31 | + |
| 32 | +### 二、typescript 有什么优点 |
| 33 | + |
| 34 | +#### 1、增加代码的可读性与可维护性 |
| 35 | + |
| 36 | +- 大部分函数看类型定义就知道是干嘛的 |
| 37 | +- 静态类型检查，减少运行时错误 |
| 38 | + |
| 39 | +#### 2、社区活跃，大牛都在用 |
| 40 | + |
| 41 | +- **在 vue3 热潮下，之后 typescript 要成为主流，快学** |
| 42 | + |
| 43 | +### 三、搭建 vue3.x + typescript + vue-router 环境 |
| 44 | + |
| 45 | +#### 1、全局安装 vue-cli |
| 46 | + |
| 47 | +``` |
| 48 | +npm install -g @vue/cli |
| 49 | +``` |
| 50 | + |
| 51 | +#### 2、初始化 vue 项目 |
| 52 | + |
| 53 | +``` |
| 54 | +vue create vue-next-project |
| 55 | +``` |
| 56 | + |
| 57 | +这里在输入命令后，需要选择`Manually select features`, 至少要把 `babel` `typescript` `router` 选上，（`vuex` 看自身情况是否需要）。如下图: |
| 58 | + |
| 59 | + |
| 60 | + |
| 61 | +不清楚 vue-cli 的可参考[文章](https://juejin.im/post/5e69de93f265da570c75453e) |
| 62 | + |
| 63 | +#### 3、升级为 vue3.x 项目 |
| 64 | + |
| 65 | +``` |
| 66 | +cd vue-next-project |
| 67 | +vue add vue-next |
| 68 | +``` |
| 69 | + |
| 70 | +这个命令会自动帮你把 vue2.x 升级到 vue3.x ，包括项目中对应的依赖进行升级与模板代码替换，像：`vue-router` `vuex` |
| 71 | + |
| 72 | +完成以上三步主体环境算搭建完成，看刚才创建的目录里多了个 tsconfig.json 配置文件，可以根据自身与项目需要，进行配置。 |
| 73 | + |
| 74 | +接下来需要简单处理一下，使其支持 typescript 形式。（模板 cli 还没完善 typescript 的模板代码） |
| 75 | + |
| 76 | + |
| 77 | + |
| 78 | +- 将`shims-vue.d.ts`文件中的内容修改一下，这步操作应该会少了一些报错。 |
| 79 | + |
| 80 | +``` |
| 81 | +// declare module "*.vue" { |
| 82 | +// import Vue from 'vue'; |
| 83 | +// export default Vue; |
| 84 | +// } |
| 85 | +declare module "*.vue" { |
| 86 | + import {defineComponent} from 'vue' |
| 87 | + const Component: ReturnType<typeof defineComponent>; |
| 88 | + export default Component |
| 89 | +} |
| 90 | +``` |
| 91 | + |
| 92 | +- 组件里使用需声明 `script lang="ts"` ,然后用`defineComponent`进行包裹,即可。 |
| 93 | + |
| 94 | +``` |
| 95 | +<script lang="ts"> |
| 96 | +import { |
| 97 | + defineComponent, |
| 98 | + ref, |
| 99 | + onMounted, |
| 100 | + onUpdated, |
| 101 | + onUnmounted, |
| 102 | +} from "vue"; |
| 103 | +
|
| 104 | +export default defineComponent({ |
| 105 | + name: "hello world", |
| 106 | + props: {}, |
| 107 | + setup(props: any) { |
| 108 | + const count = ref(0); |
| 109 | + const increase = (): void => { |
| 110 | + count.value++; |
| 111 | + }; |
| 112 | + function test(x: number): string { |
| 113 | + return props.toString(); |
| 114 | + } |
| 115 | + test(1); |
| 116 | + // test('number'); |
| 117 | + // 生命周期 |
| 118 | + onMounted(() => { |
| 119 | + console.log("mounted vue3 typescript"); |
| 120 | + }); |
| 121 | + onUpdated(() => { |
| 122 | + console.log("updated vue3 typescript"); |
| 123 | + }); |
| 124 | + onUnmounted(() => { |
| 125 | + console.log("onUnmounted vue3 typescript"); |
| 126 | + }); |
| 127 | + // 暴露给模板 |
| 128 | + return { |
| 129 | + count, |
| 130 | + increase |
| 131 | + }; |
| 132 | + }, |
| 133 | +}); |
| 134 | +
|
| 135 | +</script> |
| 136 | +``` |
| 137 | + |
| 138 | +生命周期对应 |
| 139 | + |
| 140 | + |
| 141 | +### 四、附上学习 vue-next 与 typescript 的官方秘籍 |
| 142 | + |
| 143 | +- [composition-api](https://composition-api.vuejs.org/zh/api.html#setup) |
| 144 | +- [typescript](https://www.tslang.cn/) |
| 145 | +- [typescript 教程](https://ts.xcatliu.com/introduction/what-is-typescript) |
| 146 | + |
| 147 | +### 五、不想搭建你也可以直接拉去 github demo |
| 148 | + |
| 149 | +[vue3+typescript 环境](https://github.com/vue3/vue3-router4-typescript) |
0 commit comments