ubuntu下vue项目构建工具安装小笔记

总流程：

 nvm-->-->yarn-->vue

一、安装nvm，若有之前有安装则需要先卸掉，再重新安装

1. 卸载:

1.先卸载npm

sudo npm uninstall npm -g

2.卸载node

yum remove nodejs npm -y

3. 确认删除：

sudo apt-get remove nodejs

看看是否有残留

进入 /usr/local/lib 删除所有 node 和 node_modules文件夹

进入 /usr/local/include 删除所有 node 和 node_modules 文件夹

进入 /usr/local/bin 删除 node 的可执行文件

安装：(新node版本是带有npm)

2、安装

cd ~/Downloads
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
# 安装过程中，因为国外服务器的原因，所以如果失败就执行多几次吧。目前没有别的办法。
# 安装成功以后，关闭当前终端，重新打开就可以使用了。

#若自动安装失败，尝试使用git：
1、克隆到本地：git clone https://gitee.com/mirrors/nvm 本地地址
2、bash install.sh # 注意：进入nvm目录内执行
3、再执行三句语句：
    export NVM_DIR="/home/morton/.nvm" #具体由本地地址决定
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
完毕！

安装完成之后自带node

注意事项：

一、node、nvm、npm、npx、nrm 区别

• node：是一个基于 Chrome V8 引擎的 JS 运行环境。

• npm：是 node.js 默认的包管理系统（用 JavaScript 编写的），在安装的 node 的时候，npm 也会跟着一起安装，管理 node 中的第三方插件。

• npx：npm 从 v5.2.0 开始新增了 npx 命令，>= 该版本会自动安装 npx，附带：npx 有什么作用跟意义？为什么要有 npx？什么场景使用？。

• nrm：是一个 npm 源管理工具，使用它可以快速切换 npm 源，默认是官方源，当 npm 下载包过慢时，可能需要切换到第三方源（例如：淘宝、科大...），还有公司私有源地址等等。

• nvm：node 版本管理器，也就是说：一个 nvm 可以管理多个 node 版本（包含 npm 与 npx），可以方便快捷的 安装、切换 不同版本的 node。

二、node、nvm、npm、npx、nrm 关系

• nvm 管理 node (包含 npm 与 npx) 的版本，npm 可以管理 node 的第三方插件，nrm 可以管理 npm 的源地址（当然也可以直接使用 npm 自带命令管理，看个人习惯）。

• 切换不同的 node 版本，npm 与 npx 的版本也会跟着变化。

  $ nvm use v8.16.0
  Now using node v8.16.0 (npm v6.4.1)
  
  $ nvm use v14.15.4
  Now using node v14.15.4 (npm v6.14.10)
  
  $ nvm use v18.6.0
  Now using node v18.6.0 (npm v8.13.2)

二、安装vue：

可以使用npm 或 yarn安装vue-cli 项目构建工具

npm install -g @vue/cli
# yarn global add @vue/cli  # 注意，安装不成功就换成npm
​
# 安装完成以后，可以通过以下命令查看vue/cli的版本
vue -V
# 4.5.13

如果安装速度过慢，一直超时，可以考虑切换国内npm镜像源：npmmirror 镜像站

三、使用vue-cli创建项目

6.5.1 生成vue项目

使用vue-cli自动化工具可以快速搭建单页应用项目目录。

该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。安装过程：

# vue create 项目目录名   # 会自动创建一个目录用于保存项目的。
cd ~/Desktop
vue create myproject

6.5.1.1 默认安装

第一个选择安装配置，此处我们选择中间的（通过键盘上下键按钮移动），回车键：

 

第二个，选择包管理器。默认选择了Yarn，所以我们直接回车即可。

 

安装过程因为需要联网，所以如果出现网络安装失败，则重新安装多次。（4-5遍）

安装成功以后，效果如下：

 

跟着官方提示，输入命令。

 

 

打开蓝色链接地址，访问项目，http://localhost:8080：

6.5.1.2 自定义安装

cd ~/Desktop
vue create myproject2

第一，选择安装配置，最后一项就是选择自定义安装。回车。

 

第二，选择项目依赖文件。空格表示选择/取消选择。选择完成以后，回车。

 

 

第三，根据上面的配置，选择vue版本为3.0版本。

第四，选择路由Router的路由模式，问我们是否使用历史状态管理模型，就是路由没有#号。

第五，选择配置EsLint的配置项。

第六，ESLint格式化的时机。空格把2个都勾选上就行了。

 

第七，EsLint和Babel的配置是否保存一块，选择第二个选项。

 

第八，是否保存上面的一系列操作作为以后项目的安装配置。

 

 

后续的安装过程，和上面的选择的默认安装流程一致了。

使用vue：

cd myproject
yarn serve