uniapp 搭建vue项目，快速搭建项目

背景：

在项目开发中，搭建项目的技术栈包括如下：uniapp+vue2+uni内置组件+uview-ui组件库

项目搭建依赖环境以及文档目录结构：

运行到浏览器：

备注：可能会有跨域问题，推荐配置浏览器的访问权限

谷歌浏览器解决跨域问题，博客链接：点击跳转

运行到手机：

HBuilder点击运行，运行到手机，运行到Android App基座

等待HBuilder运行成功，成功截图：

备注：可能会遇到HBuilder识别不到手机的情况。

我的手机是荣耀，系列是MagicOS9会有识别不到手机的情况

uniapp 荣耀手机 运行到手机 识别不到手机，解决方式链接：点击跳转

一、Hbuilder X 安装v4.76

Hbuilder大幅提升你的vue开发效率，更优秀的vue支持。

官网链接：点击跳转

二、uniapp创建项目

uniapp开发一次，多端覆盖。

uni-app支持vue3和vue2，这里勾选vue2，根据开发实际情况。

新建一个项目选择模版：

manifest.json如下：

uniapp官网链接：点击跳转

官网链接：点击跳转

新建一个uniapp项目的目录结构如下：

引入插件以及各种配置之后的目录结构如下：

三、hbuilder运行项目

npm i下载项目依赖：

看package.json知道项目有其它插件的依赖，需要npm i下载依赖。下载完成之后，会有一个node_modules文件夹。

uniapp插件市场的插件下载之后引入项目，放置在uni_modules文件夹下：

开发阶段可以运行到浏览器，便于使用浏览器的开发者工具进行调试；真机测试可以查看手机或者平板上的运行效果。

HBuilder运行项目：

运行到浏览器：

运行到真机：

四、HBuilder打包发行