保姆级教程 从零配置nodejs环境并用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp

已于 2024-02-07 11:15:42 修改
阅读量4.5k 收藏 40
点赞数 41
文章标签： uni-app webstorm ide vue.js node.js
于 2024-02-07 11:08:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tepkco/article/details/136066379
版权

本教程后面部分（用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp）适合习惯使用vscode或Webstorm等（或者说不习惯HBuilder X）的人参考，如果习惯使用HBuilder X，还是建议使用HBuilder X来搭建uniapp项目，会方便很多。

目录

1. 配置node.js

1.1 下载并安装

1.2 配置环境变量

1.3 修改安装目录

2. 使用命令行创建Vue3/Vite版的uniapp项目

2.1 全局安装 vue-cli

2.2 创建uniapp项目模板

方法一：使用命令行创建模板

方法二：访问gitee下载模板

2.3 使用npm安装相关依赖

3. Webstorm相关配置

3.1 使用Webstorm打开项目并安装插件

3.2 配置运行程序（运行到浏览器）

3.3 配置运行程序（运行到微信小程序）

3.4 其他运行平台

相关补充

#1. 设置点击运行后自动打开浏览器

#2.安装scss模块

1. 配置node.js

1.1 下载并安装

进入官网下载node.js，我这里下载的是最新版本的nodejs

下载完成后打开，点击next

点击next

选择安装的目录（建议放在其他盘上，我这里只有c盘），然后点击next

继续点击next

继续点击next

点击install

完成后点击finish

1.2 配置环境变量

找到刚刚安装的nodejs的目录，ctrl+c复制路径，并分别创建名为node_global和node_cache的两个文件夹

win+r，然后输入sysdm.cpl，回车

点击高级→环境变量

选择系统变量中的Path，然后编辑

点击新建，然后ctrl+v粘贴刚刚复制的nodejs的路径，再点击新建，把node_global文件夹的路径也加进去，然后点击确定


按win键，然后搜索cmd，点击以管理员身份运行

输入 node -v 和 npm -v，没有报错则安装成功

1.3 修改安装目录

打开cmd，分别输入npm config set prefix <你的node_global文件夹的路径> 和 npm config set cache <你的node_cache文件夹的路径>

例如：

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

2. 使用命令行创建Vue3/Vite版的uniapp项目

2.1 全局安装 vue-cli

管理员身份打开cmd，输入

npm install -g @vue/cli

等待一段时间后，安装成功

2.2 创建uniapp项目模板
方法一：使用命令行创建模板

管理员身份打开cmd，进入到需要创建的目录

在命令行中输入

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

其中最后的my-vue3-project是项目的名字，可以自己指定。

回车后，会出现“Ok to proceed?”，输入y，然后回车

显示cloned dcloudio/uni-preset-vue#vite to my-vue3-project表明创建成功

方法二：访问gitee下载模板

有些人会出现创建失败的情况

这时可以直接访问gitee下载模板

解压到项目目录

然后自己修改项目名，我这里就改成一样的“my-vue3-project”这个名字

2.3 使用npm安装相关依赖

通过方式一或者方式二将模板创建成功后，管理员打开cmd，进入到项目目录

接下来输入

npm install

等待一段时间，安装完成

到这里就可以使用自己的编辑器打开项目运行了，接下来我就以Webstorm为例，并做一些相关配置，使用vscode的话可以自行配置。

3. Webstorm相关配置

3.1 使用Webstorm打开项目并安装插件

安装插件之后，对uniapp相关的代码提示会更好，如果不想安装可以直接跳过这个步骤，直接进行运行程序的配置

File→Open

找到之前创建的项目，点击OK就行了。这里我已经打开了

Webstorm中进入Settings→Plugins→Marketplace，搜索uniapp，安装并启用插件，最后再点击OK（一定要点OK，不然可能会失败）

3.2 配置运行程序（运行到浏览器）

点击Current File→Edit Configurations，进入到Run/Debug Configurations页面

点击添加，选择npm

Name处可以自己取名字，Scripts处选择dev:h5，最后点击OK

现在可以选择我们刚刚的配置，然后点击启动按钮就可以运行了

点击local后面的url，就能进入了

3.3 配置运行程序（运行到微信小程序）

script处选择dev:mp-weixin，然后点击OK

点击启动按钮之后，项目中会生成一个dist文件夹，找到mp-weixin文件夹右键复制文件夹的绝对路径

接下来打开微信开发者工具，点击导入 （没有微信开发者工具的可以去官网下载，然后自行安装）

把刚刚复制的mp-weixin文件夹的绝对路径粘进去，回车，然后点击选择文件夹

我这里选择的游客模式，所以AppID是touristappid，大家可以登录账号，然后去官网获取正式的appid

接下来点击“信任并运行”，然后再点击编译


完成，这个只需导入一次，后面在运行时，只要打开微信开发者工具进入项目，就会自动编译

3.4 其他运行平台

一般的话就使用浏览器和微信小程序来运行，如果需要其他的运行方式，可以根据下面的参数照着我上面的步骤创建运行配置

平常调试代码就选择 dev: ，项目完成后打包发布选择 build:

后面的值对应的平台如下，这里我介绍了几个，详细请看官方文档

值对应的平台
h5H5
mp-weixin微信小程序
mp-qqqq 小程序
mp-alipay支付宝小程序
mp-toutiao抖音小程序
mp-baidu百度小程序
mp-kuaishou快手小程序

至此，相关配置已经完成，后面如果需要云打包的话，可以下载HBuilder X，然后使用HBuilder X打开项目，直接云打包即可。

相关补充

#1. 设置点击运行后自动打开浏览器

进入到Run/Debug Configurations页面，选择之前配置的“运行到浏览器”，在Before launch下点击加号，选择Launch Web Browser

第一个可以选择运行的浏览器，我这里选的是Edge

第二个要填运行的url，填之前运行时local后面的url


点击OK之后再次运行，就会自动打开浏览器

#2.安装scss模块

如果需要scss模块的话，可以使用管理员身份启动命令行，进入项目目录，输入

npm install sass

安装完成

现在使用scss，运行成功

tepkco
关注
计算机毕业设计Node.js+uniapp安卓社区便民APP(源码+程序+lw+远程调试)
Node程序源码强子
01-30 385
项目运行环境配置：Node.js最新版+ Vs项目技术：Express框架+ Node.js+ Vue 等等组成，B/S模式 +Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发环境：Vscode或HbuilderX都可以。推荐HbuilderX;3.mysql环境：建议是用5.7版本均可4.硬件环境：windows 7/8/10 1G内存以上；
uniapp项目使用vue3
m0_67403188的博客
03-11 5124
uniapp项目使用vue3 1.首先创建普通uniapp项目 2.找到manifest.json文件vue版本选择 选择3 3.重新运行提示： 请确认您的项目模板是否支持vue3:根目录缺少 index.html 在根目录下创建index.html，模板已放在下方 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
Webstorm 开发 uni-app 项目
最新发布
weixin_40231090的博客
09-27 755
webstorm上使用uniapp开发微信小程序
Webstorm 入门级玩转uni-app 项目-微信小程序+移动端项目方案
热门推荐
LlanyW的专栏
08-23 1万+
3. 首次启动肯定是报错了，需要配置自己的DClound APPID， 微信小程序APPID。这个appid号可以用微信者开发工具打开编译出来微信项目，生成一个测试号，然后复制过来。创建一个新项目，选择uniapp,默认模版是演示用，有一些ui组件，常用功能封装。我选择了第二个，有试用30天，安装重启webstorm之后。1.先配置微信开发者工具，HBuilder安装目录。启动完成 之后，在微信开发者工具模拟看效果。2.添加运行项目配置，然后点击运行。第一个是不收费，第二个收费。配置完成之后重新，运行。
移动端选型：WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案
LlanyW的专栏
02-11 1万+
而vue文件用的是webview渲染，Webview是一个基于webkit的引擎，可以解析DOM元素，展示html页面的控件，他和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。vue文件用的是webview渲染，Webview是一个基于webkit的引擎，可以解析DOM元素，展示html页面的控件，他和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。nvue是native vue的缩写，是uni-app的一种渲染方式。是native vue的缩写，是uni-app的一种渲染方式。
uniapp创建vue3项目
weixin_57844432的博客
06-14 1万+
uniapp-VUE3-微信小程序项目
这是一个全栈完整项目uniapp小程序+vue后台管理系统+node.js完整项目+mysql数据库
07-09
**开发技术块：**设计vue+webpack+element-ui创建项目配置及、项目结构分配、模块定义；模块封装，组件定义、sass布局、过滤器整体封装、axios二次封装；token权限判断、不同的动态加载接入、动态导航导航数据及漏卫...
uniApp+vue+nodejs+express+mysql电商项目-uniApp-shop.zip
11-04
本项目"uniApp-shop"采用了一系列前沿的技术栈，包括uniApp、Vue.js、Node.js、Express和MySQL，旨在创建一个高效、稳定且用户友好的在线购物平台。下面我们将详细探讨这些技术在电商项目中的应用及其重要性。 首先...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
uniApp+vue+nodejs+express+mysql电商项目.zip
10-21
【标题】"uniApp+vue+nodejs+express+mysql电商项目"是一个综合性的Web开发实践，涵盖了前端、后端以及数据库等多个技术栈。在这个项目中，开发者将使用uniApp作为移动端应用框架，Vue.js作为前端框架，Node.js搭配...
扫码登录(Nodejs+Vue+Uniapp)
01-03
1：仿微信，QQ，微博扫码登录 一直都感觉扫码登录很神奇啊！！然后谷歌一搜思路一看，发现还真是挺简单的，所以自己写...这其中包含服务端(NodeServer)，App端(UniAppMobile)，Web端(VueQRCode)，可以直接部署跑起来哦
webstorm开发uniapp（从安装到项目运行）
acaad的博客
09-03 2450
点击Plugins中的设置找到从磁盘加载文件（install Plugin from disk)同样在文件中的settings找到tools（File=>settins=>Tools）点击uniapp并做如下配置，分别打开HbuilderX的安装位置与微信小程序的安装位置。点击+添加uniapp的运行指令，Name随便命名，做如下配置后点击apply。（结合自己的webstorm版本下载，不然解析不了）找到放置的插件并单击apply，插件安装完毕。最后点击运行，耐心等待运行成功。（按需下载，本文需要）
如何创建uni-app项目
qq_41722550的博客
07-14 646
1.通过 HBuilderX 可视化界面 可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。 开始之前，开发者需先下载安装如下工具：https://www.dcloud.io/hbuilderx.html 版本根据电脑系统而定 2.通过vue-cli创建 首先确定自己有没有安装node,输入 node -v,显示版本号说明安装。 安装vue-cli,输入 npm install @vue-cli -g. 完成之后，输入vue -V(大写的V)检验是否安.
Webstorm 舒适高效配置，打造提高生产率环境 （html, vue, uniapp）
LlanyW的专栏
11-06 1万+
狂拽炫酷吊炸天装逼的插件，atom 上的神器啊,抱着试一试的心态一搜,webstorm 上居然也有了,安装之后可以在 window -> activate-power-mode 中关闭震动以及开启彩色模式。选个纯色的 轻绿色（C7EDCC）的背景导入（可以从刚才设置的代码区域截取一个纯色图片导入），设置透明度：Opacity然后：OK即可切换到养眼的界面。用过 sublime 的同学会知道右侧有一个当前文件中代码的缩略图，这个插件可以让 webstorm 也具有此功能。一个比较全面的正则插件。
创建uni-app项目
atu1111的博客
09-24 3978
创建uni-app项目 1. 2.
uniApp项目创建
m0_67388537的博客
07-15 3242
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。
uniapp项目创建
qq_45796592的博客
02-18 1144
uniapp配置
Uniapp 创建项目
Tongyao
06-07 234
打开HBuilderX，文件 – 新建 – 项目选中uni-app，输入项目和项目地址，点击创建按钮。 创建好了，可以码代码了！！！
uni-app项目创建
toodes的博客
05-13 1218
什么是 uni-appuni-app是一种跨平台开发框架，可以将代码一次性编写，再转换为多个平台上的应用程序，包括iOS、Android、H5和微信小程序等。uni-app基于Vue.js框架，提供了一系列的组件和API，方便开发者进行快速开发。它还支持各种第三方插件和扩展，以满足不同应用场景的需求。
webstorm创建vue3项目
09-09
要在WebStorm中创建Vue 3项目，请按照以下步骤进行操作： 1. 打开WebStorm并创建一个新的空项目或者打开现有的项目。 2. 在你的项目根目录上右键单击，然后选择 "终端" 或 "在这里打开终端" 选项。 3. 在终端中运行以下命令来创建一个新的Vue 3项目： ``` vue create . ``` 这个命令会在当前目录下创建一个新的Vue项目，并使用Vue CLI进行初始化。 4. 运行以上命令后，你将会被提示选择一个预设配置。选择 "Manually select features（手动选择特性）" 并按下 Enter 键。 5. 在接下来的列表中，使用上下箭头键选择你想要的特性，可以通过空格键选择或取消选择。至少确保选择 "Babel" 和 "Vue 3"。 6. 在特性列表选择完后，按下 Enter 键继续。 7. 接下来，你将被要求选择一个包管理器。你可以使用默认的 npm（Node Package Manager），也可以选择 yarn（如果已安装）。选择你喜欢的包管理器并按下 Enter 键。 8. Vue CLI 将自动安装所需的依赖项，这可能需要一些时间，请耐心等待。 9. 安装完成后，你可以进入创建的Vue项目文件夹，并在终端中运行以下命令来启动开发服务器： ``` npm run serve ``` 这将启动开发服务器并运行你的Vue 3应用程序。 现在，你已经成功在WebStorm中创建了一个Vue 3项目。你可以开始编写Vue代码并构建你的应用程序了。祝你好运！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值