如何在Vue项目中使用Typescript

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 {{name}}{{exclamationMarks}}</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 {{name}}{{exclamationMarks}}</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
(完)

原文地址：https://www.cnblogs.com/wangjiachen666/p/10058079.html

时间： 2024-10-11 07:00:53

如何在Vue项目中使用Typescript的相关文章

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

如何在Vue项目中给路由跳转加上进度条

1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验.本篇文章就来教你如何在Vue项目中实现这样的进度条. 2.安装Nprogress 虽然我们也可以自己手动实现这样的功能,但是,nprogress.js已经帮我们把进度条的样式呀,功能呀都已经封装的很好了,既然有现成的轮子,我们就直接使用轮子就好啦! npm inst

转：如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美

新手如何在Vue项目中优雅的使用UEditor（百度富文本编辑器）

1.去官网,下载ueditor,解压,重命名,放在vue项目中的static文件夹下. ps:新手会觉得在官网上有几种不同版本的文件,俺到底要下载哪一个,如果你仅仅是一个前端,那么好,只要是最新版本的UEditor,随便下,如果你比较负责,问问你后端同事用什么语言写后端的,那就用什么版本的,其实不同语言的功能都一样,只是为了方便给后面图片上传的配置提供方便. 官网链接:http://ueditor.baidu.com/website/download.html UEditor目录如下所示: 2.

如何在vue项目中引入element ui组件

(1)安装element ui,即: npm i element-ui -S 然后在项目中的node_modules目录下查看是否有element-ui文件夹,如果有说明安装成功了: (2)引入element ui 在main.js中引入element ui,即: 1 import ElementUI from 'element-ui' 2 import 'element-ui/lib/theme-chalk/index.css' 3 Vue.use(ElementUI) [注意红色部分,以前是

如何在vue项目中使用echarts和高德地图绘制折线和热力图

1.先下载相关的依赖,这里echarts和高德地图放到一起.(高德地图需要先去申请一个key) // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router fr

vue项目中使用阿里iconfont图标

在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标库,先看一下官网 可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种 方法一:简单粗暴法 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 例如我现在选择三个图标 点击购物车,添加至项目 为了方便可以给项目起一个名字 选

vue项目中引入Sass

Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolv