纯前端的计划记录管理app（vue3+ts+vant）

        由于很多记录类的app都会把数据记录在数据库，而不是本地，记录类的数据又相对比较隐私，所以打算自己开发个纯前端的计划记录管理app。本人是偏后端的全栈开发，这个项目用到的大部分技术和工具也是边学边做的，界面设计比较一般，有兴趣的可一起改进下。

        效果图：

 

 

 

        代码：

        github:https://github.com/lzijia/recordPlanhttps://github.com/lzijia/recordPlan

        gitee:recordPlan: record planhttps://gitee.com/lzijia/recordPlan

        开发使用的工具和技术:

        技术：vue3+ts+vant

        工具：vscode、hbuildx、MuMu模拟器

做一些记录和遇到的问题：

        1、vscode

        先自行安装node

        安装cli： npm install -g @vue/cli

        vue升级：vue upgrade --next

        添加ts：vue add typescript

        vue文档：TypeScript 支持 | Vue.js、

        ts文档：文档简介 · TypeScript中文网 · TypeScript——JavaScript的超集

        vant文档：https://vant-contrib.gitee.io/vant/#/zh-CN/  

        2、按需引入vant npm i babel-plugin-import -D

在 babel.config.js 中添加配置：

"plugins": [

    [

      "import",

      {

        "libraryName": "vant",

        "libraryDirectory": "es",

        "style": true

      }

    ]

  ]

3、安装路由：npm install vue-router@4

4、安装axios ：npm install axios

5、

问题：Cannot find module '@vue/cli-service/generator/template/src/App.vue' from 'D:\dev\project\samllproject\RecordPlanApp\code\node_modules\@vue\cli-plugin-typescript\generator\template\src'

解决：npm install --save-dev @vue/cli-service

6、vue3 vant一些写法需改：

7、axios post请求问题,使用qs.stringify(data)

npm install qs 

8、axios跨域问题：

 baseApi/feedback/insertOne  由于移动端使用 devServer.proxy会有问题，所以直接使用http://xxxx:xx/feedback/insertOne

如果使用本地浏览器测试 url改为 baseApi/feedback/insertOne

vue.config.js文件  devServer下的proxy开发注释

 proxy: {
      '/baseApi': {
        // 跨域的服务器地址
        target: 'http://xxxx:xx',
        // 是否允许跨域
        changeOrigin: true,
        //是否https接口
        secure: false,
        // 替换掉请求路径的/feedback为“”
        pathRewrite: { '^/baseApi': "" }
      },
    },

下一篇讲怎么用hbuildx打包成apk