VSCode 配置uni-app的方法

CＬＩ工程全局安装vue-cli

npm install -g @vue/cli

通过cli创建uni-app项目

vue create -p dcloudio/uni-preset-vue uni-app

选择项目模板，可自由选择如下图：👇

使用vscode打开创建的项目

安装vue语法提示插件👇

cli工程自带uni-app&5+app语法提示

安装组件语法提示

npm i @dcloudio/uni-helper-json

从 git 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

使用scss样式

#先安装node-sass
 npm install node-sass
 #然后安装sass-loader，这里安装7.3.1版本，版本可选择性更新，因为高版本可能会报错
#使用 cnpm 会快一些
 cnpm install sass-loader@7.3.1

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可选值参见package.json中的scripts

HBuilderX 工程

  • HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装
  • 初始化npm

npm i @types/uni-app @types/html5plus -D

安装uni-app语法提示

npm i @types/uni-app @types/html5plus -D

uni-app项目中manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开

总结

到此这篇关于VSCode 配 uni-app的文章就介绍到这了,更多相关VSCode 配 uni-app内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • 基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览 在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un

  • vue中uni-app 实现小程序登录注册功能

    思路: 1.使用微信的 open-type="getUserInfo" 获取用户信息,将用户信息保存到userinfoDetails对象中去. <button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button> 2.使用 u

  • uni-app如何页面传参数的几种方法总结

    uni.$emit(eventName,OBJECT) 触发全局的自定事件.附加参数都会传给监听器回调. 其中eventName为事件名,OBJECT为触发事件附加参数 示例代码如下: uni.$emit('update',{msg:'页面更新'}) uni.$on(eventName,callback) 监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数. eventName为事件名,callback为事件的回调函数. 示例代码如下: uni.$on('updat

  • Win10下为VSCode配置LaTex编辑器的方法

    任务描述 写小论文的利器是什么呢?LaTex!写代码的利器是什么呢?VSCode!好,那么如何在VSCode上配置LaTex环境呢,以及配置之后,如何选择编译的方式呢?大部分博客只说如何配置,却不说如何编译,导致在编译的过程中总是报错,本文就详细的讲一下这两点. 配置LaTex 首先,打开VSCode,根据图中的步骤,安装LaTex Workshop,我的已经安装过了,所以没显示Install 安装LaTex的步骤 其次,在VSCode界面,按快捷键:ctrl + Shift + p,召唤出搜索

  • VSCode配置C++环境的方法步骤（MSVC）

     最近心血来潮,想用一下微软的VSCode写一下C++,然而第一步就卡住了,竟然不会配置C++环境,陆陆续续搞了两天,总算是弄明白了,网上msvc教程比较少,就打算分享出来,也记录下自己的历程.  先说说我的理解吧,Visual Studio Code和visual studio不同,后者是属于IDE是个集成开发环境,下载好基本就能直接用来写C++等:  而Visual Studio Code(以下简称VSC)是一个编辑器,简单来说和windows电脑上的那个看.txt文件的记事本一个类别,然而

  • VSCode 配置React Native开发环境的方法

    VSCode 配置React Native开发环境的方法

    本文介绍了VSCode 配置React Native开发环境的方法,分享给大家,具体如下: 1.安装VSCode 2.安装插件 按F1 并输入 ext install 并回车, 或者使用 输入react-native安装React Native Tools 假定你已经在设备上安装了react native, 如果没有安装,请使用npm install -g react-native-cli安装 或者按照官方文档操作 新建一个RN工程 并使用VSCode打开 安装完成后 按F1可以看到命令里多了很

  • VSCode配置C/C++并添加非工作区头文件的方法

    下文均在Windows环境下: 配置C/C++ 按照教程安装MinGW,并配置gcc和g++,配置方法有两种: 1 GUI配置 在MinGW Installation Manager中选取对应的Package,然后Installation->Apply Changes,如果失败则多试几次. 2 控制台配置 配置系统环境变量: 1.xxx/MinGW/bin; 即安装MinGW目录下的bin文件夹 然后在cmd中输入: 1.mingw-get install gcc g++ mingw32-mak

  • vscode配置anaconda3的方法步骤

    注意: 由于博文已经很多这方面的内容,这里不介绍安装vscode和anaconda的步骤,只讨论如下情况: 已经安装了anaconda,也从官网下载了vscode,如何将两者关联起来?(目前anaconda支持下载安装vscode,这里仅仅针对没有从anaconda下载而是从官网下载vscode的情况) 在anaconda中已经安装了numpy,matplotlib等安装包,不想在vscode中再次安装,与anaconda关联后可以一起调用 针对上面的情况,通过如下步骤可以解决 1,进入file

  • VSCode配置C语言环境的方法

    VSCode配置C语言环境的方法

    VSCode配置C语言环境 VSCode是一款强大编辑器,开源,免费,海量插件,支持很多编程语言.其中的很多功能可以大大地提高我们的学习与工作效率,现在本文介绍如何在VSCode上配置C语言环境. 1.下载安装 VSCode下载官网:https://code.visualstudio.com/ 下载完成之后安装在默认位置或者自定义位置 下面全部选择 然后是编译环境,我们选择gcc. 下载地址:https://sourceforge.net/projects/mingw-w64/files/ 打开

  • VScode中配置使用fortran的方法

    VScode中配置使用fortran的方法

    目录 一． 编译器的下载 1.编译器的选择 2. MinGW w64文件下载 3.环境变量的配置 二． VScode调试相关插件 1. 安装VScode 2.命令行窗口编辑 3.安装插件 三．编译运行 1.配置文件 2.调试 ** 一． 编译器的下载 ** 1.编译器的选择 MinGW w64是Minimalist GNU for Windows的缩写. 它是一个可自由使用和自由发布的Windows特定头文件和使用GNU工具集导入库的集合, 里面包含了我们需要的C编译器gcc, C++编译器g+

  • VSCode配置python环境及中文问题解决方法

    VSCode配置python环境及中文问题解决方法

    目录 1配置环境 1.1setting.json 1.2launch.json 1.3task.json(可能不需要配置) 2print打印中文乱码 2.1方法一 2.2方法二 1 配置环境 setting.json·是设置语言环境,launch.json是设置执行环境来执行代码,tasks.json是用来设置指令编译代码 1.1 setting.json 配置python解释器,在vscode界面内按下ctrl+shift+p键,输入python,选择python解释器(python属于解释语

  • VSCode 配置C++开发环境的方法步骤

    第一步.安装VSCode应用程序 打开VSCode官网,下载对应安装包并默认安装(这里指明:安装路径可以修改) 第二步.安装相关插件 此时的VSCode仅仅是一个英文文本编辑器,还称不上开发工具,所以需要相关的插件支持. 需要说明的是:这里我选择我的母语作为编辑器的语言,所以会多安装一个汉化插件! 安装 汉化插件 打开VSCode,在插件搜索输入框输入"Chinese",搜索插件"Chinese (Simplified) Language Pack for Visual St

  • vscode 配置eslint和prettier正确方法

    vscode 配置eslint和prettier正确方法

    ESlint ESLint 是一款语法检测工具.因为 JavaScript 本身是一门灵活的动态语言,一千个 JavaScriptor 就有一千种写法.为了方便人们的理解,快速上手别人的代码. 说明 在开发项目的时候,往往会通过eslint来检查代码格式,而prettier用来进行代码的格式化.本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置. vscode 安装插件 首先,需要在vscode上安装eslint和prettier的插件. 项目中的配置文件

随机推荐