vue2 in typescript2 (3)

来源：互联网发布：北师大网络教育登录编辑：程序博客网时间：2024/06/08 06:12

环境配置

增加开发包的依赖

npm install typescript ts-loader --save-dev

增加运行依赖包

npm i vue-class-component --save

修改src目录中的内容
main.js修改为main.ts
修改app.vue内容,将script内替换为如下内容

<script  lang="ts">import Vue from 'vue'import Component from 'vue-class-component';@Component({  name:"app"})export default class App extends Vue {  data () {    return {      msg: 'Welcome to Your Vue.js App'    }  }}</script>

配置tsconfig.json,重点
allowSyntheticDefaultImports
lib
module
moduleResolution

{    "compilerOptions": {      "target": "es5",      "allowSyntheticDefaultImports": true,      "lib": [        "dom",        "es5",        "es2015.promise"      ],      "module": "es2015",      "moduleResolution": "node",      "outDir": "lib",      "isolatedModules": false,      "experimentalDecorators": true,      "declaration": true,      "noImplicitAny": true,      "noImplicitThis": true,      "strictNullChecks": true,      "removeComments": true,      "suppressImplicitAnyIndexErrors": true    },     "exclude": [          "node_modules"      ],    "include": [      "src/**/*.ts"    ],    "compileOnSave": false  }

修改webpack配置
webpack.config.js

1.修改入口
将entry.app的main.js修改为main.ts
如下所示

module.exports = {  entry: {    app: './src/main.ts'  },

在resolve中添加 extensions: [‘.ts’,’.js’, ‘.json’]
如下所示

module.exports = {  resolve: {    extensions: ['.ts','.js', '.json']  },

在module.rules中添加ts-loader和raw-loader

module.exports = {  module: {    rules: [      {        test: /\.ts$/,        exclude: /node_modules|vue\/src/,        loader: 'ts-loader',        options: {          appendTsSuffixTo: [/\.vue$/]        }      },

运行测试
npm run dev

自动打开浏览器
http://localhost:8080

阅读全文

0 0