[uni-app]旧项目改成cli项目，为自动化部署准备

如果没安装cli,需要先全局安装cli

npm install -g @vue/cli

创建项目

vue create -p dcloudio/uni-preset-vue my-h5

这里如果失败，改成用梯子再试试 完成后会出现选择模板，我这里选择的是 Hello uni-app

之后就可以看见成功信息了， 按照提示

cd my-h5

yarn serve

此时你看到项目跑起来的信息，恭喜！你已经完成了一半~，现在要做的就是把旧的项目代码放到新搭建的工程里。

1. 看到新项目里面的 src 目录，除了以下红圈的文件，其他的都删掉
2. 将旧项目里面的所有文件都copy到新项目的 src 目录(除去 node_modules、vue.config.js、git相关，package相关文件)
3. src目录里查找项目代码 /deep/ 替换成 ::v-deep

运行dev报错

cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve

需要先安装 cross-env

npm install -g cross-env --no-bin-links

另外：

使用Vue3/Vite版

创建以 javascript 开发的工程

npx degit dcloudio/uni-preset-vue#vite my-vue3

创建以 typescript 开发的工程

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3

注意

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0

如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）

HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径 
HBuilderX Windows 版本菜单栏 工具->设置->运行配置->node路径

本文内容部分参考：

uni-app h5项目通过命令行创建，打包自动化部署

uniapp项目结构改造及优化，支持自动化部署和不同环境的发布需求

更新 uniapp cli命令

npx @dcloudio/uvm@latest 该命令能将 package.json 相关uniapp依赖的自动更新

查看官方的详细介绍