学习Uniapp Vue3的准备工作

目录

注意：本章的所有命令都是再英文输入法的状态下输入的！ 

1.下载安装Node.js

1.下载

2.安装

1.安装步骤

2.npm模块插件安装路径配置

1.在Node.js的安装路径创建一个文件夹：node_cache

2.在上图的路径上打开cmd

3.执行命令

4.配置使用淘宝镜像

5.安装vue的基础依赖

3.下载开发工具

4.配置HBuilderX及介绍vue项目工程结构

1.项目结构

2.创建uniApp Vue3项目

3.运行相关

3.1浏览器运行配置

3.2小程序运行配置(默认没有配置)

3.2.1微信小程序启动不了为什么？

5.安装你学习的对应小程序开发工具

---

注意：本章的所有命令都是再英文输入法的状态下输入的！ 

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)