VUE+js项目改为VUE+TypeScript


吐槽：不仅要学VUE,还要用TypeScript,对于一个后端，听都没听过好吗；项目都前后端分离了，连个前端工程师都懒得招！害…没得狗了

1.Vue 引入 TypeScript
引入TypeScript需要安装必要的、需要的插件：

//安装vue的官方插件
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

具体啥意思，额也不清楚
2.修改webpack配置
在这里插入图片描述
将main.js改为main.ts；在resolve中添加‘.ts’

entry: {
    // app: './src/main.js',
    app: './src/main.ts',
  }

resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

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

{                           // 加入对文件的ts识别         
        test: /\.ts$/,
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'tslint-loader'
      }, {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      }

ts-loader 会检索当前目录下的 tsconfig.json 文件，根据里面定义的规则来解析.ts文件（就跟.babelrc的作用一样）
tslint-loader 作用等同于 eslint-loader

既然上面的路径名改了，那对应的文件也要改咯。
将对应目录下的main.js改为main.ts
在这里插入图片描述
改为ts文件后，里面有些语法会报警告的，根据警告修改就好。
以下是我的：

an alias.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css'

Vue.use(elementUI)

import axios from 'axios'
Vue.prototype.axios = axios

import qs from 'qs'
Vue.prototype.qs = qs

Vue.config.productionTip = false

/* eslint-disable no-new */
const app = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

注意：该加‘.vue’，还有该去除‘；’号的，这些都会报出警告
在这里插入图片描述
在这里插入图片描述
3.添加tsconfig.json文件
文件地址放在根目录：
在这里插入图片描述

{
  "compilerOptions": {
    // 编译目标平台
    "target": "es5",
    // 输出目录
    "outDir": "./dist/",
    // 添加需要的解析的语法，否则TS会检测出错。
    "lib": ["es2015", "es2016", "dom"],
    // 模块的解析
    "moduleResolution": "node",
    // 指定生成哪个模块系统代码
    "module": "esnext",
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": false,
    // 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
    "sourceMap": true,
    // 允许编译javascript文件
    "allowJs": true,
    // 指定基础目录
    "baseUrl": "./",
    // 启用装饰器
    "experimentalDecorators": true,
    // 移除注释
    "removeComments": true,
    "pretty": true,
    // 是相对于"baseUrl"进行解析
    "paths": {
      "vue": ["node_modules/vue/types"],
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

4.添加tslint.json文件

{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  }
}

5.让ts识别vue
由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts

/**
 * 告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理
 * 而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。
 * 原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件
 */
declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}
/**
 * 告诉 TypeScript window是个全局对象，直接可用，这样就不会在window.xx = 123时报错
 */
declare var window: any
/**
 * 引入部分第三方库/自己编写的模块的时候需要额外声明文件
 * 引入的时候，需要使用类似 import VueLazyLaod from 'vue-lazyload' 的写法
 */
declare module 'vue-lazyload'
declare module '@zz/perf/vue'
declare module 'raven-js'
declare module 'raven-js/plugins/vue'

到这里基本已经大功告成，运行项目，应该可以正常运行了
最后好事需要将vue中的js代码转成ts代码，详细的转换规则一时也说不清，我将我的贴上来
js:

<script>
    export default {
        data() {
            return {
                //添加form
                addForm: {
                    personName: '',//姓名
                    personSex: '',//性别
                    personAge: '',//年龄
                    personDate: '',//入职日期
                    personEmail: '',//邮箱
                    personPhone: '',//联系方式
                    personPlan: '',//个人规划
                    personAttr: [],//个人定位
                    province: '',//省
                    city: '',//市
                    regional: ''//区
                },
                rules: {
                    personName: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
                    ],
                    personAge: [
                        { required: false, message: '请输入年龄', trigger: 'blur' },
                        { type: 'number', message: '请输入数字类型', trigger: ['blur','change'] }
                    ],
                    personEmail: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    personPhone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的手机号码或者座机号', }
                    ],
                },
                //时间选择
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                //报表数据集合
                tableData: [],
                search: '',
                dialogVisible: false,
                pageSize: 5,
                currentPage: 1,
                total: 0,
                //查询form
                searchForm: {
                  personName: '',//用户姓名
                  personAttr: '',//个人定位
                  personDate: '',//入职时间
                  province: '',//省
                  city: '',//市
                  regional: ''//区
                },
                disablePage: false,
                provinces: [],//省
                citys: [],//市
                regionals: []//区
            }
        },
        methods: {
            handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
              this.pageSize=val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.onSearch();
            },
            //增加页面关闭事件
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //增加页面取消事件
            cancel() {
                this.dialogVisible = false;
                this.emptyUserData();
            },
            emptyUserData(){
                this.addForm = {
                    personName: '',//姓名
                    personSex: '',//性别
                    personAge: '',//年龄
                    personDate: '',//入职日期
                    personEmail: '',//邮箱
                    personPhone: '',//联系方式
                    personPlan: '',//个人规划
                    personAttr: '',//个人定位
                    province: '',//省
                    city: '',//市
                    regional: ''//区
                }
            },
            //增加用户与服务器交互
            addPerson(addForm) {
               this.$refs[addForm].validate((valid) => {
                 if (valid) {
                   this.addPersonSubmit();
                   this.dialogVisible = false;
                 } else {
                   console.log('error submit!!');
                   return false;
                 }
               });
            },
            //form提交事件
            addPersonSubmit() {
              let postData = this.qs.stringify({
                  personName: this.addForm.personName,//姓名
                  personSex: this.addForm.personSex,//性别
                  personAge: this.addForm.personAge,//年龄
                  personDate: this.addForm.personDate,//入职日期
                  personEmail: this.addForm.personEmail,//邮箱
                  personPhone: this.addForm.personPhone,//联系方式
                  personPlan: this.addForm.personPlan,//个人规划
                  personAttr: this.addForm.personAttr.join(","),//个人定位
                  province: this.addForm.province,//省
                  city: this.addForm.city,//市
                  regional: this.addForm.regional
              });
              this.axios({
                  // headers: {
                  //     'Content-Type': 'application/json;charset=utf-8'
                  // },
                  method: 'post',
                  //http://127.0.0.1:8080
                  url:'/api/person/save',
                  data:postData
              }).then(response =>
              {
                  var code = response.data.code;
                  if(code == 200){
                    this.currentPage = 1;
                    this.$message({
                        type: 'success',
                        message: '已添加!'
                    });
                    this.onSearch();
                  }else{
                    this.$message({
                        type: 'error',
                        message: response.data.msg
                    });
                  }
              }).catch(error =>
              {
                  console.log(error);
              });

            },
            //获取所属城市
            selectCitys(cityParentNum,cityLeave) {
              //http://127.0.0.1:8080
                this.axios.get('/api/city/findList',{
                  params: {
                        cityParentNum: cityParentNum,
                        cityLeave: cityLeave,
                        }
                }).then(response =>
                {
                    console.log(response.data);
                    let data = response.data.data;
                    //判断城市等级，将对应的数据放到对应的集合，同时初始化子城市
                    if(cityLeave == '1'){
                      this.provinces = data;
                    }else if(cityLeave == '2'){
                      this.searchForm.city = '';
                      this.citys = data;
                      this.searchForm.regional = '';
                    }else{
                      this.searchForm.regional = '';
                      this.regionals = data;
                    }
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            //省市区级联选中事件
            selectChanged(cityNum) {
              console.log(cityNum);
              var cityLeave = '2';
              console.log('error'+cityNum.length);
              if(cityNum.length > 4){
                cityLeave = '3';
              }
              this.selectCitys(cityNum,cityLeave);
            },
            //查询按钮
            onSearch() {
                let postData = this.qs.stringify({
                    personName: this.searchForm.personName,
                    personAttr: this.searchForm.personAttr,
                    personDate: this.searchForm.personDate,
                    province: this.searchForm.province,
                    city: this.searchForm.city,
                    regional: this.searchForm.regional,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                });
                console.log("postData:"+postData);
                this.axios({
                    method: 'post',
                    //http://127.0.0.1:8080
                    url: '/api/person/findList',
                    data: postData
                }).then(response =>
                {
                    console.log("person/findList:"+response);
                    this.tableData = response.data.rows;
                    this.disablePage = true;
                    this.total = response.data.total;
                }).catch(error =>
                {
                    console.log(error);
                });
            },

            //重置
            reset(searchForm) {
              this.$refs[searchForm].resetFields()
            }
        },
        created() {
            this.onSearch();
            this.selectCitys('0','1');
        },
    }
</script>

TS：

<script lang="ts">
    import Vue from 'vue'
  import Component from 'vue-class-component'
  import qs from 'qs'
  import axios from 'axios'

  @Component
  export default class HelloWorld extends Vue {

    public $refs!: {
        addForm: Element
    }

    //添加form
    addForm = {
        personName: '',//姓名
        personSex: '',//性别
        personAge: '',//年龄
        personDate: '',//入职日期
        personEmail: '',//邮箱
        personPhone: '',//联系方式
        personPlan: '',//个人规划
        personAttr: [],//个人定位
        province: '',//省
        city: '',//市
        regional: ''//区
    };
    rules = {
        personName: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
        ],
        personAge: [
            { required: false, message: '请输入年龄', trigger: 'blur' },
            { type: 'number', message: '请输入数字类型', trigger: ['blur','change'] }
        ],
        personEmail: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        personPhone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的手机号码或者座机号', }
        ],
    };
    //时间选择
    pickerOptions1 = {
        disabledDate(time) {
            return time.getTime() > Date.now();
        }
    };
    //报表数据集合
    tableData = []
    search = ''
    dialogVisible = false
    pageSize = 5
    currentPage = 1
    total = 0
    //查询form
    searchForm = {
      personName: '',//用户姓名
      personAttr: '',//个人定位
      personDate: '',//入职时间
      province: '',//省
      city: '',//市
      regional: ''//区
    };
    disablePage = false
    provinces = []//省
    citys = []//市
    regionals = []//区

    handleSizeChange(val: number) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val;
    }
    handleCurrentChange(val: number) {
        console.log(`当前页: ${val}`);
        this.currentPage=val;
        this.onSearch();
    }
    //增加页面关闭事件
    handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
    }
    //增加页面取消事件
    cancel() {
        this.dialogVisible = false;
        this.emptyUserData();
    }

    emptyUserData(){
        this.addForm = {
            personName: '',//姓名
            personSex: '',//性别
            personAge: '',//年龄
            personDate: '',//入职日期
            personEmail: '',//邮箱
            personPhone: '',//联系方式
            personPlan: '',//个人规划
            personAttr: [],//个人定位
            province: '',//省
            city: '',//市
            regional: ''//区
        }
    }
    //增加用户与服务器交互
    addPerson(addForm) {
       this.$refs[addForm].validate((valid) => {
         if (valid) {
           this.addPersonSubmit();
           this.dialogVisible = false;
         } else {
           console.log('error submit!!');
           return false;
         }
       });
    }
    //form提交事件
    addPersonSubmit() {
      let postData = qs.stringify({
          personName: this.addForm.personName,//姓名
          personSex: this.addForm.personSex,//性别
          personAge: this.addForm.personAge,//年龄
          personDate: this.addForm.personDate,//入职日期
          personEmail: this.addForm.personEmail,//邮箱
          personPhone: this.addForm.personPhone,//联系方式
          personPlan: this.addForm.personPlan,//个人规划
          personAttr: this.addForm.personAttr.join(","),//个人定位
          province: this.addForm.province,//省
          city: this.addForm.city,//市
          regional: this.addForm.regional
      });
      axios({
          // headers: {
          //     'Content-Type': 'application/json;charset=utf-8'
          // },
          method: 'post',
          //http://127.0.0.1:8080
          url:'/api/person/save',
          data:postData
      }).then(response =>
      {
          var code = response.data.code;
          if(code == 200){
            this.currentPage = 1;
            this.$message({
                type: 'success',
                message: '已添加!'
            });
            this.onSearch();
          }else{
            this.$message({
                type: 'error',
                message: response.data.msg
            });
          }
      }).catch(error =>
      {
          console.log(error);
      });

    }
    //获取所属城市
    selectCitys(cityParentNum:String,cityLeave:String) {
      //http://127.0.0.1:8080
        axios.get('/api/city/findList',{
          params: {
                cityParentNum: cityParentNum,
                cityLeave: cityLeave,
                }
        }).then(response =>
        {
            console.log(response.data);
            let data = response.data.data;
            //判断城市等级，将对应的数据放到对应的集合，同时初始化子城市
            if(cityLeave == '1'){
              this.provinces = data;
            }else if(cityLeave == '2'){
              this.searchForm.city = '';
              this.citys = data;
              this.searchForm.regional = '';
            }else{
              this.searchForm.regional = '';
              this.regionals = data;
            }
        }).catch(error =>
        {
            console.log(error);
        });
    }
    //省市区级联选中事件
    selectChanged(cityNum:String) {
      console.log(cityNum);
      var cityLeave = '2';
      console.log('error'+cityNum.length);
      if(cityNum.length > 4){
        cityLeave = '3';
      }
      this.selectCitys(cityNum,cityLeave);
    }
    //查询按钮
    onSearch() {
        let postData = qs.stringify({
            personName: this.searchForm.personName,
            personAttr: this.searchForm.personAttr,
            personDate: this.searchForm.personDate,
            province: this.searchForm.province,
            city: this.searchForm.city,
            regional: this.searchForm.regional,
            pageNum: this.currentPage,
            pageSize: this.pageSize,
        });
        console.log("postData:"+postData);
        axios({
            method: 'post',
            //http://127.0.0.1:8080
            url: '/api/person/findList',
            data: postData
        }).then(response =>
        {
            console.log("person/findList:"+response);
            this.tableData = response.data.rows;
            this.disablePage = true;
            this.total = response.data.total;
        }).catch(error =>
        {
            console.log(error);
        });
    }
    //重置
    reset(searchForm) {
      this.$refs[searchForm].resetFields()
    }


    created() {
        this.onSearch();
        this.selectCitys('0','1');
    }

  }

</script>

关于报错
在这里插入图片描述

Module build failed: Error: You may be using an old version of webpack; please check you’re using at least version 4

这种就是版本冲突了，强制降级就好，执行以下命令
npm install ts-loader@3

# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue