用VScode搭建uni-app项目（较全）

cli工程全局安装vue-cli

npm install -g @vue/cli

通过cli创建uni-app项目

 vue create -p dcloudio/uni-preset-vue uni-app

选择项目模板，可自由选择如下图：

创建uni-项目

使用vscode打开创建的项目

安装vue语法提示插件

cli工程自带uni-app&5+app语法提示

安装组件语法提示

npm i @dcloudio/uni-helper-json

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

使用scss样式

#先安装node-sassnpm install node-sass#然后安装sass-loader，这里安装7.3.1版本，版本可选择性更新，因为高版本可能会报错#使用 cnpm 会快一些cnpm install sass-loader@7.3.1

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可选值参见package.json中的scripts

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装
初始化npm

npm i @types/uni-app @types/html5plus -D

安装uni-app语法提示

npm i @types/uni-app @types/html5plus -D

uni-app项目中manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开

这样我们的VScode-uni-app项目就搭建好了
那么微信小程序怎么跑起来呢？

启动各个端的命令
//启动项目（微信小程序）
npm run dev:mp-weixin//启动项目（h5）
npm run dev:h5//启动项目（app平台）
npm run build:app-plus （也就是App平台运行调试不支持cli方式，需在HBuilderX中运行调试）//启动项目（支付宝小程序）
npm run dev:mp-alipay//启动项目（百度小程序）
npm run dev:mp-baidu    //启动项目（字节跳动小程序）
npm run dev:mp-toutiao  //启动项目（qq 小程序）
npm run dev:mp-qq   //启动项目（快应用）
npm run dev:quickapp-webview

微信开发者工具调试小程序为例子
进入项目目录
执行命令,根据自己工具

npm run dev:mp-weixin 或 yarn run dev:mp-weixin

在项目dist文件夹的dev的会多出一个文件mp-weixin，目录结构即为小程序的结构
打开小程序选到此文件夹

这样就可以启动小程序了，保存的时候会实时编译到这个文件夹，小程序也会相应的改变；

以此为基础：下一篇我会讲：《在uni-app中使用tailwindcss》

用VScode搭建uni-app项目（较全）相关推荐

VSCode搭建Spring Boot项目
下载安装Java Extension Pack和Spring Boot Extension Pack两个插件打开VSCode的设置,搜索框输入maven,然后打开settings.xml文件编辑配置 ...
Android 系统（153）---全面屏项目很多APP占不满全屏
全面屏项目很多APP占不满全屏刘海屏项目,分辨率720x1498设置系统除外壁纸显示不全,且部分界面底部显示高度有2个navigationbar高度解决方案: 那是因为全面屏的长宽比超过了1.86 ...
VSCode搭建Vue项目及服务器部署
一.安装nodeJs 在我之前的博客<idea搭建vue-cli项目>里有详细安装教程,这里进入! 二.在VSCode搭建Vue项目 1.安装全局脚手架 npm i -g @vue/cli ...
视频教程-React全栈：前后端分离的招聘Web App项目（含资料）-ReactJS
React全栈:前后端分离的招聘Web App项目(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国 ...
yolov5使用2080ti显卡训练是一种什么样的体验我通过vscode搭建linux服务器对python-yolov5-4.0项目进行训练，零基础小白都能看得懂的教程。＞＞＞＞＞＞＞＞＞第二章番外篇
第二章番外篇:yolov5通过vscode搭建linux服务器对python-yolov5-4.0项目进行训练,零基础小白都能看得懂的教程.YOLOv5搭建的最快搭建方式,踩坑经历详谈前期准备: 2 ...
如何开发出一款仿映客直播APP项目实践篇 -【服务器搭建+推流】
如何开发出一款仿映客直播APP项目实践篇 -[原理篇] 如何开发出一款仿映客直播APP项目实践篇 -[采集篇 ] 如何开发出一款仿映客直播APP项目实践篇 -[服务器搭建+推流] 如何开发出一款仿映客 ...
uniapp APP项目启动页面全屏显示去除导航栏和下巴
uniapp APP项目启动页面全屏显示去除导航栏和下巴 <template><view><view class="star ...
搭建网站/APP最全准备攻略
作者 | 前嗅来源 | 前嗅大数据(www.forenose.com) 本文谨献给:想要所有想要搭建网站/APP,又不知道应该如何下手的童鞋~ 如果你正好想要搭建一个网站或者创建一个APP: 如果 ...
用vscode实现vue.js项目的一个完整过程
1.新建项目打开Visual studio code 打开一个你想要创建项目的文件夹打开集成终端:查看 –> 集成终端或者直接按 ctrl+` 如果没有安装vue-cli,在终端输入: n ...

用VScode搭建uni-app项目（较全）

用VScode搭建uni-app项目（较全）相关推荐

最新文章

热门文章