vscode中开发运行uniapp项目详细步骤

 更新时间:2023年07月03日 15:22:46   作者:升的Web3D屋  
VSCode作为一个非常强大的代码编辑器,可以集成众多的插件和工具来优化开发效率,这篇文章主要给大家介绍了关于vscode中开发运行uniapp项目的详细步骤,需要的朋友可以参考下

在实际开发中,我们知道Hbuilder写代码和调试非常麻烦,换到我们的vscode,快捷键那些,界面插件调试,那叫一个舒服

输入这个

1、全局安装vue脚手架 

   npm install @vue/cli -g 

2.查看node-v版本号,我的是16,就没啥问题

3.输入这个命令

vue create -p dcloudio/uni-preset-vue my-project

如果不连连接也很正常,因为没有科学上网,所以自己去github官网下个模板就行了

教大家一种简单的方法

如果是创建vue3.0 + vite + javascript的uni-app项目,直接在浏览器打开 https://github.com/dcloudio/uni-preset-vue 切换到vite分支下载zip后缀的压缩文件,解压到本地就可以了。

2、如果是创建vue3.0 + vite + typescript的uni-app项目,直接在浏览器打开 https://github.com/dcloudio/uni-preset-vue 切换到vite-ts分支下载zip后缀的压缩文件,解压到本地就可以了。

我选择了 这个

3、如果是创建vue2.0 + javascript的uniapp项目报错,解决办法费劲些:

直接在浏览器打开 https://github.com/dcloudio/uni-preset-vue,在master分支下载zip后缀的压缩文件,解压到本地。
通过命令行安装, -p后面是解压后的项目创建包的路径,记得路径中用/,而不是\。

vue create -p D:/uni-preset-vue-master my-vue2-project

不能上gitub的小伙伴,到我的国内gitee的网址下载一样滴!!!

https://gitee.com/chen-zhengsheng/uniapp-vscode-vue3-ts-template?_from=gitee_search

然后按照提示选择选择执行即可

现在2023年了,建议都用vue3+ts+vite,那写起来是真的爽!!!

网页运行

npm run dev:h5

微信小程序运行

npm run dev:mp-weixin

此时会生成一个dist文件

 选择就可以

 名字换一个,然后appID用之前的就可以

 这个我的代码就能在网页和微信小程序同时运行啦,实时保存热更新!

万事开头难,创建成项目就成功了一半

总结

到此这篇关于vscode中开发运行uniapp项目的文章就介绍到这了,更多相关vscode开发运行uniapp项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • vue设置页面超时15分钟自动退出登录的方法详解

    vue设置页面超时15分钟自动退出登录的方法详解

    当用户登录后,如果长时间未操作页面这个时候需要自动退出登录回到登录页面,本文将给大家介绍一下vue设置页面超时15分钟自动退出登录的方法,感兴趣的同学可以自己动手试一下
    2023-10-10
  • Vue中Keep-Alive缓存组件使用语法及原理深度解析

    Vue中Keep-Alive缓存组件使用语法及原理深度解析

    keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM,这篇文章主要介绍了Vue中Keep-Alive缓存组件使用语法及原理,需要的朋友可以参考下
    2024-07-07
  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    本篇文章主要介绍了Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输示例,非常具有实用价值,需要的朋友可以参考下。
    2017-02-02
  • 详解vue+vuex+koa2开发环境搭建及示例开发

    详解vue+vuex+koa2开发环境搭建及示例开发

    本篇文章主要介绍了详解vue + vuex + koa2开发环境搭建及示例开发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue的template模板是如何转为render函数的过程

    vue的template模板是如何转为render函数的过程

    Vue从template到render函数的转换经历模板解析、AST构建、优化、生成渲染函数等步骤,首先进行词法分析将模板拆解为tokens,再进行语法分析构建AST,然后对AST进行静态标记和提升优化,最后转换成JavaScript渲染函数,生成虚拟DOM,完成组件的渲染和更新,实现了模板的高效转化
    2024-10-10
  • vue跳转后不记录历史记录的问题

    vue跳转后不记录历史记录的问题

    这篇文章主要介绍了vue跳转后不记录历史记录的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue 动态生成拓扑图的示例

    vue 动态生成拓扑图的示例

    这篇文章主要介绍了vue 动态生成拓扑图的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • 如何使用sm4js进行加密和国密sm4总结

    如何使用sm4js进行加密和国密sm4总结

    近期由于公司项目的需要开始研究国密SM4加密,下面这篇文章主要给大家介绍了关于如何使用sm4js进行加密和国密sm4的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vue-cli3中如何引入ECharts并实现自适应

    Vue-cli3中如何引入ECharts并实现自适应

    这篇文章主要介绍了Vue-cli3中如何引入ECharts并实现自适应,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明方法详解

    vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明方法详解

    我在学习vue3+vite+ts的时候,在配置别名这一步的时候遇到了一个问题,这篇文章主要给大家介绍了关于vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论