preface

This paper focuses on the use of Vue in the TS development environment, so it does not repeat the TS environment construction, directly based on ➡️ [Hello TS] (build process) project development.

Vue-cli also provides one-click typescript integration, but this manual configuration will give you a deeper understanding.

The installation

NPM

$ npm i vue
Copy the code

Since Vue comes with a declaration file, no additional installation is required.

Create an instance

/* ** src/index.ts */

// let hello: string = "hello typescript";
// document.querySelectorAll(".app")[0].innerHTML = hello;

import Vue from "vue";

let app = new Vue({
  el: ".app".data: { name: "Vue & Typescript" },
  template: `<h1>{{ name }}</h1>`});Copy the code

Compile and run, and you’ll find an error

vue.runtime.esm.js:623 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)
Copy the code

“You are using the run-time version of Vue and the template compiler is not available. Templates can be precompiled as rendering functions, or they can be built with a compiler included.”

The runtime – only? Runtime version?

The term

  • Full version: Contains both compiler and runtime versions.
  • The compiler: used to compile the template string toJavaScriptRender the code of the function.
  • The runtime: used to createVueInstantiate, render, and process the virtualDOMAnd so on. Basically everything else is stripped out of the compiler.

Full vs is runtime only

If you need to compile a template on the client side (such as passing a string to the template option, or mounting it to an element and using HTML inside its DOM as the template), you will need to add a compiler, the full version;

When using vue-loader or Vueify, templates inside the.vue file are precompiled to JavaScript at build time. You don’t really need a compiler in the final package, so just use the runtime version.

The runtime version is about 30% smaller than the full version.

// A compiler is required
new Vue({
  template: "<div>{{ hi }}</div>"});// No compiler is required
new Vue({
  render(h) {
    return h("div".this.hi); }});Copy the code

How do I use the full version?

Resolve. Alias: Create an alias for import or require to make module introduction easier.

The default version of vue is the run-time version. To use the full version, we can configure an alias in webpack:

/* ** build/webpack.base.config.js */

module.exports = {
  // ...
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js".// to use webpack 1, use 'vue/dist/vue.com.js',}}};Copy the code

Recompile NPM start, it’s OK.

Supports single file component.vue

vetur

Vue tooling for VS Code.

Provides code highlighting and auto-completion for.vue files.

Add the Hello. Vue

  • src/components/Hello.vue

    <template> <h1>Hello {{ name }}</h1> </template> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ data() { return { name: "Vue & Typescript" }; }}); </script> <style scoped> h1 { color: orange; } </style>Copy the code

  • src/index.ts

    import Vue from "vue";
import Hello from "./components/Hello.vue";

let app = new Vue({
  el: ".app".components: { Hello },
  template: `<hello/>`});Copy the code

It’s time for another error:

TS2307: Cannot find module './components/Hello.vue' or its corresponding type declarations.
Copy the code

The ‘./components/ hello. vue’ module or its corresponding type declaration could not be found.

Since TS does not recognize single-file components, add a declaration file for files like.vue.

A declaration file for a single-file component

Declare the.vue file as a module. The exported type is a constructor for vue

  • src/vue-shims.d.ts

    declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
Copy the code

Handles single-file component dependencies

$ npm i -D vue-loader vue-template-compiler css-loader
Copy the code
  • build/webpack.base.config.js
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  / /... Other configuration
  resolve: {
    / / add the vue
    extensions: [".js".".ts".".tsx".".vue"].alias: {
      vue$: "vue/dist/vue.esm.js",}},module: {
    rules: [{test: /\.vue$/,
        loader: "vue-loader"}, {test: /\.tsx? $/i,
        use: [
          {
            loader: "ts-loader".options: {
              // Add the.ts extension to the vue file to facilitate ts processing
              appendTsSuffixTo: [/\.vue$/]],}},exclude: /node_modules/,},// It applies to normal '.css 'files
      // and the '. Vue 'file' 
      {
        test: /\.css$/,
        use: ["vue-style-loader"."css-loader"],},],},plugins: [
    // Be sure to introduce this plugin to cast magic
    new VueLoaderPlugin(),
  ],
};
Copy the code

At this point, we set up the Vue development environment manually.