vue 支持 ts

 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导入

vue 支持 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配置

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!