vue2使用ts写法

设置vue.config.js文件

 1 module.exports = {
 2     css: {
 4         loaderOptions: {
 5             scss: {
 6                 prependData: '@import "./src/assets/css/variables.scss";'
 7             }
 8         }
 9     }
10 }

创建一个Login.tsx文件

import {Component, Vue} from 'vue-property-decorator';
// @ts-ignore
import css from './login.module.scss';

@Component({
  components: {},
})

export default class Login extends Vue {
  public onSubmit() {
    console.log('onSubmit')
  }
  onClear() {
    console.log('onClear')
  }
  render() {
    return (
      <div class={css.login}>
        <el-form>
          <el-form-item>
            <el-button class={css['user-name']} type="primary" onclick={this.onSubmit}>
              立即创建
            </el-button>
            <el-button onclick={this.onClear}>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    )
  }
}

创建一个login.module.scss文件（注意样式文件必须已.module文件名结尾才能使用模块的方式）

 1 .login{
 2   font-size: 32px;
 3   .test{
 4     color: red;
 5   }
 6 }
 7 
 8 .user-name{
 9   font-size: 22px;
10   color: #20a0ff;
11 }