Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

vue2+ts

Vue-cli builds vuE2 + TS project

Create it using vue-CLI

Vue create Project nameCopy the code

  • Please pick a preset – Select Manually select features

  • Check the features needed for your project – Select TypeScript. Note that space is selected and carriage return is the next step

  • Choose a version of vue.js that you want to start the project with – select 2.x

To start the project, run yarn Serve or NPM run serve

>yarn serve
Copy the code

The familiar page is displayed.

Project Structure:

Compared to the previous vue2 project, there are a few more special files. Router.js becomes router.ts,main.js becomes main.ts, and the rest of the files are the same as vue2.

tsconfig.json

Typescript configuration files cn.vuejs.org/v2/guide/ty…

shims-tsx.d.ts

Allows.tsx ending files to write JSX code in Vue projects

shims-vue.d.ts

It is used to recognize TypeScript. Vue files. Ts does not support importing vue files by default

vue.config.js

If you go to the project directory and find no vue.config.js, manually create one that is the same as package.json

Vue. Config. Js configuration



// 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"./ / the port number
    port: 8080.https: false.// https:{type:Boolean}
    // Configure automatic browser startup
    open: true./ / hot update
    hot: true.// Configure multiple cross-domains
    proxy: {}// proxy: proxyConfig.proxyList,}};Copy the code

If there are any options. The proxy should be {Object | Array} errors, will be

proxy:{}
Copy the code

Instead of

proxy:null
Copy the code

Main. ts, Router. Ts and vue2 have nothing to say

*. Vue file

Open the views file and add 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>Copy the code
  1. <script>Label declarationlang="ts", using typescript
  2. The introduction of vue – property – the decorator