携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天
最近想把uniapp项目部署到jenkins上，方便后续版本的发布，但是项目是基于HBuilderX构建的，打包和运行都是通过HBuilder操作，这就比较难受了。所以如果想部署到jenkins，得用npm命令运行、打包和发布，就意味着需要将uniapp项目转成vue-cli项目。
我没有找到直接转的办法，所以我的解决方案是，建一个新的vue-cli项目，然后把旧项目的业务代码拷贝的新项目中。
1. vue-cli创建一个新项目
1.1 全局安装vue-cli
npm install -g @vue/cli@4.5.15
注意：尽量指定版本， 如果直接运行
npm install -g @vue/cli，可能装的是最新的vue-cli@5版本，到运行的时候可能会报错：Error: Cannot find module ‘webpack/lib/RuleSet‘，原因就是 *@vue/cli 高版本
1.2 新建项目
vue create -p dcloudio/uni-preset-vue my-project
这里建议选择【默认模板】，Hello uni-app模板我个人觉得有点过于臃肿，后续还得自己删页面。
如果报错：command failed: pnpm install --reporter silent --shamefully-hoist，则需要将命令改成
vue create -p dcloudio/uni-preset-vue my-project -m npm,在安装依赖时使用指定的 npm 客户端
成功运行
npm run serve
2. 引入uview-ui
旧项目用的是1.x版本，采用的是下载安装。所以我这里介绍的是下载安装方式的配置过程。
2.1 下载文件夹
下载后的uview-ui文件夹放到项目的src文件夹中即可
下载地址：ext.dcloud.net.cn/plugin?id=6…
2.2 安装
npm install uview-ui@1.8.4
注意：不支持通过cnpm安装uView！我在这里踩坑了，使用cnpm安装后，会出现一些奇怪的报错
其实官网有说明，还是得多多看官方文档啊！
2.3 安装node-sass和sass-loader
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D
2.4 引入uview-ui和css样式
// main.js
import uView from "uview-ui";
Vue.use(uView);
/* uni.scss */
@import 'uview-ui/theme.scss';
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";
</style>
// pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
成功使用组件 <u-rate/>
能引入组件后，就可以把旧项目的页面代码复制过来了。
整个过程没有几行命令，但是每一步都有坑，整理了一个开箱即用的项目模板，供参考使用源码地址
原创文章，希望对你有帮助，也为社区贡献自己的一份绵薄力量！喜欢请点赞哦~
作者：前端小小梦
主页：了解更多，点击个人主页
