vue2+typescript 项目、相关配置

1、新建项目并引入typescripe相关的loader、依赖包

1.1新建项目

vue init webpack  项目名称

1.2 添加 typescript 以及 ts-loader

cnpm install typescript  ts-loader --save

1.3 添加运行依赖包

cnpm install vue-class-component vue-property-decorator --save

2、配置webpack 、添加配置、文件引入的改动

2.1 打开webpack.base.conf.js文件，进行以下改动

• 修改入口文件main.js为main.ts
• extensions配置出增加 .ts 和 .tsx 后缀
• 添加ts-loader

  entry: {
    // 修改入口文件格式
    app: './src/main.ts'
  }
 
 // 修改extension增加.ts 和 .tsx后缀
 extensions: ['.js','.ts','.tsx', '.vue', '.json'],


 // 添加ts-loader

rules:[
    {
   
        test:/\.tsx?$/,
        loader:"ts-loader",
        exclude:/node_modules/,
        options:{
   
          appendTsSuffixTo:[/\.vue$/]
        }
      }
   ]
 

2.2 修改js文件为ts文件

找到入口文件main.js======》main.ts

main.ts中 将import App from "./App"改为 import App from "./App.vue"

注意，原来import的vue文件以后都必须加上.vue后缀

2.3 在根目录下添加tsconfig.json并配置

ts-loader会检索tsconfig.json文件，根据内部配置的规则来解析.ts文件

{
    
    "include": [ 
        "./src/**/*" 
    ], 
    "exclude": [ 
        "node_modules"
    ],   
    "compilerOptions": {
    
        "allowSyntheticDefaultImports": true, 
        "experimentalDecorators": true, 
        "strict": true, 
        "allowJs": true, 
        "module": "es2015", 
        "target": "es5", 
        "moduleResolution": "node", 
        "isolatedModules": true, 
        "lib"