前端项目踩坑笔记

Vue项目创建流程

记录一下练习前端项目中遇到的一些问题及解决思路。

安装node环境

打开Node官网点击下载相应的版本
官网下载地址： nodejs.cn/download/

下载安装后，CMD窗口检查是否已安装成功。

node -v

搭建VUE项目环境

1 新建一个文件夹，放置vue项目代码，文件名称见名知意，以短横杠间隔起名，如learning-manager。

2 全局安装 vue-cli

yarn global add vue-cli

问题1：yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

出现该错误的原因是 Windows 操作系统无法识别 yarn 命令。这可能是由于以下原因之一：

• yarn 未正确安装。请确保 yarn 已成功安装，并位于系统的 PATH 环境变量中。
• yarn 的路径未正确配置。请确保 yarn 的路径已正确配置在系统的 PATH 环境变量中。
• yarn 的执行策略不允许执行未签名的脚本。请将 yarn 的执行策略设置为允许执行未签名的脚本。

以下是解决该错误的可能方法：

1. 确保 yarn 已正确安装。您可以使用以下命令检查 yarn 是否已安装：

yarn --version

如果 yarn 未安装，您可以使用以下命令进行安装：

npm install -g yarn

使用 yarn global bin 命令查找 Vue CLI 的执行文件路径，然后将该路径添加到系统的 PATH 环境变量中,重启系统后生效。

yarn global bin

问题2：安装cnpm配置淘宝镜像命令时候报错：

npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path D:\Program Files\nodejs\node_modules\cnpm
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, mkdir 'D:\Program Files\nodejs\node_modules\cnpm'
npm ERR! [Error: EPERM: operation not permitted, mkdir 'D:\Program Files\nodejs\node_modules\cnpm'] {
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'mkdir',
npm ERR! path: 'D:\Program Files\nodejs\node_modules\cnpm'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

解决：

使用管理员权限运行命令提示符：右键点击“开始”菜单中的“命令提示符”图标，并选择“以管理员身份运行”。然后在打开的命令提示符窗口中尝试再次运行安装 cnpm 的命令。

npm install -g cnpm --registry=https://registry.npm.taobao.org

问题3：

遇到一种情况，就是使用vue –version 查看版本始终是2.9.6，安装命令是npm install @vue/cli ,按理说是最新版本，但是还是显示旧版，使用vue create 【项目名称】 提示是要卸载脚手架在安装，但是安装后还是2.9.6.有什么解决办法吗？我收集了网上各种结论后找到了对应的方法

先说明原因

其实导致这个原因是从vue-cli 3.0版本开始原来的npm install -g vue-cli 安装的都是旧版，最高到2.9.6，安装新版必须是新的命令npm install -g @vue/cli 这就导致了，如果我们再2.9.6版本还存在的情况下再使用npm install -g @vue/cli 命令就会同时存在两个版本，你用vue create 【项目名称】命令会先找到旧版的，就会提示你卸载旧版安装新版。

解决办法

这里就说下怎么解决。其实知道原因后就可以想到个办法，就是把旧版和新版都卸载了，就不会有冲突了，然后直接安装最新版本就可以了，npm uninstall -g vue-cli 卸载旧版、 npm uninstall -g @vue/cli 卸载新版
之后安装新版，这里给大家推荐个命令 cnpm view @vue/cli versions –json，查看下新版有哪些版本，你可以根据自己的需要安装新版。

参考：https://www.cnblogs.com/caominjie/p/14800702.html

创建一个新的项目

注意：卸载重新安装Vue cli 3.0以上的版本就可以直接使用create创建项目了，不再使用init初始化。目前安装的最新版@vue/cli 5.0.8。

vue create leaning-management

切换到项目目录，并在命令行中运行启动：

cd leaning-management
npm run serve

然后在浏览器中输入：http://localhost:8080，就可以看到新创建的Vue 项目了。

修改使用 npm run dev 命令而不是 npm run serve，需要在项目的 package.json 文件中添加相应的脚本配置。

打开 package.json 文件，找到 “scripts” 部分，并添加一个 “dev” 脚本，指向您希望运行的命令。例如：

"scripts": {
  "dev": "vue-cli-service serve"
}

安装router：

cnpm install vue-router
cnpm install sass-loader

问题1：error ‘router’ is defined but never used

解决：需要在new Vue里面使用它

const app = new Vue({
  router, //这里添加使用
  render: h => h(App),
});

问题2：ERROR Cannot read properties of undefined (reading ‘install’)

这个错误可能是由于你的 Vue 版本和 vue-router 版本不匹配导致的。如果你使用的是 Vue 2，你应该安装 vue-router 3.x 版本。如果你使用的是 Vue 3，你应该安装 vue-router 4.x 版本。vue-router 默认安装的是最新版本，目前是 4.x，如果你的 Vue 版本是 2.x，那么你需要安装 vue-router 3.x 版本。你可以通过以下命令来安装对应版本的 vue-router：

npm i vue-router@3

Gitlab使用

打开本地git bash,使用如下命令生成ssh公钥和私钥对,然后一路回车

ssh-keygen -t rsa -C 'xxx@qq.com'
//检查是否已连接
ssh -T git@gitlab.com

然后打开/.ssh/id_rsa.pub文件(表示用户目录，比如我的windows就是C:\Users\Administrator)，复制其中的内容

打开gitlab,找到Profile Settings–>SSH Keys—>Add SSH Key,并把上一步中复制的内容粘贴到Key所对应的文本框，在Title对应的文本框中给这个sshkey设置一个名字，点击Add key按钮

到此就完成了gitlab配置ssh key的所有步骤，我们就可以愉快的使用ssh协议进行代码的拉取以及提交等操作了

参考：https://www.cnblogs.com/hafiz/p/8146324.html

设置全局用户和邮箱，可以使用以下命令：

git config --global user.name "用户名"
git config --global user.email "邮箱地址"

设置完成后，可以使用以下命令查看：

git config --global user.name
git config --global user.email

具体教程参考：创建GitLab项目教程

eslint使用

问题1：error Component name “Home” should always be multi-word

报错的原因：

在组件命名的时候未按照 ESLint 的官方代码规范进行命名，根据 ESLint 官方代码风格指南，除了根组件（App.vue）以外，其他自定义组件命名要使用大驼峰命名方式或者用“-”连接单词进行命名；