TypeScript基础篇 - Vue-TS-Webpack 环境实战

目录

[Webpack+Vue+TS 环境配置](#Webpack+Vue+TS 环境配置)

scripts/webpack.config.js

src/Hello.tsx

src/SfcDemo.vue

src/main.tsx

src/shims-vue.d.ts

package.json


Webpack+Vue+TS 环境配置

scripts/webpack.config.js

javascript 复制代码
const path = require('path')
// 安装插件 npm install webpack webpack-cli @babel/core @babel/preset-env @babel/preset-typescript
// 安装vue3 npm install vue@next 
// 安装vue3对应的vue-loader // npm install vue-loader@next 
// 安装 npm install babel-loader -D
// npm install @vue/compiler-sfc -D // 用于编译文件组件用的
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  entry: path.resolve(__dirname, "../src/main.tsx"),  // 入口文件
  mode: "development", // 开发模式
  module: {
    rules: [// 转义规则
      {
        test: /\.tsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            "@babel/preset-env", // 转义es
            "@babel/preset-typescript"// 转义ts
          ],
          plugins: [
            "@vue/babel-plugin-jsx" // 用于转义vue jsx
          ],
        },
        // 排除
        exclude: /node_modules/
      },
      {
        // .vue的文件
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  resolve: { // import支持的扩展名
    extensions: [".tsx", ".ts", ".js", '.vue']
  },
  output: {// 打包后信息配置
    filename: 'bundle.js',
    path: path.resolve(__dirname, "../build")
  },
  devServer: {
    static: {// 打包静态文件配置
      directory: path.resolve(__dirname, "../build"),
    },
    port: 3020// 端口
  },
  plugins: [
    new HtmlWebpackPlugin({// 生成html文件模板
      template: path.resolve(__dirname, '../template.html')
    }),
    new VueLoaderPlugin()
  ]
}

src/Hello.tsx

javascript 复制代码
export default () => {
  return <div>Hello JSX</div>
}

src/SfcDemo.vue

html 复制代码
<template>
<div>Hello SFC</div>
</template>
<script>
export default {
  setup(){
    return {
    }
  }
}
</script>
<style>
</style>

src/main.tsx

javascript 复制代码
import { createApp } from 'vue'
// 让ts认.vue;需要一个垫片文件shims-vue.d.ts
import SfcDemo from './SfcDemo.vue'
import Hello from './Hello'
const App = () => {
  return <div>
    <SfcDemo />
    <Hello />
  </div>
}
createApp(App).mount("#root")

src/shims-vue.d.ts

javascript 复制代码
declare module '*.vue' { // 告诉ts 按【vue-component】 按下面的类型执行
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

package.json

javascript 复制代码
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config scripts/webpack.config.js",
    "serve": "webpack serve --config scripts/webpack.config.js"
  },
相关推荐
绅士玖1 分钟前
Vue.js 核心特性解析:响应式原理与组合式API实践
vue.js
阿珊和她的猫1 小时前
React 与 Vue 的区别:你会选择哪个框架呢
前端·vue.js·react.js
浪裡遊1 小时前
前端高频面试题day2
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
Vue3 首款 3D 数字孪生编辑器 正式开源!
前端·javascript·vue.js
海盐泡泡龟2 小时前
deepSeek浅谈对vue的mixin的理解,用于什么应用场景?
开发语言·前端·javascript·vue.js
不思念一个荒废的名字2 小时前
【黑马JavaWeb+AI知识梳理】前端Web基础02 - JS+Vue+Ajax
前端·javascript·vue.js
工业互联网专业2 小时前
基于springboot+vue的摄影师分享交流社区的设计与实现
java·vue.js·spring boot·毕业设计·源码·课程设计·摄影师分享交流社区
艾小逗6 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
Hamm9 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript