webstorm开发uniapp（从安装到项目运行）

于 2024-09-03 10:53:23 发布
阅读量645 收藏 9
点赞数 4
文章标签： webstorm uni-app java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/acaad/article/details/141855175
版权

1、下载uniapp插件

      下载连接：Uniapp Tool - IntelliJ IDEs Plugin | Marketplace

       （结合自己的webstorm版本下载，不然解析不了）

      将下载到的zip文件防在webstorm安装路径下，本文的地址为：

 2、安装uniapp插件

     点击文件找到settings

        在editor中找到Plugins

       点击Plugins中的设置找到从磁盘加载文件（install Plugin from disk)

     找到放置的插件并单击apply，插件安装完毕。

 3、配置uniapp

      同样在文件中的settings找到tools（File=>settins=>Tools）

     点击uniapp并做如下配置，分别打开HbuilderX的安装位置与微信小程序的安装位置。

      HbuilderX的下载连接：HBuilderX-高效极客技巧

       微信小程序的注册与工具下载链接：小程序（按需下载，本文需要）

 4、运行uniapp项目

     在webstorm中点击edit

    点击+添加uniapp的运行指令，Name随便命名，做如下配置后点击apply。

    最后点击运行，耐心等待运行成功。

文章参考：（webstorm如何调试uniapp程序_webstorm运行uniapp项目-CSDN博客

                     webstrom 开发uniapp 教程 安装使用教程_webstorm运行uniapp项目-CSDN博客 ） 

acaad
关注
webstorm如何调试uniapp程序
weixin_46573332的博客
08-14 430
2.在HbuilderX路径的位置 选择自己的Hbuilder安装路径。第一步，找到文件设置—>工具—>uniApp。最后点击运行按钮，等待运行完成即可。3.点击启动工具编辑。4.选择uniapp。
webstom编译器运行uniapp项目（微信小程序）
m0_65786766的博客
12-19 2833
我这一生，如履薄冰……
如何在IDEA开发并运行uniApp
最新发布
Morries_Wu
08-08 677
下载微信开发者工具直接下载安装完毕之后即可。
WebStorm运行app项目
guoxinru0529的博客
07-17 267
WebStorm运行app项目,不使用HBuilderX运行app项目
移动端选型：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-tailwind-uview-starter:利用uniapp + tailwindcss + uview构建的一套基础模板，可以使用Webstorm或者vscode开发
04-03
uniapp-tailwind-uview-starter 利用uniapp + tailwindcss + uview构建的一套基础模板 背景：之前用uniapp + uview开发了一大一小两个小程序， css方案用的原子风格的，发现用的还是挺爽的，就在想能不能用上tailwindcss ，研究之后发现用Hbuilder创建的自由度比较低，于是选择了用Vue-cli4了Vue-cli4 。 要求： Node.js> 12 项目地址 项目初始化 我选择了预设模板。 我的Webstorm默认使用pnpm包管理，这是第一个坑，启动项目时报错，于是rm -rf node_modules ，重新使用yarn安装依赖，然后npm serve正常启动。 第二个坑是要求Webstorm设置Nodejs v12以上，否则tailwind不会智能提示。 如果是想要启动微信小程序的话，选择dev:mp-w
Webstorm 入门级玩转uni-app 项目-微信小程序+移动端项目方案
LlanyW的专栏
08-23 1万+
3. 首次启动肯定是报错了，需要配置自己的DClound APPID， 微信小程序APPID。这个appid号可以用微信者开发工具打开编译出来微信项目，生成一个测试号，然后复制过来。创建一个新项目，选择uniapp,默认模版是演示用，有一些ui组件，常用功能封装。我选择了第二个，有试用30天，安装重启webstorm之后。1.先配置微信开发者工具，HBuilder安装目录。启动完成 之后，在微信开发者工具模拟看效果。2.添加运行项目配置，然后点击运行。第一个是不收费，第二个收费。配置完成之后重新，运行。
WebStrom开发uni-app项目
qq_38689179的博客
07-25 1343
Webstorm开发uniapp项目 语法提示 rpx单位支持等
保姆级教程 从零配置nodejs环境并用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp
tepkco的博客
02-07 4296
本教程后面部分（用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp）适合习惯使用vscode或Webstorm等（或者说不习惯HBuilder X）的人参考，如果习惯使用HBuilder X，还是建议使用HBuilder X来搭建uniapp项目，会方便很多。 1. 配置node.js 1.1 下载并安装 进入官网下载node.js，我这里下载的是最新版本的nodejs 下载完成后打开，点击next 点击next 选择安装的目录（建议放在其他盘上，我这里只有
在 WebStorm 中开发 uni-app
热门推荐
wfly blog
04-27 3万+
代码已上传至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 此时...
webstorm开发工具
07-11
适用于网页开发
uni-helper：使uni- *在其他编辑器（例如VSCode和WebStorm）中更好地工作
02-21
uni-helper：使uni- *在其他编辑器（例如VSCode和WebStorm）中更好地工作
webstorm2019版本创建VUE项目
01-20
这时，可以在命令行中切换到项目根目录，然后运行`npm install`来手动安装所有依赖。 4. **使用Vue CLI**：Vue官方推荐使用Vue CLI来初始化项目，这是一个更强大且可靠的项目脚手架工具。首先，确保全局安装了Vue ...
uniapp-tools:uniapp工具类
05-10
【uniapp-tools: 一个...通过研究其源码，开发者可以了解到如何构建自己的工具库，以及如何更好地利用uniapp的特性。同时，这也提醒我们，对于开源项目，持续的维护和支持至关重要，以确保其长期的稳定性和可用性。
python工具系列：Webstorm 入门级玩转uni-app 项目-微信小程序+移动端项目方案
weixin_54626591的博客
06-29 1200
Webstorm 入门级玩转uni-app 项目-微信小程序+移动端项目方案
uniapp项目运行在小程序上
qq_36981190的博客
08-04 3434
1、登录公众号平台，扫码登陆小程序页面 2、下载小程序开发者工具 3、安装小程序开发工具，记住安装目录，默认安装目录如下 4、uniapp程序运行到小程序，会让填写“微信开发者工具”的路径，如下 5、需要获取一下uniapp的appid， 6、导入uniapp编译生成的目录，如下 uniapp生成的编译后代码目录类似： D:\test_uniapp\news-uniapp\unpackage\dist\dev\mp-weixin 需要等十几秒，会出现小程序的模拟页面 7、点击右上角的上传，
创建第一个微信小程序 uni-app + Vue3 + Color UI + Webstorm
Iulia
06-11 1351
官方文档给的例子是Vue2的，不适用于Vue3，因此以下实现会和官方文档不太一样step 1 修改pages.json，把导航栏样式改为“custom”，完成这一步之后默认导航栏会消失...}],...step 2 在main.js中把cu-custom组件注册到app中，cu-custom就是是color ui官方包自带的导航栏组件return {appstep 3 在App.vue中获取系统导航栏的尺寸，并暴露为全局变量},})},...
webstrom 开发uniapp 教程 安装使用教程
qq_53722480的博客
12-14 1947
webstrom 开发uniapp 教程 安装使用教程
webstorm开发uniapp+vite+ts
11-24
以下是在WebStorm中开发uniapp+vite+ts的步骤： 1.创建一个新的uniapp项目，选择vite作为构建工具。 2.在项目根目录下创建一个vite.config.ts文件，用于配置vite。 3.在vite.config.ts文件中添加以下内容： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': '/src' } }, server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }) ``` 4.在tsconfig.json文件中添加以下内容： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "jsx": "preserve", "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules"] } ``` 5.在APP.vue中添加以下内容： ```html <template> <router-view></router-view> </template> ``` 6.在main.ts中添加以下内容： ```typescript import { createApp } from 'vue' import './style.css' import App from './App.vue' import store from './store/index' import router from './router/index' const APP = createApp(App) APP.use(store) APP.use(router) APP.mount('#app') ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值