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

已于 2024-02-07 11:15:42 修改
阅读量1.8k 收藏 27
点赞数 36
文章标签： 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
关注
  • 36
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniApp+vue+nodejs+express+mysql电商项目.zip
10-21
uniApp+vue+nodejs+express+mysql电商项目.zip
扫码登录(Nodejs+Vue+Uniapp)
01-03
1：仿微信，QQ，微博扫码登录 一直都感觉扫码登录很神奇啊！！然后谷歌一搜思路一看，发现还真是挺简单的，所以自己写个玩玩，代码里面的实现方式和思路可以借鉴。不要问为什么不用PHP,Java，我不会告诉你Node.js写起来更简单更方便，至于用什么后端语言实现这个不是关键，看你个人爱好。 项目地址：https://gitee.com/bmycode/ScanCodeLogin 哦，对了。这里实现的是扫码登录的一整套代码，看懂了拿过去改改封装一下就可以在项目中使用了。这其中包含服务端(NodeServer)，App端(UniAppMobile)，Web端(VueQRCode)，可以直接部署跑起来哦
微信小程序uniapp+vue3+ts+pinia的环境搭建
weixin_72707764的博客
03-29 1461
一.创建uniapp项目通过vue-cli创建二.安装依赖：1.pnpm i2.运行项目：将package.json的3.导入微信小程序开发工具打开微信开发者工具, 导入 dist\dev\mp-weixin 运行三. TS 类型校验在tsconfig.json文件中"compilerOptions"配置项内添加"ignoreDeprecations": “5.0”在配置完成后，vue组件就会提示报错信息四. JSON 注释问题。
uniApp+vue+nodejs+express+mysql电商项目-uniApp-shop.zip
11-04
uniApp+vue+nodejs+express+mysql电商项目-uniApp-shop
UNIAPP实战项目笔记53 登录的前端和后端nodejs对接以及写后端接口和接口文档
Ggome的博客
12-17 2486
common 公共文件：全局css文件 || 全局js文件。pages.json 配置文件： 导航、 tabbar、 路由。manifest.json 配置文件： appid、logo…App.vue 全局配置：样式、全局监视。static 静态资源：图片、字体图标。main.js vue初始化入口文件。store vuex状态机文件。page 页面。components 组件。输入手机号或用户名登录页面。
使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架
zzcoder的博客
01-08 1763
近日心血来潮想做一个开源项目，目标是做一款可以适配多端、功能完备的模板工程，包含后台管理系统和前台系统，开发者基于此项目进行裁剪和扩展来完成自己的功能开发。但前台系统花样繁多，可能是PC端浏览器，可能是微信网页，微信小程序，安卓，鸿蒙……因此笔者只能从个人的开发需求出发，搭建了原生vue3版、原生微信小程序版、原生React版和uniapp版的前台系统模板。创建uniapp项目可以使用官方提供的IDE工具HBuilderX可视化的创建，但项目结构与普通的vue项目有所不同；
WebStorm创建uniapp项目
weixin_45941687的博客
10-13 4726
WebStorm创建uniapp项目 我之前vue/cli是2.0的 npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project 下面语句编译 npm run dev:mp-weixin uniapp文档链接
在 WebStorm 中开发 uni-app
热门推荐
wfly blog
04-27 2万+
代码已上传至github github代码地址：https://github.com/Miofly/mio.git CLI 工程 全局安装 vue-cli 3.x（如已安装请跳过此步骤） npm install -g @vue/cli 通过 CLI 创建 uni-app 项目 vue create -p dcloudio/uni-preset-vue my-project 此时...
uni-app 学习node.js安装教程
2301_78189401的博客
06-21 895
通过本文的介绍，您现在应该知道如何在Windows和Mac上安装Node.js，并运行一个简单的示例应用程序。通过了解Node.js的安装步骤和基本用法，您将可以开始进行更高级的Node.js应用程序开发。在去Node.js的官方网站上下载Node.js的Windows安装包。在我们继续更深入的Node.js开发之前，让我们创建一个简单的Node.js应用程序以测试Node.js是否正常工作。在去Node.js的官方网站上下载Node.js的Mac安装包。打开下载的Node.js安装包，运行安装程序。
计算机毕业设计Node.js+uniapp一站式自习室服务小程序(源码+程序+lw+远程调试)
Node程序源码强子
02-02 212
项目运行环境配置：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小程序+vue后台管理系统+node.js完整项目+mysql数据库
07-09
**开发技术块：**设计vue+webpack+element-ui创建项目配置及、项目结构分配、模块定义；模块封装，组件定义、sass布局、过滤器整体封装、axios二次封装；token权限判断、不同的动态加载接入、动态导航导航数据及漏卫...
基于vue+node.js+mysql的网站商城
06-01
所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
UNIAPP实战项目笔记12 自己搭建nodejs服务器后端接口
Ggome的博客
09-29 1320
【代码】UNIAPP实战项目笔记12 自己搭建nodejs服务器后端接口。
uni-app+nodejs 制作简易聊天室
qq_34404858的博客
03-14 2598
uni-app开发实战环境搭建HBuilderX配置环境1.安装插件2.搭建项目3.试运行4.自定义配置项目示例1.前端（H5/小程序）2.后端服务部分后续再说~ - ~ 环境搭建 零基础推荐使用 HBuilderX HBuilderX Windows/Mac下载安装 配置环境 1.安装插件 点击Hbuilder顶部工具栏 -> [工具] -> 插件安装 npm插件、uniapp编...
uniapp cli创建 vue3 + typeScript项目 配置eslint prettier husky
weixin_49431241的博客
09-18 608
【代码】uniapp cli创建 vue3 + typeScript项目 配置eslint prettier husky。
使用命令行创建uni-app项目（vue3+ts）
tq1711的博客
09-05 616
命令行创建uni-app项目
持续更新｜UNIAPP适配APP遇到的问题以及解决方案
灵壹Eli的博客
04-29 409
在使用UNIAPP开发APP的时候遇到的一些奇奇怪怪问题记录。
在uniapp里面使用 mp-html 并且开启 latex 功能
最新发布
weixin_43191327的博客
05-06 149
功能是由 https://github.com/rojer95/katex-mini 提供的技术实现， 但是这个仓库是专门为小程序写得功能，也就是说。代码对于 vite 构建的 uniapp 不太友好, 我这里自己把 katex-mini 改了一版, 修改为由 vite 打包。里面开启 latex 渲染功能。代码拉取到本地，修改代码然后自行打包，这里说一下如何修改代码（其实很简单）。是不会开启 latex 功能的, 如果需要开启 latex 功能是需要到代码操作拉取代码自行打包的。
uniapp 桌面应用插件 Ba-Launcher
三杯五岳
05-01 562
Ba-Launcher 可以让你的应用成为简单的桌面应用。
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、付费专栏及课程。

余额充值