vue-cli基础上搭建uniapp

最新推荐文章于 2024-08-09 00:16:04 发布

&Cy

最新推荐文章于 2024-08-09 00:16:04 发布

阅读量306

点赞数

分类专栏： VUE uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_38069018/article/details/120669262

版权

VUE 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

uniapp

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何通过Vue-cli搭建UniApp项目。首先，利用npm设置淘宝镜像加速安装Vue-cli，接着使用vue create命令创建基于uni-preset-vue的UniApp项目。选择合适的模板后，进入项目目录并运行npm run serve启动开发服务器，即可开始你的UniApp开发之旅。

摘要由CSDN通过智能技术生成

VUE搭建（vue-cli）UniApp

一安装Vue-cli

#使用淘宝npm仓库加速
npm config set registry https://registry.npm.taobao.org
#安装Vue cli
npm install -g @vue/cli

在这里插入图片描述

二搭建UniApp

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

选择模板使用方向键,选定后按ENTER
在这里插入图片描述

三进入项目并运行

cd 你的项目名称
npm run serve

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

&Cy

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue-to-uniapp:用于代码适配性的转换

05-07

vue to uni-app 用于公司内部项目的文件转换把 Vue 组件文件放到 source 文件夹中，输出到 result 文件中转换好的可用在 uni-app 的组件文件主要转换的方面有如下几个： template 标签转换： div/li/ul 标签转换为 view img 转换为 image，添加 mode='widthFix'属性 span 转换为 text 标签内部的 template 标签，转换为 block 标签 transition 标签，转换为 uni-transition 标签 script 标签内部内容不转换 style 标签内容，暂时只考虑 less 对于 rem 单位，乘以 200 转换为 px 单位对于 px 单位，乘以 2 保持为 px 单位转换后还要注意一下几个方面的改写：如果之前图片是作为 div 的背景图，那在 uni-app 里面是不支

vue移动端项目迁移到uniapp，并兼容小程序

qq_41231694的博客

06-09

7289

H5中，如果在main.js中使用Vue.prototype.定义一个属性，这时候如果把这个属性使用在视图上，当属性变化的时候，视图也会跟着变化。这样能避免分包不能引用分包的问题。，如果你停留在这个页面，又去改变了Vue.prototype.data，视图还是不会刷新。项目中ui组件在uniapp中大概率是不兼容的，比如：我们vue移动端常用的组件有。除了tabbar的icon图标，其他的图片全部迁移到服务器上，通过链接的形式访问。这时可以去uniapp官网的插件市场，找到兼容的ui组件，比如。

参与评论您还未登录，请先登录后发表或查看评论

vue3、uniapp-vue3模块按需引入

热门推荐

weixin_39915504的博客

07-17

1万+

在不使用自动导入的情况下，我们每使用到一个vue或者uniapp的方法的时候，就需要import一下，当配置了自动导入后就不需要import了，可以极大的提高开发效率！

uniapp-cli:自用uniapp模板，vue-cli创建版本

04-09

【uniapp-cli】是基于Vue.js的前端框架uni-app的命令行工具，它提供了一种快速搭建项目模板的方式，尤其适合跨平台应用开发。通过uniapp-cli，开发者可以利用vue-cli来创建uni-app项目，从而简化项目的初始化过程，...

用Vue-cli搭建的项目中引入css报错的原因分析

08-29

在使用Vue-cli搭建项目时，遇到引入css文件报错的问题是非常常见的。本文将详细介绍这种问题的原因分析和解决方法。问题描述在使用Vue-cli搭建的项目中，我们经常需要引入css文件，例如引入ElementUI库中的css...

roc-cli-uniapp-template_uniapp_

10-01

总的来说，【 roc-cli-uniapp-template_uniapp_ 】是一个为了加速uniapp应用开发而设计的工具，它整合了网络请求和其他实用功能，让开发者能更专注于业务逻辑和用户体验的设计，而非重复的基础工作。通过深入理解和...

用Vue CLI创建uniapp项目，搭建模板。不仅可以HBuilder打包，也可以npm命令行运行及打包、发布

05-18

已经搭建好，下载即用。用Vue CLI创建uniapp项目，不仅可以HBuilder打包，也可以npm命令行运行及打包、发布。

详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决

10-17

Vue-cli3 是 Vue.js 框架的命令行工具，用于快速搭建现代化的前端项目。在使用 Vue-cli3 创建的项目中，可能会遇到在安卓低版本系统或 Internet Explorer（IE）浏览器上出现白屏的问题。这通常是由于这些老旧平台不...

vue使用-uniapp使用

da297368860的博客

05-11

2134

1、style拼接 <view class="cu-avatar round lg" :style="'background-image:url('+item.user.userAvatar+')'"></view> 2、style中使用三元运算符 <view class="cu-avatar round lg" :style="'background-image:url('+(item.userIdAnonymity==0?item.user.userAvata

vue中全局、局部引入js文件【vue】、【uniapp】

wwppp987的博客

02-18

4058

vue和uniapp中引入js文件一、全局引入 1、main.js当中引入 // 引入个人定义js文件 import * as tools from './common/util/faser/useage.js' // 自定义tools Vue.prototype.$tools=tools; 2、在vue文件中引用： {{$tools.getDateTime()}} this.$tools.getDateTime() 3、工具类文件必须遵循格式：export function useage.js中

vue整合uniapp_vue h5转换uni-app指南（vue转uni、h5转uni）

weixin_28809647的博客

12-23

223

如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。首先注意2个前提：1、你的web站是适合手机屏幕的；2、你的H5代码是全后端分离的，uni-app只处理前端代码。一切从新建一个uni-app项目开始。然后依次进行文件处理把之前的vue web项目的前端代码copy到新项目下如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节...

前端（五）——从 Vue.js 到 UniApp：开启一次全新的跨平台开发之旅

杜永康的博客

07-11

4038

🙂博主：小猫娃来啦 🙂文章核心：UniApp和vue.js之间的事儿UniApp是一种基于Vue.js的跨平台应用开发框架。它是由DCloud（数字天堂）开发和维护的，旨在帮助开发者使用一套代码构建同时运行在多个平台（包括iOS、Android、Web等）的应用程序。UniApp基于Vue.js框架，使用Vue.js的语法和特性来开发应用程序。开发者可以使用熟悉的Vue.js开发方式，如组件化开发、数据驱动视图等，来构建跨平台的应用程序。与此同时，UniApp提供了一套统一的API和组件库，可以让开发者

Vue2.5学习笔记（二）深入了解组件

Zijeak的博客

09-08

4242

1.组件使用的细节 1.2 子标签内使用组件假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref

初入uniapp - 通过vue-cli搭建uniapp

passerby64的博客

11-09

950

创建uniapp的demo

使用vue2开发uni-app项目流程

qq_41282779的博客

08-16

4718

记录使用vue2开发uni-app项目点的前期工作，包括环境工具的准备等。提示：以下是本篇文章正文内容，下面案例可供参考未完待续。

Vue-uniapp笔记

weixin_49562132的博客

05-09

4196

一、Pages生命周期 uni-app 支持如下页面生命周期函数：函数名说明平台差异说明最低版本 onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad 百度小程序 3.1.0+ onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例 onShow 监听页面显示。页面每次出现

cli搭建uniapp

09-03

当您想要搭建UniApp项目时，可以按照以下步骤使用命令行界面（CLI）： 1. 确保您已经安装了Node.js。您可以在终端中输入 `node -v` 来检查是否已经安装。 2. 打开命令行终端，并使用以下命令安装Vue CLI（如果您之前已经安装过，请跳过此步骤）： ``` npm install -g @vue/cli ``` 3. 安装完Vue CLI后，使用以下命令创建一个新的UniApp项目： ``` vue create -p dcloudio/uni-preset-vue my-uniapp ``` 这将创建一个名为 `my-uniapp` 的UniApp项目。 4. 进入项目目录： ``` cd my-uniapp ``` 5. 使用以下命令启动开发服务器： ``` npm run dev:mp-weixin ``` 这将启动一个微信小程序的开发服务器。您可以根据需要选择其他平台，例如 `dev:h5`（H5网页）、`dev:app-plus`（App）等。 6. 打开微信开发者工具，并导入项目。将项目目录设置为刚才创建的 `my-uniapp` 目录。现在，您已经成功搭建了一个UniApp项目，并且可以在微信开发者工具中进行开发和调试。请注意，您还可以根据需要进行其他配置和自定义。