UniAPP转Vue-Cli项目少坑经验

发表于 2022-02-15  10.87k 次阅读


虽然uniapp很强大,适合国人,但是如果想继续折腾(比如说通过electron生成桌面应用)终归有点麻烦,为了解决这种问题,通过大量资料查询与实际操作,我在这里把uniapp转vue-cli项目的经验分享出来。

首先,创建一个新的目录,然后输入以下指令初始化vue-cli,如果您早已初始化过也请再执行一遍,万一有更新呢:

npm install -g @vue/cli

在木棍和进度条全部跑完后,我们就可以创建一个空的UniAPP工程了

vue create -p dcloudio/uni-preset-vue my-project
//使用正式版(对应HBuilderX最新正式版),my-project项目名称不支持驼峰式命名,执行命令会先安装uni-app的插件,插件安装完成后,会提示选择项目模板,最好选择默认模版

然后,我们再安装Sass

npm install [email protected] --save
npm install [email protected] --save

在这些工作完成后,您就可以将这个vue-cli模式的uniapp工程中的src目录内的文件删除,然后将原来的uniapp工程的文件倒入进来,不过有几个需要注意的事情:

  • 原项目内的package.json、package-lock.json不要导入进来
  • node_moudules目录不要导入进来
  • unpackage目录内除了res子目录其他目录都不要导入进来

在导入完成后,请在新项目的根目录执行以下类似命令来重新安装你在原项目上通过npm安装的插件。

npm install packagename --save
//packagename是你要安装的插件名字

在新项目的src/manifest.json文件内修改引用的文件目录,比如说图标、自定义错误页模板、启动图等等之类的,因为新项目中这些文件可能全部被放置在src目录下。

至此,UniAPP转Vue-Cli项目全部完成,不仅在Hbuilder内打开此新项目也可以正常运行、调试和发行,还可以向着更广阔的天地折腾。

此文章允许规范转载,请标注原作者江程训和文章发布地址。


纵使代码万千行