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

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

微借阅小程序开发实战(一)-运用uni-app结合vscode进行前端开发_第1张图片
微借阅小程序开发实战(一)-运用uni-app结合vscode进行前端开发_第2张图片
微借阅小程序开发实战(一)-运用uni-app结合vscode进行前端开发_第3张图片

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 项目模板,如下所示:微借阅小程序开发实战(一)-运用uni-app结合vscode进行前端开发_第4张图片

在vscode中打开项目

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

  • 安装vue语法提示插件vetur
    微借阅小程序开发实战(一)-运用uni-app结合vscode进行前端开发_第6张图片
  • CLI 工程默认带了uni-app语法提示和5+App语法提示
    微借阅小程序开发实战(一)-运用uni-app结合vscode进行前端开发_第7张图片

安装组件语法提示

npm i @dcloudio/uni-helper-json

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

导入 HBuilderX 自带的代码块

  • 从 github 下载 uni-app代码块,放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。
    微借阅小程序开发实战(一)-运用uni-app结合vscode进行前端开发_第9张图片

运行项目

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

你可能感兴趣的:(vue,前端)