青橙优购——项目搭建

1.1 开发工具

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处:

  • 模板丰富
  • 完善的智能提示
  • 一键运行

当然,你依然可以根据自己的喜好,选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器!

1.1.1 下载 HBuilderX

  1. 访问 HBuilderX 的官网首页 www.dcloud.io/hbuilderx.h…
  2. 点击首页的 DOWNLOAD 按钮

1.1.2 安装 HBuilderX

  1. 将下载的 zip包 进行解压缩
  2. 将解压之后的文件夹,存放到纯英文的目录中(且不能包含括号等特殊字符)
  3. 双击 HBuilderX.exe 即可启动 HBuilderX

1.1.3 安装 scss/sass 编译

为了方便编写样式(例如:<style lang="scss"></style>),建议安装 scss/sass 编译 插件。插件下载地址:

ext.dcloud.net.cn/plugin?name…

进入插件下载页面之后,点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装,截图如下:

项目地址

1.2 新建 uni-app 项目

  1. 文件 -> 新建 -> 项目

  2. 填写项目基本信息 image.png

  3. 项目创建成功

image.png

1.3 目录结构

一个 uni-app 项目,默认包含如下目录及文件:

├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
复制代码

1.4 把项目运行到微信开发者工具

  1. 填写自己的微信小程序的 AppID:

  2. 在 HBuilderX 中,配置“微信开发者工具”的安装路径

  3. 在微信开发者工具中,通过 设置 -> 安全设置 面板,开启“微信开发者工具”的服务端口

image.png

  1. 在 HBuilderX 中,点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具,将当前 uni-app 项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试:

  2. 初次运行成功之后的项目效果:

image.png

  • 未能成功加载source map

 

  • shift+鼠标右键 image.png

添加到git

# 创建本地仓库
git init#查看更改的文件信息
git status 

# 将文件添加到暂存区
git add 文件
​
# 提交历史记录
git commit "提交日志"# 第一次使用git需要配置会提示配置用户,配置用户一下两行代码,(只需要配置一次),username是你的git账号,email是你的git邮箱
git config --global user.name 'username' 
git config --global user.email 'email' 

# 添加远端仓库地址
git remote add origin 你的远程仓库地址
​
# 推送提交
git push -u origin master
复制代码
复制代码

这里直接在码云里同步

image.png

如果之后项目代码有了变动需要提交:

#查看更改的文件信息
git status 
添加文件到缓存区(会覆盖之前的项目文件)
git add .
# 提交历史记录和描述信息
git commit -m '描述信息'
# 推到git上
git push
复制代码

GitHub项目地址

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天,点击查看活动详情

分类:
前端