由vue3引起的一段值得记录经历

我的习惯，没有那么多的背景介绍，也不愿意去查赘述技术点的起源、发展和未来之类的，就是遇到了值得记录的问题时，记录一下。想要了解技术或者框架发展史的，请见其官网。（PS：开始总得有个开场白过渡一下，哈哈哈。下面开始吧）

1.vue是什么？
两天前，我也不知道vue是干什么的，但很早以前听朋友说过一次（反正是前端用的），我一个专注后端的前端对我来说，会改就行。但我也不知道为什么就突然想试玩一下，由于现在的项目更偏向于前后端分离，所以搜索google前后端分离，就有vue跳了出来（算是第二次见闻）。所以简单说就是做前端的。可能类似的还有很多，我也不清楚。想知道可以google“类似于vue的还有什么”。

2.vue怎么用？
关于所有技术框架或者项目组建之类的东西，怎么用都只有三个办法:
1.官网文档或者git文档（这种方式一般都是基础的知识点，跟实际应用还是有点出入的）
2.有人教（从学校出来，基本告别了该模式学习方式，除非遇到贵人）
3.找资料自己干（这种方式会很糟心，且比较靠天赋或者是学习其他技术给你的经验）
我呢，没那么好的运气遇到贵人，所以就只剩下其他两种办法一起上了。
回到问题，大概看一下官网（https://vue3js.cn）文档，跟着做一下，遇到问题再google，基本上就是这么用的。

书写倒到这里引出了这篇文章的核心内容：搭建vue3的环境以及其他（PS其实这才应该是标题，但总是要有些开场白过渡一下的嘛，哈哈哈）

根据官网上的提示，我理解为有两种（一种是CDN，其实就是用标签引用，然后就跟引其他js一样玩；第二种是利用NPM安装一个本地的环境以及一些模组和工具，然后利用工具直接创建一个Vue的项目）。这里为什么我说我理解的呢，是因为中英文的文档是有些出入，中文文档直接说明有三种方式，英文文档没有说几种方式，而是相关安装的内容包括一些相关工具的安装，统一在“安装”介绍里面，所以玩开发尽量还是看英文文档，不要觉得这个是中国人开发的，因为它面向的是全球，所以英文文档诠释的一定有过之而无不及。CDN的方式没什么好说的，因为如果要开发Vue项目，第二种方式是必不可少的。

可能是因为很久没更新了，不知不觉说了这么多作用不大的话。就当是你陪我一起度过我前两天的经历吧。下面直接来避坑步骤吧，你开不开心？

1.npm安装vue，需要先安装npm，也就是nodejs，顺便说一下这两个的关系，nodejs其实是一个js的运行环境，因为它封装了google v8引擎，也就是chrome浏览器的内核之一，之前用C#写浏览器的时候CefSharp和WebKit也有这个，所以才能渲染页面（又扯远了，拉回来），npm是包管理器，就是专门管理为nodejs开发包的版本管理器。总之我们必须先安装nodejs。

坑1：nodejs本身也有很多个版本，而且有些包仅对特定版本范围内的可用，所以不要安装最新的，我开始就安装的最新的，导致后面一部分依赖包下载不下来

解决方案：1.建议选择距离目前版本最近的一次长期支持的版本也就是LTS版本，如果当前版本是LTS版本，则选上一个LTS版本。反正不要选最新的。
2.可是安装多版本（两种方式：一种是使用nvm做版本控制，另一种是使用nodejs的n模块）顺便说一下两种的区别：nvm独立于node，n基于node，据说（本人未测试）在nvm之前安装的node，nvm不能管理，但n不受影响。指令也不同，这个随便一搜就找到了，我就不写了。

我是两种都试了一下，后来还是选择了nvm。所以又有坑了

坑2:如何删除已经安装的nodejs
参考https://blog.csdn.net/shiquanqq/article/details/78032943
如果是homebrew安装的使用：brew uninstall node删除
如果是官方离线安装包：sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

坑3:安装nvm
安装nvm需要安装git，确保自己电脑已经安装了git
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
或者
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

过程可能有点慢，注意输出日志

想知道安装成功没有，如果安装过程中没有出错，那么新开一个终端，检查~/.profile, ~/.bash_profile, ~/.zshrc, ~/.bashrc文件，如果有且文件中有关于nvm的配置，那么那个文件有，就在配置后面粘贴
# node镜像
export NVM_NODEJS_ORG_MIRROR="https://npm.taobao.org/mirrors/node"
# npm镜像
export NPM_CONFIG_REGISTRY="https://registry.npm.taobao.org"
保存，然后source该个文件，然贴的内容为国内的淘宝镜像，因为不使用镜像，极大程度安装nodejs不成功，因为我试了十几次没一次成功。
关于nvm的基本使用：
nvm install <version> ## 安装指定版本，可模糊安装，如：安装v4.4.0，既可nvm install v4.4.0，又可nvm install 4.4
nvm uninstall <version> ## 删除已安装的指定版本，语法与install类似
nvm use <version> ## 切换使用指定的版本node
nvm ls ## 列出所有安装的版本
nvm ls-remote ## 列出所以远程服务器的版本（官方node version list）
nvm current ## 显示当前的版本
nvm alias <name> <version> ## 给不同的版本号添加别名
nvm unalias <name> ## 删除已定义的别名
nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包

坑4:如何删除nvm
1.cd ~
2.rm -rf .nvm
3。 检查~/.profile, ~/.bash_profile, ~/.zshrc, ~/.bashrc文件中关于nvm的配置，有则删除相关配置

到此默认你的node安装好了。接着踩坑。。。

坑5: 其实就是坑3中的镜像问题，恭喜你应该成功避坑，我就惨了，当时试了十几次

坑6:安装这篇文章的主角vue：
npm install -g @vue/cli //安装Vuejs3的
npm install -g vue-cli //安装Vuejs2的
注意区别，别安装错了

如果坑6之前都按照我说的没有出现问题，那么坑6一般不会有问题的，那么问题来了，说好的安装vue环境，怎么坑6安装的是@vue/cli，这里多说一下，vue和vue/cli的关系，我们可以理解为vue是一种调用规则环境，而cli是方便创建使用这种规则的项目的工具。所以vuejs的版本和vue/cli的版本不是一个，node和npm与这相同。

那现在就创建项目开始吧！！！

开发项目我们通常会是IDE工具，我用的是webstorm，别的我不太清楚，但是这里又有坑了

坑7:webstrom2021.1（目前最新版）惊奇的发现即使没有以上的所有操作，你依然能创建vue项目，因为它会自己下载一个vue版本供你使用，当时我可能还没有踩到第六个坑，所以我我觉得我之前踩的坑都白踩了，这才打开新世界的大门，果然ide能帮助开发者节省很多不必要的事情，但是万万没想到呀，这才是个坑中坑，巨坑。我创建好了项目，开始梳理项目结构，和一些文件的意义，开始试着写代码了，发现一些前端的UI框架没法依赖，为什么呢？因为它更新以来是用nmp install指令更新啊，我当时都崩溃了。。。。。。。

坑7.1 使用CLI 创建vue项目说明（我的版本 vue -V ———— CLI v4.5.12）
1.vue create <项目名称> #常规名称，不要乱搞，可能很多字符不支持，具体查文档，我不是调皮的孩子
? Please pick a preset: (Use arrow keys) ## 选择一种预设
❯ Default ([Vue 2] babel, eslint) ## 默认语言环境2 安装的组建只有babel, eslint（直接完成）
Default (Vue 3 Preview) ([Vue 3] babel, eslint) ## 默认语言环境3 安装的组建只有babel, eslint（直接完成）
Manually select features ## 我要自己选 （跳到下一个）

? Please pick a preset: Manually select features ## 选择要安装的组件
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Choose Vue version ## 选择vue的语言特征版本
◉ babel ##把高版本js语言翻译成低版本js语言，因为有些浏览器可能不支持高版本语言的语言特性，通常都需要安装这个
◯ TypeScript ##支持TypeScript，微软弄的，用就选，不用就不选
◯ Progressive Web App (PWA) Support ##支持渐进式web应用 用就选，不用就不选
◯ Router ##路由，一般都要选
◯ Vuex ##为了优化响应用来存一些值供全局使用，免得来回传递，感觉项目大了就加，不想加就不要了
◯ CSS Pre-processors ##css预处理，可以使用sass或者lass等样式规则代替原本的css书写规则，感觉挺有用的，
◉ Linter / Formatter ##错误提示模块，让你规规矩矩的写代码，代码更规范，也能提示错误，挺不错的
◯ Unit Testing ##单元测试
◯ E2E Testing ##测试驱动，可以在请求时拦截请求，独立于后端借口开发

后面的剧根据自己需求去选了，值得注意的是，Router对应的选项，是否使用历史模式路由。如果不使用则是hash模式的路由。简单来说就是url中有没有#，深了就自己去查，说起来也就是浏览器指令，什么时候刷新页面之类的，有点繁杂。

坑7.2(恭喜你成功避坑)
1.使用webstrom的时候，一定要选择自己本地的node环境，这样才能安装依赖（或许原本也可以，我不会也没找到）
2.在创建时，把使用默认预设勾选掉，就会进入坑7.1的流程
总是感觉wb还需对vue开发完善功能，目前不是很友好，不能像pycharm很好的支持虚拟隔离的node环境，也不能像idea那样对spring 项目开发的流程话选择，除了界面一样，可能wb的开发人员把vue还没有吃透吧，毕竟vue3刚出没多久，项目少的可怜，很多教程都是打着vue3的旗号，创建vue2的项目。

 

坑7.3（恭喜你，成功避坑）
如果之前自己安装的nodejs版本太高，这里安装css预处理，会需要sass-loader和node-sass，如果版本太高，这两个会和webpack模块的版本不兼容，就会出错。这里我踩坑两三次，可以去查对应的版本（https://github.com/sass/node-sass）

基本上踩坑完毕，看了一下写的好长，估计很少有人看到这里，其中的一些详细步骤，以后有时间再出吧，没时间就。。。。顺便提一句，目前支持vue3的前端UI框架少的可怜。
如果你耐心看完了，那么估计剩下的就是写代码了。花了两天的时间，从听说过vue到写完文章就去写代码，花了两个小时左右的时间整理这篇文章，希望你能从之前的状态到看完文章后就很顺利的弄完环境去写代码。

突然想起来，还有一点内容没是关于项目文件结构的说明，但是...已经凌晨六点半了，下次再说吧。。。