搭建vue前端框架或微信小程序vue框架步骤

搭建vue前端框架或微信小程序vue框架步骤

1.下载node.js
下载地址:https://nodejs.org/en/download/
查看node、npm版本,确保环境正确

node --version
npm --version

2.安装vue脚手架工具vue-cli
若开发工具为IntelliJ IIDEA,创建项目步骤为create new project -> static web;
若开发工具为Visual Studio Code,则OPEN Floder -> 可为本地空文件夹名。
确保Terminal中指向位置为正确位置,执行
npm install -g @vue/cli-init

3.初始化结构
vue init webpack happyHealth
根据安装步骤提示与项目具体情况进行选择
在这里插入图片描述
4.安装插件与运行
执行cd happyHealth或者通过工具打开happyHealth文件夹

cd happyHealth
npm install

可在index.js文件中更改端口号
在这里插入图片描述

npm run dev

执行启动代码,待启动成功,浏览器打开默认页面
在这里插入图片描述

PS:
若要使用VUE搭建微信小程序前端框架,可借助美团点评的mpvue框架,如上步骤,在项目初始化结构时,更换执行如下命令,其余步骤雷同

vue init mpvue/mpvue-quickstart happyHealth
  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
搭建一个微信小程序使用Vue框架,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装好了Node.js和npm(Node.js的包管理器)。 2. 使用命令行工具进入你想要创建项目的目录。 3. 运行以下命令来安装Vue CLI(命令行界面):`npm install -g @vue/cli`。 4. 创建一个新的Vue项目,可以使用以下命令:`vue create <项目名称>`。例如,运行`vue create my-app`来创建一个名为my-app的项目。 5. 在创建项目时,你可以选择手动配置自己的项目,或者使用默认配置。如果是初学者,建议选择默认配置。 6. 创建成功后,进入项目目录:`cd <项目名称>`。 7. 安装微信小程序Vue适配器,运行以下命令:`vue add mpvue`。 8. 安装完成后,你就可以使用Vue的语法和特性来开发微信小程序了。 9. 在src目录下创建一个新的页面或组件,可以在pages目录下创建页面,在components目录下创建组件。 10. 在微信小程序的入口文件main.js中注册页面或组件。 11. 运行微信开发者工具,打开项目所在目录。 12. 在微信开发者工具中导入项目,选择小程序项目,填入项目名称和路径。 13. 开发者工具中会自动编译和打包项目,并在预览窗口中显示小程序效果。 这样,你就成功搭建了一个使用Vue框架开发的微信小程序。你可以根据需要继续开发和完善你的小程序。希望对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未来悦,事享成

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值