vue-cli搭建uniapp项目过程及踩坑记录

Posted 2023-02-05 Rose✿留白ق೨

首先来到uniapp官网，找到以下页面

然后就可以跟着步骤创建项目了… …下面我说下我的创建方式

第一步：全局安装vue-cli

npm install -g @vue/cli@4

第二步：创建正式版uni-app

vue create -p dcloudio/uni-preset-vue 你的项目名

第三步：选择默认模板

这个时候项目就已经创建完成了，接下来是项目首次启动过程
（ps：启动过程其实可以参考项目中的README.md文档）

第四步：初始化依赖

npm install

第五步：启动项目

npm run serve

咳咳，正常来说上面这些步骤都没什么问题。但由于我最近换了笔记本，新建项目时就遇到了很多问题。为了防止以后再一次踩坑，所以有必要记录一下。
首先是第一步vue-cli安装成功后文件不一定存放在nodejs目录下面，而是c盘用户文件下面（如：C:\\Users\\xxx\\AppData\\Roaming\\npm）
这个时候你在控制台输入

vue -V

发现居然报错，解决办法就是将vue-cli所在文件路径添加到环境变量Path当中：

添加之后就可以在控制台正常通过vue-cli脚手架去搭建项目了。

然而，搭建成功之后，在第四步项目依赖初始化这步又遇到了npm install下载缓慢的问题，解决办法是配置npm代理，方法如下：

// 配置nmp代理来提高速度，如设置淘宝镜像
npm config set registry https://registry.npm.taobao.org

// 查看配置是否成功
npm config get registry

// 成功后重新npm install安装
npm install

等待一会，项目依赖就初始化完成了，最后就可以启动项目啦！

下面这个就是启动之后的页面啦。