乐趣区

关于vue.js:新手小白都能看懂的uniapp小程序项目搭建流程

jiezi

搭建步骤

1. 装置 HBuilder 编辑器

HBuilder 是 uni-app 官网团队专门定制的编辑器，它对 Vue 做了大量优化投入，且反对 uni-app 官网库 Api 的智能提醒和推断，同时，咱们也能够在通过编辑器疾速的创立各种场景下的我的项目模板，总之 HBuilder 是用 uni-app 进行利用开发的首选编辑器，能够拜访其官网进行下载安装，点击如下链接可间接跳转：
Hbuilder 官网下载地址

2. 初始化我的项目

装置好 HBuilder 后，关上编辑器，点击左上角菜单“文件”->” 新建 ”，抉择“我的项目”，即可进入初始化我的项目的设置界面，界面大略如下：

  1. 抉择我的项目类型：按默认选 uni-app 就行了，其余几种类型基本上和做小程序都无关，咱们不必关怀；
  2. 填写项目名称：倡议用英文命名（当然非要用中文应该也不是不能够）；
  3. 抉择我的项目所在门路：倡议选一个本人常常记得分明的目录，省得日后找我的项目所在位置麻烦；
  4. 抉择模板：uniapp 提供了很多针对不同场景的示例模板，老手的话，倡议默认模板就好了，内容少一点，咱们能够缓缓加减性能；
  5. Vue 版本抉择：都 2023 年了，当然抉择 Vue3 了，毕竟 Vue3 是兼容 Vue2 的；
  6. 启用 UniCloud：这个是 Uniapp 集成的云开发，老手能够不开启；
  7. 上传代码到托管平台：也就是将我的项目源码进行 git 托管，这里也能够不必抉择，须要托管的话，咱们能够后续再本人抉择。

配置完后，点击确定，我的项目就生成好了，能够看到生成的我的项目目录如下：

最外围的目录 pages 内，能够看到只有一个页面 index, 那么怎么运行呢？因为咱们是要开发一个微信小程序，而微信小程序官网是有提供一个开发和调试工具的，所以如果须要让我的项目跑起来，咱们还得装置一下这个微信开发者工具。

3. 装置并配置微信开发者工具

微信官网提供的小程序开发文档中有提供微信开发者工具的下载地址，点击如下链接可间接跳转：
微信开发者工具下载地址
抉择一个对应本人操作系统的版本装置就好了。

装置好后，关上软件左上角菜单中的设置，抉择平安设置

而后把服务端口设为开启状态。
开启服务端口是便于 HBuilder 能主动帮咱们关上微信开发者工具的，很多老手也会卡在这一步，发现运行我的项目的时候没有反馈，其实就是因为这里的服务端口未开启。

4. 启动我的项目

微信开发者工具配置好后，咱们切会 HBuilder，抉择左上角菜单区的“运行”->” 运行到小程序模拟器 ”->” 微信开发者工具 ”。或者间接点下边的运行图标，抉择微信开发者工具。点击后等一会，微信开发者工具就会主动被关上且加载咱们的我的项目。

留神：第一次运行时因为会装置一些依赖文件，会提醒让咱们从新运行。这时从新点击一次就能够了。失常启动后，控制台显示大抵如下：

微信开发者工具中，也能看到这个模板我的项目的界面模样:

咱们能够尝试找到 pages/index/index.vue 文件，将 data 中的 title 设置为“Hello World”。编辑好后保留，再切回微信开发者工具，能够看到页面也会进行热更新的变动。

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
  </view>
</template>

<script>
  export default {data() {
      return {title: 'Hello World'}
    },
    onLoad() {},
    methods: {}}
</script>

HBuilder 配置

批改缩进长度

为了更加的不便开发，咱们能够对 HBuilder 做一些让开发体验更好的设置。笔者喜爱 2 个空格的缩进，HBuilder 默认是四个空格的。咱们能够在左上方菜单中找到“偏好设置”->“罕用设置”，再找到制表符长度，将 4 设置为 2。

保留时主动格式化代码

HBuilder 自带了代码格调的格式化性能，默认未开启保留时主动格式化。咱们能够在“偏好设置”->“编辑器配置”中找到「保留时主动格式化」，勾选上

设置大括号保留不换行

笔者试图将 Script 中代码批改为 Vue3 的 setup 写法，如下：

能够看到，缩进配置和保留后主动格式化都曾经失效了，然而导入 ref 的那行代码，大括号主动换行了。这是因为 HBuilder 内的代码格式化插件 jsbeautify 默认设置的成果。咱们能够批改它来让他保留不换行。
咱们能够在“偏好设置”->“插件配置”中找到「关上文件 jsbeautifyrc.js」，点击关上，而后找到 brace_style 属性，把值改为"brace_style": "collapse,preserve-inline"

而后保留回到原页面，将大括号的缩进去掉再保留，能够发现主动格式化就不会让大括号再换行了。

接下来，咱们即可舒舒服服的编写代码啦！

对于笔者

计算机专业科班出身，8 年 +Web 开发教训，多年深耕 Vue2,Vue3 技术栈。全栈开发经验丰富，技能树笼罩从前端工程搭建到部署上线全链路流程。紧跟技术潮流，始终关注着各种新兴技术趋势并踊跃进行实际摸索，谋求优雅的开发体验，极致的开发效率，高标准的开发品质。可提供前端简历批改，面试领导，前端新人开发领导，前端收徒，帮助实现开发工作等服务。

分割我：imwty2023（微信）

博客原创地址：uni-app 开发小程序系列 – 我的项目搭建 | imwty，转载请注明出处。

退出移动版