• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序框架部署:mpvue+typescript

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

开发前提:

  1、在微信公众平台注册申请 AppID

  2、安装开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 

框架部署:

  1、vue-cli 创建 mpvue,参考 http://mpvue.com/mpvue/quickstart.html

  2、配置 Typescript

# 安装 vue 与装饰器,mpvue-loader目前支持用TypeScript来写,功能还在完善中(WIP)。需要搭 配vue-property-decorator来使用。
$ npm install --save vue vue-property-decorator 
# 安装 typescript
$ npm install --save [email protected] 
# 安装  typescript 所需loader(注意存在版本兼容问题,需下载指定版本ts-loader与awesome-typescript-loader最新版目前不兼容webpack4以下版本)
$  npm install --save [email protected] [email protected]
# 安装声明文件@types/node @types/weixin-app
$ npm install --save @types/node @types/weixin-app

  3、安装官方微信小程序定义文件:npm install miniprogram-api-typings

  4、配置webpack,参考 http://mpvue.com/build/mpvue-loader.html

注:若找不到 webpack.conf.js 则对应找 webpack.base.conf.js,

    在第 7 步未做之前不要修改把 pages 里的 main.js 文件删掉!!

   5、让TypeScript识别Vue文件:

    TypeScript识别不了后缀为vue的文件,需要加入一个声明文件,

    在项目的src目录下新建一个名为vue-shim.d.ts的文件,在其中增加代码

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

  6、增加TypeScript配置:在项目根目录下新建一个名为 tsconfig.json 的文件,增加内容

{
    "compilerOptions": {
        // 与 Vue 的浏览器支持保持一致
        "target": "es2015",
        // 这可以对 `this` 上的数据属性进行更严格的推断
        "strict": true,
        // 如果使用 webpack 2+ 或 rollup,可以利用 tree-shake:
        "module": "es2015",
        "moduleResolution": "node",
        "baseUrl": "./",
        "outDir": "./dist/",
        "paths": {
            "vue": [
                "node_modules/mpvue"
            ],
            "@/*": [
                "src/*"
            ]
        },
        "types": [
            "@types/weixin-app", //声明文件
            "@types/node"
        ],
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": false,
        "skipLibCheck": true,
        "strictPropertyInitialization": false,
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
    "typeAcquisition": {
        "enable": true
    }
}
View Code

注:完整可看 https://www.tslang.cn/docs/handbook/tsconfig-json.html

  7、配置完main.ts后需要将webpack.conf.js中的配置入口文件后缀改为.ts

 

最终生成目录:


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
《三》大话 Typescript 接口发布时间:2022-07-18
下一篇:
TypeScript入门笔记(二)发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap