一、手把手教你 Vue2+Ts

2023-10-09 11:11:16

vue2+ts

vue-cli搭建vue2+ts项目

使用 vue-cli 创建

vue create 项目名称

Please pick a preset - 选择 Manually select features
Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 2.x

等到项目构建完成便可启动项目了,命令： yarn serve或者npm run serve

>yarn serve

看到熟悉的页面,启动成功.

项目结构：

与之前的vue2项目比较出现了几个比较特殊的文件之外，router.js变为router.ts,main.js 变为main.ts,其余的文件和vue2一样。

tsconfig.json

typescript 配置文件https://cn.vuejs.org/v2/guide/typescript.html#%E6%8E%A8%E8%8D%90%E9%85%8D%E7%BD%AE

shims-tsx.d.ts

允许.tsx 结尾的文件，在 Vue 项目中编写 jsx 代码

shims-vue.d.ts

主要用于 TypeScript 识别.vue 文件，Ts 默认并不支持导入 vue 文件

vue.config.js

进入项目目录发现没有 vue.config.js,手动创建一个和package.json同级

vue.config.js配置



// const proxyConfig =
//   process.env.NODE_ENV === "production"
//     ? require("./proxy.pro.config")
//     : require("./proxy.dev.config");


module.exports = {
  assetsDir: "static",
  runtimeCompiler: true,

  devServer: {
    host: "0.0.0.0",
    // 端口号
    port: 8080,
    https: false,
    // https:{type:Boolean}
    //配置自动启动浏览器
    open: true,
    //热更新
    hot: true,
    //配置多个跨域
    proxy: { }
    // proxy: proxyConfig.proxyList,
  },

};

如果遇到options.proxy should be {Object|Array}错误,将

proxy:{}

改为

proxy:null

main.ts、router.ts和vue2内容一样没啥好说的

*.vue 文件

打开 views文件加下的 Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {}
</script>

<script> 标签上声明 lang="ts",使用typescript语言
引入 vue-property-decorator

码农公寓