使用npx degit dcloudio/uni-preset-vue#vite-ts 命令创建项目
命令行创建uni-app项目,命令
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
https://uniapp.dcloud.net.cn/quickstart-cli.html
下面来实际创建一个uni-app项目,输入命令:
回车,出现如下界面,:
下载可能不顺利,例如,我的出现如下错误:
我多尝试了几次,就成功了:
备注:如果多次尝试实在下载不成功,就点击官网中的这个链接,跳转到gitee下载模版:
到生成的项目中查看内容,如下:
用HBuilder X打开刚刚生成的项目文件夹:
manifest.json文件增加微信小程序的AppID
打开manifest.json文件, 把自己的微信小程序的AppID填写进去:
运行npm i 命令安装依赖
打开package.json文件,可以看到有非常多的依赖:
右键单击:
选择 使用命令行窗口打开所在目录:
点击 使用内置终端:
点击 确定:
内置终端安装好以后:
在终端中执行npm i
命令安装依赖:
安装依赖完成后,项目目录下多了node_modules文件夹:
运行npm run dev:mp-weixin 命令编译成微信小程序
打开package.json文件,scripts部分可以看到很多命令,其中dev开头的命令适合于开发阶段使用,修改了文件立即生效;build开头的命令适合于上线阶段:
编译成微信小程序,使用这行命令:
在终端中运行命令npm run dev:mp-weixin
:
编译生成的微信小程序:
在微信开发者工具中导入
打开微信开发者工具:
点击 导入,选择上面编译生成的微信小程序目录,然后打开:
验证热更新
打开index.vue文件:
修改内容,保存以后,自动编译,在微信开发者工具中体现了出来,说明热更新正常: