项目搭建及初始化

前期准备

技术栈

• uni-app
• TypeScript
• vue2

  开发工具

  vscode

搭建项目并完成初始化 使用 CLI 搭建项目）

全局安装 vue-cli 3.x（如已安装请跳过此步骤）

# 安装稳定最新版
npm install -g @vue/cli
yarn global add @vue/cli 
# 安装指定版本
npm install -g @vue/cli@3.x.x
yarn global add @vue/cli@3.x.x
# 查看版本号
vue --version
vue -V

通过 CLI 创建 uni-app 项目

# <name> 输入项目名
vue create -p dcloudio/uni-preset-vue uni-loan-mate-platform

等待下载，之后会提示选择项目模板，选择 默认模板(TypeScript) 项目模板，如下所示：

选择后等待项目下载完成。

运行、发布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

可以自定义更多条件编译平台，比如钉钉小程序，参考package.json文档。

修改.vue文件组件为基于类的vue组件

// App.vue
<script lang="ts">
import { Vue } from 'vue-property-decorator'
export default Vue.extend({
    mpType: 'app',
    onLaunch() {
        console.log('App Launch')
    },
    onShow() {
        console.log('App Show')
    },
    onHide() {
        console.log('App Hide')
    }
});
</script>

Tips

• App.vue文件不能修改为基于类的Vue组件;
• uni-app申明文件采用命名空间方式编写,使用方式: UniApp.xxxx;

App.vue 文件在 $mount() 挂载Vue实例中注入

// main.ts 入口文件
import { Vue } from 'vue-property-decorator'
import App from './App.vue'
Vue.config.productionTip = false
const app = new Vue({
    render: h => h(App)
})
app.$mount() //挂载Vue实例

基于类的vue组件

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component({})
export default class Index extends Vue {
  // 初始数据可以直接声明为实例的 property
  title: string = 'Hello!'
  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.title)
  }
}
</script>

uni-app 初始化目录结构

#整体结构
┌─public                                
│  └─index.html                    
│─src                              代码编辑区
│  └─****                            查看下方src文件夹下目录结构
├─typings                 .d.ts 申明文件存放目录
├─.gitignore                        git 过滤文件
├─babel.config.js                babel 编译配置文件
├─postcss.congfig.js        css处理器配置文件
└─tsconfig.json                 TS 编译配置文件
#src文件夹下目录
┌─apis                    请求数据接口
├─common                                公共文件（static中不编译js（ES6）文件，可以放在该目录下）
│  └─css
│     └─reset.scss           scss文件
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─subpackages                分包优化
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
│  ├─images
│  │  ├─tabbar
│  │  │  └─icon.png            tabBar 需要的图片资源
├─store                              vuex 状态管理
├─utils                                 工具文件存在在该目录下
│  ├─dataTime           对时间的处理
│  ├─request            请求封装
│  └─wxsdk                            微信SDK封装
├─main.ts                  Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss                            uni 提供的默认变量

可以自定义目录，根据项目需求，参考uni-app文档。

附录:

tyconfig.json 配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators":true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "typeRoots" : ["./typings"],
    "types": [
      "webpack-env",
      "@dcloudio/types",
      "miniprogram-api-typings",
      "mini-types"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "exclude": [
    "node_modules",
    "unpackage",
    "src/**/*.nvue"
  ]
}

reset.scss 初始化样式文件

page {
  font-size: 28rpx;
  line-height: 1.5;
  color: #2c3e50;
  background: #fff;
  -webkit-overflow-scrolling: touch; /* 使 ios 列表滑动流畅 */
}
button {
  color: #333;
}
page,
view,
input,
text,
form,
navigator,
rich-text,
picker,
scroll-view,
cover-view,
open-data{
  box-sizing: border-box;
}
rick-text,
open-data,
form {
  display: block;
}
cover-view {
  line-height: 1.5;
  white-space: nowrap;
}
/* 隐藏滚动条 */
::-webkit-scrollbar{
  display: none;
}
button:after{
  border: 0;
}
/* 清除浮动 */
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

文件来源于 @京城一灯

参考资料：

uni-app官方文档
DCloud 问答社区：当 uni-app 遇见 vscode
搭建 uni-app ts 项目
Vue2.x TypeScript 支持