uni使用vue-cli4.x搭建ts+eslint+prettier项目

一、介绍

        uniapp 是一款多端框架，虽然存在许多小bug，但对于快速开发一款多端应用，还是一把利器。本文讲述以此模版如何来开发一款微信小程序。

模版的 github 地址：https://github.com/zhanjinfeng/uniapp-template

二、项目结构

项目架构采用的是 vue-cli 的模版，相信大家熟悉 vue 框架开发的同学都已经烂熟于心了。

根目录下是项目相关的配置文件

src 就是我们的业务代码目录

推荐使用 vscode 编辑器进行开发。安装 eslint、prettier、vetur三个插件，开发体验极强。

三、run 个 hello world 吧

## clone registry
git clone https://github.com/zhanjinfeng/uniapp-template


## 安装依赖
npm i

## run 指定平台小程序，可在 package.json 进行修改
npm run serve

此时 在 dist 目录下可以发现编译后的小程序源码文件夹

然后只要打开微信小程序开发工具，选择导入一个小程序，目录选择所示的文件夹 mp-weixin 即可。

 

四、业务代码

项目跑起来后，我们就可以关注我们的业务代码的编写了。就是我们的 src 目录下的文件。

 

• /src/page 页面代码
• /src/api 接口相关
• /src/static 静态资源
• /src/utils 封装好的工具函数库
• /src/pages.json 页面相关配置（必填）

最后给大家贴一波我用 uniapp 这个框架模版开发的小程序，十二睡前故事集，主要是手机各种各样的故事，在一个睡不着的夜晚，可以想起打开它。

想了解更多开发细节可以评论告诉我。我会一一解答各位同学的疑问。