ts-frame

封装任务

1. 集成ts
2. 支持vue-class-component
3. 将老项目的组件复制过来
4. 支持scss

 1. 集成ts

1. 根目录增加tsconfig.json文件
2. 把src下面的.js都改成.ts
3. 把webpack.base.conf.js 里面的entry 改成main.ts
4. 更改main.ts里的代码

代码效果示例:

每个组件由三个单文件组成

xxx.ts  #组件，作用相当于xxx.vue
xxx.css #样式文件，由xxx.ts导入
xxx.html #模板文件，由xxx.ts导入

• 我的app.ts

import {Component, Provide} from 'vue-property-decorator'
import Vue from "vue";
import  "app.scss"; //引入css样式，如果这个页面没有单独样式，这步省略

@Component({
    template: require('./app.html') //引入模板文件
})
export default class AppPage extends Vue {
    mounted() {}
}

开始安装插件

// 安装class插件
npm i vue-class-component vue-property-decorator --save

//安装 ts-loader ，typescript
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

增加ts支持，首先找到./build/webpack.base.conf.js

• 找到resolve.extensions 里面加上.ts 后缀 （是为了之后引入.ts的时候不写后缀）

• 找到module.rules 添加webpack对.ts的解析

{
    test: /\.ts$/,
    exclude: /(node_modules|bower_components)/,
    loader: ["ts-loader", 'tslint-loader']
},
{                
    test:   /\.(html)$/,
    use:  {                
        loader:   'html-loader',             
    },         
}
//本来这里还有 scss的配置，但是vue已经预定义了，所以不要加，否则会冲突

• 我的tsconfig.json

{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "module": "es2015",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "target": "es6",
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./src/**/*"
  ]
}

 1.1 模板渲染失败，页面空白

Error : invalid template option:[object Object]

main.js 代码

//老家伙
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

//这里的components去掉，改成 render: h => h(),否则渲染不出来元素

//新代码

new Vue({
    el: '#app',
    router,
    render: h => h(AppPage),
})

AppPage 代码

@Component({
    template: require('./app.html') 
})

//这里我忘记了加`.html`，所以总是报这个错误,怪自己太粗心

//invalid template option:[object Object]

export default class AppPage extends Vue {
    mounted() {
    }
}

app.html 代码

<!-- id="app" 和main.js里面的el名称对应 -->
<div id="app" style="height:100%;">
  <router-view style="height:100%"></router-view>
</div>

 1.2 ts语法报错

报 typescript的类型声明var a : string 报语法错误

在webpack中加入ts-loader

{
    test: /\.ts$/,
    exclude: /(node_modules|bower_components)/,
    loader: ["ts-loader", 'tslint-loader']
}

 2. 安装vue-class-component

1. npm 下载vue-class-component

2. 为了支持属性，在babelrc里面加上以下代码

  {
      "plugins": ["transform-class-properties", "transform-decorators-legacy"],
  }

 2.1 报 @语法错误

与1.2其实是同一个问题，没有加载ts-loader

 3. 支持scss

webpack 中加入scss-loader

{
    "test": /\.scss$/,
    "use": [
        'vue-style-loader',
        {
            "loader": 'css-loader',
            "options": {
                sourceMap: true
            }
        },
        {
            "loader": 'sass-loader',
            "options": {
                "sourceMap": true
            }
        }
    ]
}

 3.1 scss加载失败

Error : Invalid CSS after "...load the styles": expected 1

在vue 中的 utils.js中已经加载了scss的解析器

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', {
      indentedSyntax: true
    }),
    scss: generateLoaders('sass'),//可以注释或者不要在webpack中加scss-loader
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}

//webpack中的scss和utils.js中的scss冲突了，只要一个即可
[
    {
        "test": /\.scss$/,
    }
]

所以我删除了wepack中的scss配置

本作品采用《CC 协议》，转载必须注明作者和本文链接