首页 > 其他分享 >vue3微信公众号商城项目实战系列(1)开发环境准备

vue3微信公众号商城项目实战系列(1)开发环境准备

时间:2023-04-13 18:15:12浏览次数:51  
标签:微信 vue3 开发 Vue3 安装 商城

项目忙完,这次上新,写一个前端系列,采用vue3来开发一个微信公众号商城。

前言:

1. 微信公众号商城本质也是一个网站,由一个个网页组成,只不过这些网页运行在手机端,能响应手指的点击、长按、拖拽等操作。

2. 既然是网页,当然可以用3件套(js+html+css)来写,但象vue这样的前端框架比3件套更高效,或者现实一点说,会一个前端框架能有更多的工作机会。

3. 目前流行的前端框架有 Angular、React、Vue(按首字母顺序排名),Vue的主流版本有Vue2和Vue3 ,本系列用的是Vue3。

4.Vue3 可用 javascript(弱类型) 或 typescript(强类型) 做脚本语言,本系列用 javascript 。

5. Vue3官网地址:https://cn.vuejs.org/ ,

6. Vue3的开发工具官方推荐 vscode,见下图,官方下载链接:https://code.visualstudio.com/

7. 开发vue3项目时,在开发环境运行需要安装 nodejs,官网地址及安装步骤如下,项目开发完成编译后的代码部署到服务器时不需要在服务器上安装nodejs ,

也就是说Web服务器不需要安装任何其他软件,原因后面再具体讲。

 点击LTS版本开始下载

下载之后安装到本机,一直点"Next"按钮就可以了,如下图:

安装完成后在本机目录可以看到,如下图:

 

在地址栏输入"cmd"后回车,快速打开命令窗口:

此时的命令行路径就是刚才的路径,避免输入cd命令切换目录,见下图:

输入 "node -v" 和 "npm -v" 查看版本,见下图:

 

标签:微信,vue3,开发,Vue3,安装,商城
From: https://www.cnblogs.com/pfm33/p/17315202.html

相关文章

  • 微信小程序实现tab切换和数据列表
    微信小程序实现tab切换和数据列表问题背景上篇文章介绍了微信小程序实现tab切换的一种方案(参考https://blog.51cto.com/baorant24/6188157),感觉代码不是很精简,本文再用一个demo介绍微信小程序如何实现tab切换和数据列表。问题分析微信小程序对应页面文件结构如下:问题解决话......
  • 在Django+Vue3+GraphQL的Blog例子代码中引入Element-Plus UI Framework
    Vue3的UIFramework中有Element-Plus、BalmUI、Quasar、PrimeVue、AntDesignVue等UIFramework.Element-Plus是Element-UI的Vue3版,Element-UI的使用人数的基数较大,Github上的Star数也较多,就选择了Element-Plus作为这个Blog项目的UIFramework.UIFramework的好处就是提供了......
  • 微信小程序中target和currentTarget的区别
    微信小程序中target和currentTarget的区别<viewclass="outer-view"bindtap="outerHandler">​<buttontype="primary">按钮</button></view>点击内部按钮时,点击事件会通过冒泡的方式,向外扩散,触发view的tap事件,此时target指向触发事件源头,就是button,而c......
  • 微信小程序当input框中的值改变时获取input框的值
    微信小程序当input框中的值改变时获取input框的值wxml文件,input框值改变触发inputHandler函数<inputstyle="border:1pxsolid;"type="text"bindinput="inputHandler"/>js文件inputHandler(e){console.log(e.detail.value)}......
  • 微信小程序中rpx
    rpx是为了解决微信小程序屏幕宽度自适应问题产生的尺寸单位,是微信小程序独有的尺寸单位,rpx(responsivepixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像素,1rpx=0.5px=1物理像素。引......
  • 用quasar+vue3+组合式api VueRouter实现路由嵌套(二级路由)
    前言:本项目使用的是quasar创建,vue3的组合式api语法。部分语法不同,但不影响理解,修改语法后可以在vue2/选项式api项目中运行。效果图:文件目录结构和代码如下:   文中用到的标题栏数据如下:consttitles=ref([{name:"首页",path:"home",children:[]},{......
  • 微信小程序嵌套的webview页面实现导航,可跳转高德百度等app
    需求:微信小程序中使用webview嵌套了h5页面,h5页面中有经纬度,需要实现唤醒高德app。实现思路:此处h5未配置wxSDK,无法直接使用openLocation,所以将经纬度传给小程序,map页面为跳转中间页,再实现打开地图页面。h5://高德地图导航constaMapNavigate=(address,lng,lat)=>{......
  • 微信小程序云开发中的command简介
    微信小程序云开发(WeChatMiniProgramCloudDevelopment)是微信官方推出的一种简化小程序开发的方案。它提供了一个完整的后端云服务,支持数据库、存储、云函数等功能。在云开发中,Command是一个重要的概念,主要用于操作数据库。Command是数据库命令的构造器,它用于构造复杂的数据......
  • 微信小程序打开pdf文件,并支持保存分享等操作
    微信小程序直接下载文件时,保存到的路径为缓存路径tempxxx,如果需要查找文件就很麻烦,那我们可以先在小程序中预览文件,再执行后续操作,代码如下://方法constdownload=(type)=>{const{url='',name}=type;if(!url)return;console.log('uuuu',url,nam......
  • 微信小程序获取用户位置 getLocation
    首先在app.config.json中配置exportdefaultdefineAppConfig({pages:[],permission:{"scope.userLocation":{"desc":"你的位置信息将用于小程序位置接口的效果展示"}},})方法调用:constgetLocation=()=>{Taro.getLocation({......