微借阅小程序开发实战(一)-运用uni-app结合vscode进行前端开发

微借阅小程序开发目的是为公司各个部门同事互相借阅书籍，部分界面截图

CLI 工程

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

npm install -g @vue/cli

通过 CLI 创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project

• 此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，如下所示：

在vscode中打开项目

• 安装vue语法提示插件vetur
  
• CLI 工程默认带了uni-app语法提示和5+App语法提示
  

安装组件语法提示

npm i @dcloudio/uni-helper-json

导入 HBuilderX 自带的代码块

• 从 github 下载 uni-app代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。
  

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

• %PLATFORM% 可取值如下：

值	平台
h5	h5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	头条小程序
mp-qq	QQ小程序

项目源码

链接: https://gitee.com/JasonLee1286791087/book/tree/master/book-frontend