注意:本章的所有命令都是再英文输入法的状态下输入的!
1.下载安装Node.js
1.下载
Node.js中文网下载地址:Node.js 中文网 — 下载 Node.js ® (nodejs.cn)
2.安装
1.安装步骤
原因:由于C盘有权限问题,后续操作不方便,所以不建议安装在C盘!
在cmd查看是否安装成功:node -v和 npm -v 查看版本
2.npm模块插件安装路径配置
1.在Node.js的安装路径创建一个文件夹:node_cache
2.在上图的路径上打开cmd
3.执行命令
npm config set prefix "E:\KTSP\vue3学习\Nodejs" //全局模块插件存放位置
npm config set cache "E:\KTSP\vue3学习\Nodejs\node_cache" //缓存路径
例如:
复制后再cmd里点击鼠标右键即可粘贴上去
执行完之后通过npm config list查看npm配置
你的没有箭头标记的那一行是因为你还没配置,我的是配置过了的
4.配置使用淘宝镜像
为了解决npm下载速度慢的问题
npm config set registry https://registry.npmmirror.com
查看配置npm config list
5.安装vue的基础依赖
npm install -g @vue/cli
安装成功之后大致是这样的
如果出现报错
去 https://juejin.cn/post/7173964362762158111 这个地址有解决办法,其中他所说的node文件就是你的Node.js安装目录
3.下载开发工具
BHuilderX工具官网下载:HBuilderX-高效极客技巧 (dcloud.io)
这里就不做安装教程了直接配置一些东西
4.配置HBuilderX及介绍vue项目工程结构
1.项目结构
Pages: 业务页面文件存放的目录
Index
Index.vue index页面
Static: 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源都应存放于此目录
Unpackage: 非工程代码,一般存放运行或发行的编译结果
App.vue 应用配置,用来配置App全局样式以及监听
main.js Vue初始化入口文件
manifest.json 配置应用名称、appid、logo、版本等打包信息
pages.json 配置页面路由、导航条、选项卡等页面类信息
uni.scss 内置的常用样式变量
2.创建uniApp Vue3项目
3.运行相关
3.1浏览器运行配置
工具==>设置
3.2小程序运行配置(默认没有配置)
3.2.1微信小程序启动不了为什么?
因为微信小程序默认是没有开启服务端口的所以HBuilderX启动不了
5.安装你学习的对应小程序开发工具
微信小程序开发工具官网下载:developers.weixin.qq.com/miniprogram/dev/devtools/download.html
抖音小程序开发工具官网下载:开发者工具正式版下载_小程序_抖音开放平台 (open-douyin.com)
支付宝小程序开发工具官网下载:下载小程序开发者工具 - 支付宝文档中心 (alipay.com)