正文 

当前位置： 首页 > 程序 > java教程

如何在vue项目中使用typescript(代码片段)

wangjiachen666 wangjiachen666     2023-01-29     501

关键词：

0.前言

本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发。本指南非常灵活，它可以将TypeScript集成到现有的Vue项目中任何一个阶段。

1.初始化项目

首先，创建一个新的项目目录。

mkdir typescript-vue-tutorial
cd typescript-vue-tutorial

接着，在目录中创建如下目录结构。

typescript-vue-tutorial/
├─ dist/
└─ src/
   └─ components/

TypeScript文件将位于src目录下，经过TypeScript编译器进行编译，然后通过webpack进行打包，最终在dist目录下生成编译打包好的bundle.js。我们编写的任何组件都将放在src / components文件夹中。

mkdir src
cd src
mkdir components
cd ..

Webpack最终会为我们生成dist目录。

现在我们将把这个文件夹变成一个npm包。

npm init

执行上述命令，您将获得一系列提示。除程序入口点外，您可以使用默认值。您可以随时在为您生成的package.json文件中更改它们。

2.安装依赖

安装TypeScript，Webpack，Vue和必要的加载器。

npm install --save-dev typescript webpack ts-loader css-loader vue vue-loader vue-template-compiler

Webpack是一个工具，它将您的代码和可选的所有依赖项打包到一个.js文件中。虽然您不需要使用像Webpack或Browserify这样的打包工具，但这些工具将允许我们使用我们稍后会介绍的.vue文件。

我们不需要添加.d.ts文件，但是，如果我们使用的是一个没有声明文件的软件包，那么我们就需要安装相应的@types / package。

3.添加TypeScript配置文件

您也许想将所有的TypeScript文件放在一起——包括编写的代码以及必要的声明文件。

为此，您需要创建一个tsconfig.json，其中包含输入文件列表以及所有的编译设置。您只需在项目根目录下创建一个名为tsconfig.json的新文件，并填写以下内容：


    "compilerOptions": 
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    ,
    "include": [
        "./src/**/*"
    ]

4.添加Webpack配置文件

我们需要添加一个名为webpack.config.js的Webpack配置文件，来帮助我们打包项目。

新建webpack.config.js文件，并将以下内容写入该文件中：

var path = require('path')
var webpack = require('webpack')

module.exports = 
  entry: './src/index.ts',
  output: 
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  ,
  module: 
    rules: [
      
        test: /.vue$/,
        loader: 'vue-loader',
        options: 
          loaders: 
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
          
          // other vue-loader options go here
        
      ,
      
        test: /.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: 
          appendTsSuffixTo: [/.vue$/],
        
      ,
      
        test: /.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: 
          name: '[name].[ext]?[hash]'
        
      
    ]
  ,
  resolve: 
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: 
      'vue$': 'vue/dist/vue.esm.js'
    
  ,
  devServer: 
    historyApiFallback: true,
    noInfo: true
  ,
  performance: 
    hints: false
  ,
  devtool: '#eval-source-map'


if (process.env.NODE_ENV === 'production') 
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin(
      'process.env': 
        NODE_ENV: '"production"'
      
    ),
    new webpack.optimize.UglifyJsPlugin(
      sourceMap: true,
      compress: 
        warnings: false
      
    ),
    new webpack.LoaderOptionsPlugin(
      minimize: true
    )
  ])

5.添加构建脚本

在package.json文件中的script选项中，添加一个名为build的选项来运行Webpack.

"scripts": 
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1"

6.创建一个基础项目

配置好以上环境后，我们就可以创建一个Vue & TypeScript项目。

首先，新建./src/index.ts文件并写入以下内容。

// src/index.ts

import Vue from "vue";

let v = new Vue(
    el: "#app",
    template: `
    <div>
        <div>Hello name!</div>
        Name: <input v-model="name" type="text">
    </div>`,
    data: 
        name: "World"
    
);

接着，新建index.html 文件并写入以下内容。

<!doctype html>
<html>
<head></head>

<body>
    <div id="app"></div>
</body>
<script src="./dist/build.js"></script>

</html>

最后，执行命令npm run build，并且在浏览器中打开 index.html 。

此刻，你将看到页面上显示的Hello World。

在这下面，还有一个输入框，通过改变输入框的内容，页面上的内容也会随之改变。

恭喜！
现在你已经完全搞定了TypeScript和Vue！

7.添加一个组件

可以通过以下方式声明Vue组件：

// src/components/Hello.ts

import Vue from "vue";

export default Vue.extend(
    template: `
        <div>
            <div>Hello nameexclamationMarks</div>
            <button @click="decrement">-</button>
            <button @click="increment">+</button>
        </div>
    `,
    props: ['name', 'initialEnthusiasm'],
    data() 
        return 
            enthusiasm: this.initialEnthusiasm,
        
    ,
    methods: 
        increment()  this.enthusiasm++; ,
        decrement() 
            if (this.enthusiasm > 1) 
                this.enthusiasm--;
            
        ,
    ,
    computed: 
        exclamationMarks(): string 
            return Array(this.enthusiasm + 1).join('!');
        
    
);

该组件有两个按钮和一些文本。
渲染时，它需要一个初始的name和一个我们想要显示的感叹号的数量initialEnthusiasm。
当我们点击“+”按钮时，它会在文本末尾添加一个感叹号。
同样，当我们点击-按钮时，它会删除感叹号，直到只剩下一个感叹号。

声明好组件后，在根Vue实例中可以按照如下方式引用：

// src/index.ts

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

let v = new Vue(
    el: "#app",
    template: `
    <div>
        Name: <input v-model="name" type="text">
        <hello-component :name="name" :initialEnthusiasm="5" />
    </div>
    `,
    data:  name: "World" ,
    components: 
        HelloComponent
    
);

8.单文件组件

目前，定义组件较为常用的方式是使用.vue单文件方式定义，我们可以试着将上述定义的组件改写成单文件组件（SFC）。

当使用Webpack或Browserify构建项目时，Vue提供了像 vue-loader and vueify 这样的插件，这些插件允许您以类似HTML的文件定义组件。这些以.vue扩展名结尾的文件是单文件组件。

我们已经在安装依赖项时已经安装了vue-loader。并且，在webpack.config.js文件中指定了ts-loader的appendTsSuffixTo：[/ .vue $ /]选项，它允许TypeScript处理从单文件组件中提取的代码。

另外，我们还必须告诉TypeScript 当.vue文件被导入时它是什么样子的。

所以，我们需要添加vue-shims.d.ts文件：

// src/vue-shims.d.ts

declare module "*.vue" 
    import Vue from "vue";
    export default Vue;

我们不需要在任何地方导入此文件。它将由TypeScript自动包含，

现在，我们就可以编写一个单文件组件！

<!-- src/components/Hello.vue -->

<template>
    <div>
        <div class="greeting">Hello nameexclamationMarks</div>
        <button @click="decrement">-</button>
        <button @click="increment">+</button>
    </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend(
    props: ['name', 'initialEnthusiasm'],
    data() 
        return 
            enthusiasm: this.initialEnthusiasm,
        
    ,
    methods: 
        increment()  this.enthusiasm++; ,
        decrement() 
            if (this.enthusiasm > 1) 
                this.enthusiasm--;
            
        ,
    ,
    computed: 
        exclamationMarks(): string 
            return Array(this.enthusiasm + 1).join('!');
        
    
);
</script>

<style>
.greeting 
    font-size: 20px;

</style>

在根组件中导入：

// src/index.ts

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

let v = new Vue(
    el: "#app",
    template: `
    <div>
        Name: <input v-model="name" type="text">
        <hello-component :name="name" :initialEnthusiasm="5" />
    </div>
    `,
    data:  name: "World" ,
    components: 
        HelloComponent
    
);

在编写单文件组件时，我们需要注意以下几点：

  • 我们必须在script标签上声明 <script lang="ts">
  • 我们必须在index.ts中导入带有.vue扩展名的组件。
  • 我们默认导出一个对Vue.extend的调用（而不是选项包本身）,如果你不写Vue.extend，在构建项目时会遇到错误。

现在，您可以尝试运行npm run build并打开index.html来查看结果！

完整代码请戳TypeScript Vue Starter
(完)

如何在 Vue (Typescript) 中使用 axios？

】如何在Vue(Typescript)中使用axios？【英文标题】：HowtouseaxiosinVue(Typescript)?【发布时间】：2019-02-0220:13:51【问题描述】：我想在vue(Typescript)中使用axios，但我的代码遇到了麻烦。这是我的main.tsimportaxiosfrom\'axios\'Vue.prototype.$axios=axiosa... 查看详情

如何使用 Typescript 在 Vue 应用程序中使用 webcomponents

】如何使用Typescript在Vue应用程序中使用webcomponents【英文标题】：HowcanIusewebcomponentsinaVueapplicationusingTypescript【发布时间】：2020-07-1409:11:36【问题描述】：我正在尝试在我的Vue项目中使用Web组件。但是，它没有正确加载。我可以在... 查看详情

如何在带有 Typescript 的视图中使用 Vue 单文件组件？

】如何在带有Typescript的视图中使用Vue单文件组件？【英文标题】：HowdoIuseaVuesinglefilecomponentinaviewwithTypescript?【发布时间】：2020-12-0116:23:05【问题描述】：我尝试了很多方法，但总是遇到某种构建或运行时错误。经过大量搜索后... 查看详情

如何使用 TypeScript 在 Vue2.x 类组件中正确注释

】如何使用TypeScript在Vue2.x类组件中正确注释【英文标题】：HowtodoannotatingcorrectlyinVue2.xClasscomponentwithTypeScript【发布时间】：2021-08-1310:43:20【问题描述】：我已经通过@vue/composition-api采纳了我的项目//main.tsimportVuefrom\'vue\'importVueCompo... 查看详情

在 Vue.JS 中使用 TypeScript 时如何从导入中删除 .vue 扩展名？

】在Vue.JS中使用TypeScript时如何从导入中删除.vue扩展名？【英文标题】：Howtoremove.vueextensionfromimportswhenusingTypeScriptinVue.JS?【发布时间】：2019-03-2314:50:07【问题描述】：我用vue-cli3创建了一个项目并包含了TypeScript我的src/app.vue：<t... 查看详情

在基于vue-next-admin的vue3+typescript前端项目中，为了使用方便全局挂载的对象接口(代码片段)

在基于vue-next-admin的Vue3+TypeScript前端项目中，可以整合自己的.NET后端，前端操作一些功能的时候，为了使用方便全局挂载的对象接口，以便能够快速处理一些特殊的操作，如消息提示、辅助函数、正则测试等等。本篇随笔介绍在... 查看详情

在typescript+vue项目中使用ref

...操作。好了完美解决。很不巧，新项目用的是vue还是vue+typeScript的，直接，单纯的this.$refs.xxx不好用了，报错，识别不了，很尴尬。经过不懈努力终于找到了在typeS 查看详情

vue之--使用typescript(代码片段)

搭配TypeScript使用Vue​像TypeScript这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误，也让我们在重构大型项目的时候更有信心。通过IDE中基于类型的自动补全，TypeScript还... 查看详情

（如何）我应该在 Vue.js 组件（TypeScript）中使用访问修饰符（公共、私有等）吗？

】（如何）我应该在Vue.js组件（TypeScript）中使用访问修饰符（公共、私有等）吗？【英文标题】：(How)ShouldIuseaccessmodifiers(public,privateetc.)inVue.jscomponents(TypeScript)?【发布时间】：2021-10-0909:41:27【问题描述】：我有一个带有TypeScriptv... 查看详情

在vue项目中写typescript

两种方式:extends写法(不使用装饰器)----更贴近于vue语法importVuefrom'vue'importMainHeaderfrom'./header.vue'importMainContentfrom'./content.vue'interfaceUser{name:string,age:number}exportdefaultVue.extend({component 查看详情

在typescript项目中引入如何js依赖

参考技术A最近做的项目为vue+ts，第一次使用ts，项目中遇到不少坑，我都使用笔记一一记了下来，其中有一条就是如何在ts中引入js依赖。首先如果该依赖存在@types的情况就不再多说，但是有些依赖并没有@types，报错很是恶心。... 查看详情

在普通的 VueJS 项目中使用 Typescript 函数

】在普通的VueJS项目中使用Typescript函数【英文标题】：UsingTypescriptfunctionsinplainVueJSproject【发布时间】：2021-09-2702:47:36【问题描述】：TL;DR：如何在我的普通jsVue-Components中导入和使用typescript模块？我有一个Vue2（还不是3）项目。... 查看详情

如何在 Typescript 项目中使用 express-mysql-session？

】如何在Typescript项目中使用express-mysql-session？【英文标题】：Howtouseexpress-mysql-sessioninTypescriptprojects?【发布时间】：2017-12-0819:19:33【问题描述】：我正在尝试在Typescript项目中使用express-session和express-mysql-session。这是我的代码的... 查看详情

如何使用 TypeScript 在 Vue“数据”选项中使用 JQuery 元素？

】如何使用TypeScript在Vue“数据”选项中使用JQuery元素？【英文标题】：HowtouseaJQueryelementinVue\'data\'optionusingTypeScript?【发布时间】：2019-01-0514:16:51【问题描述】：我希望在vue\'data\'对象中保留一个jQuery元素的引用，但TypeScript向我... 查看详情

在vue中使用typescript(代码片段)

前言　　恕我直言，用Typescript写Vue真的很难受，Vue对ts的支持一般，如非万不得已还是别在Vue里边用吧，不过听说Vue3会增强对ts的支持，正式登场之前还是期待一下吧嘻嘻。　　本篇不会过多讲述ts语法，着重记录下在Vue中使用t... 查看详情

如何使用 VS Code 在 .vue 文件中使用 Typescript？

】如何使用VSCode在.vue文件中使用Typescript？【英文标题】：HowtoworkwithTypescriptin.vuefilesusingVSCode?【发布时间】：2017-06-2220:29:30【问题描述】：我正在使用VisualStudioCode、Vue2（webpack模板）和Typescript。这是我的App.vue组件：<template>... 查看详情

在vue3中使用typescript和jsx

本文将介绍如何在Vue3中使用tsx首先回答两个问题：WhyVue3在Vue2中，组件相关的逻辑都被写在一个文件中，经常会出现一个组件几千行代码，非常难以维护；而且一个功能的相关代码通常会分散写在datamethodscreated等各个选项中，想... 查看详情

如何在带有 typescript 项目的 react js 中使用 .env 文件？

】如何在带有typescript项目的reactjs中使用.env文件？【英文标题】：howtouse.envfileinareactjswithtypescriptproject?【发布时间】：2021-02-0317:55:37【问题描述】：我有一个reactjs项目，但带有打字稿。我知道我们可以创建.env文件并定义一些配... 查看详情