vscode 从零创建uniapp 项目

原创 已于 2023-03-15 19:10:40 修改 · 256 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #vscode #微信小程序

于 2023-03-15 18:47:24 首次发布
在mac环境下，使用vscode，项目基于vue和uni-app，遇到使用uni-ui时，通过npm安装后在微信开发者工具中无法生效。需构建npm包且全局注册uni-ui，引入公共scss时@import./common/theme.scss。配置manifest.json并添加appid，通过npmrundev:mp-weixin启动项目，生成dist文件夹，在微信开发者工具中打开该目录进行调试。

系统 mac

vscode 版本: 1.76.0 (Universal)

node v14.19.0

"node-sass": "^4.14.1",

"sass-loader": "^10.1.1",

"vue": "^2.6.11",   

 vue create -p dcloudio/uni-preset-vue 项目名

如果写微信小程序 

  uni-app+uni-ui: 玩下uni-app+uni-ui默认，全端适应的ui框架

在gitee 将该项目下载下来 

main.js 全局注册

微信小程序上用uni-ui为什么不用npm直接下载？

 npm 下载uni-ui 试过，微信开发者工具上不生效，需要构建npm包，看了网上一大堆资料，操作了没卵用

注册好之后

在app.vue里引入公共scss

uni.scss 内

@import './common/theme.scss'; 

项目内manifest.json 内 找到这段， 填写好你的appid , appid的获取需要注册小程序或公众号。

 然后npm run dev:mp-weixin启动项目 随后会出现dist 文件夹， 微信开发者工具选择在文件目录中找到dist文件夹一直找到这个文件夹

 

 

uniapp微信小程序vscode开发脚手架.zip
09-19
脚手架工具一般会预先设定好项目的目录结构、配置文件和一些基础的代码，使得开发者可以迅速进入业务逻辑的开发阶段，而不必从零开始搭建整个项目结构。 当uniapp、微信小程序以及VS Code三者结合起来时，开发人员...
vscode创建uniapp项目
小袁同学的学习日常
12-02 4907
创建项目 用vscode创建vue的uniapp项目 用cli创建uniapp项目 首先得有vuecli才能用过cli创建项目 npm install -g @vue/cli vue-cli安装好了之后就可以通过cli创建项目了 vue create -p dcloudio/uni-preset-vue my-project ‘my-project’是自定义的项目名字 正常创建项目应该是会报错，因为有墙不能远程连接github的uni代码工具 也就是这一步 F:\VUEobj>vue create -
使用vscode写uniapp
poguanba的博客
10-14 1175
npm run dev:mp-weixin使用这个命令，将代码运行起来。2.在manifest.json填上自己的appid。打开设置，查询文件关联， 在添加项里面加上如下内容。3.npm i 一下，把需要的包下载下来。tsconfig.json文件加上。然后在微信开发者工具上运行起来。6.json文件会显示报错。这样一个项目就创建好啦。5.下载类型声明文件。
用vsCode写uniapp项目
iaz999的博客
05-27 5691
局部安装了vue2和vue3切换到安装目录下，打开powershell查看版本。
小程序-uni-app：uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode
热门推荐
snow的博客
06-08 2万+
uniapp微信小程序开发全记录
uni-app （通过HBuilderX 和 VS Code 开发）详细连接过程教学。
qq_58213084的博客
06-27 6809
使用HBuilderX创建 uni-app 项目 并编译到微信开发者工具。uni-app 支持两种方式创建项目：通过 HBuilderX 创建通过命令行创建首先我们需要先下载HBuilderX下载安装 HbuilderX 编辑器下载会自动匹配电脑系统，直接下载即可，不需要更改。通过 HbuilderX 创建 uni-app vue3 项目安装 uni-app vue3 编译器插件（可以让我们将vue3的代码编译到各端上面去）编译成微信小程序端代码路径只需初次使用时设置一次即可。
从零搭建uniapp项目
Angindem博客
06-06 1404
本文摘要： uni-app项目搭建与配置指南，包含以下核心内容： 项目创建：使用npx degit初始化Vue3+TS模板项目 UI组件库：安装uni-ui和uview-plus，配置easycom自动导入 TS支持：配置组件类型声明、标签高亮，解决TS报错 状态管理：Pinia安装与模块化配置，实现持久化存储 样式配置：全局SCSS样式引入与组件库主题集成 常见问题：处理非原生标签报错和依赖版本兼容性问题 该配置方案适用于uni-app多端开发，重点解决了TS类型支持、组件自动导入和状态持久化等常见痛点。
vite + vue3 + uniapp 项目从零搭建
qq_33365152的博客
07-18 2502
vite + vue3 + uniapp 项目从零搭建、uniapp、微信小程序
Ubuntu 20.04.6使用vscode从0开始搭建uniapp
11-01
### 创建UniApp项目 打开终端，使用Vue CLI创建一个新的UniApp项目。可以选择不同的模板，这里以默认模板为例： ```bash vue create -p dcloudio/uni-preset-vue my-uniapp-project ``` `my-uniapp-project`是项目的...
从零开始Vite搭建vue3项目
Program_girl_Qi的博客
06-30 664
从零开始搭建vue3项目
如何通过vscode开发调试uniapp小程序
qq_41906802的博客
07-07 7746
使用vscode开发uniapp小程序
在vscode搭建uuniapp微信小程序项目（小白笔记） {持续补充}.
C_javascrip的博客
07-03 3539
在vscode搭建uuniapp微信小程序项目
如何在vscode中开发运行uniapp项目
weixin_73320836的博客
02-08 1万+
【直接下载即可用】
vscode 创建 uniapp 项目
MRD
08-13 2990
vscode 创建 uniapp 项目
vscode如何创建uni-app项目（以及cnpm的安装）
weixin_52768646的博客
09-14 2438
文章目录一、CLI工程全局安装二、选择项目模板1.hello uni-app模板2.安装vue插件3.下载uni-app代码块4.使用scss样式5.cnpm的安装出现cnpm不是内部或者外部命令，不要着急 配置电脑path变量如果仍然出现 cnpm 不是内部或者外部命令第一步：新建两个文件夹 node_global和node_cache第二步：执行命令第三步：配置环境变量第四步：安装cnpm第五步：设置npm源第六步：输入cnpm -v 一、CLI工程全局安装 npm install -g @vu
如何使用Vscode开发Uni-app项目以及注意事项详解
顾风的博客
03-28 4524
关于在Vscode开发uniapp项目
前端-vscode中开发uni-app
ycmy2017的博客
03-21 2071
vscode，uni-app，微信小程序
使用vscode开发配置uni-app(小程序)
yasinawolaopo的博客
12-16 1万+
本章为vscode人群配置uniapp开发笔记
使用 VSCode 开发 uniapp
Gblfy_Blog
01-03 5324
虽说 HBuilder X 开发体验还算不错，但是有时候金窝银窝不如自己的狗窝，当我们习惯了 VSCode 之后，有时候不太愿意换开发工具。 那么怎么使用 VSCode 来开发 uniapp 呢？ 其实是有办法的。 使用 HBuilder X 运行项目 使用 VSCode 打开项目 在 VSCode 中安装插件： uni-helper - 让开发者在 VSCode 中开发 uni-* 的体验尽可能好。 uni-app-snippets - 支持 uni-app 基本能力的代码片段，包括组件和 API u
vscode中怎么创建uniapp组件
最新发布
11-26
目前给定引用中未提及在 VSCode 中创建 uniapp 组件的方法。不过一般而言，在 VSCode 中创建 uniapp 组件可按以下通用步骤进行： 1. **准备工作**：使用 HBuilder X 运行项目，再用 VSCode 打开该项目，同时在 VSCode 中安装相关插件，如 uni-helper、uni-app-snippets、uni-app-schemas、uni-ui-snippets 等，以提升开发体验和效率。为实现组件语法提示，手动安装依赖包 `cnpm i @dcloudio/uni-helper-json` [^1][^2]。 2. **创建组件文件**：在项目的 `components` 目录（若没有则手动创建）下，创建一个新的文件夹用于存放组件相关文件。在该文件夹内创建 `.vue` 文件，这是 uniapp 组件的主要文件，其基本结构如下： ```vue <template> <!-- 组件的模板结构 --> <view class="my-component"> <!-- 这里编写组件的具体内容 --> </view> </template> <script> export default { name: 'MyComponent', data() { return { // 组件的数据 }; }, methods: { // 组件的方法 } }; </script> <style scoped> /* 组件的样式 */ .my-component { /* 样式规则 */ } </style> ``` 3. **使用组件**：在需要使用该组件的页面 `.vue` 文件中，引入并注册组件，示例如下： ```vue <template> <view> <!-- 使用组件 --> <my-component></my-component> </view> </template> <script> // 引入组件 import MyComponent from '@/components/MyComponent/MyComponent.vue'; export default { components: { // 注册组件 MyComponent } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值