TypeScript + uniApp + uView 搭建微信小程序项目框架
发表时间:2021-1-4
发布人:葵宇科技
浏览次数:166
vue create -p dcloudio/uni-preset-vue ts-uni-mini(这里是项目名称)
选择 默认模版(TypeScript)
创建完进入项目
cd ts-uni-mini
二、在新项目的vue文件中使用内联ts
按需引入vue装饰器
import { Component,Vue ,Watch} from "vue-property-decorator";
不管干啥先把下面这句话加上。
@Component({}) //必须
启动项目 npm run dev:mp-weixin
三、打开微信开发者工具
导入项目
选择导入的项目
项目启动成功
四、引入 uView
- 安装uView
npm install uview-ui
- 在 sfc.d.ts 文件添加声明
declare module 'uview-ui'
- 引入uView主JS库
在项目根目录中的main.ts中,引入并使用uView的JS库,注意这两行要放在import Vue之后。
// main.ts import uView from "uview-ui"; Vue.use(uView);
- 在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。 /* uni.scss */ @import 'uview-ui/theme.scss';
- 在 App.vue 引入uView基础样式
- 配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
温馨提示
uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。
// pages.json { "easycom": { "^u-(.*)": "uview-ui/components/u-1.vue" } }
五、请求封装目录如下