Linux-Vue-cli安装记录

说明

• Vue-cli是Vue提供的一个脚手架（命令行工具），可以方便且快速的搭建庞大和复杂的Vue项目
• Vue-cli往往依赖包管理工具（npm）进行安装
• npm包管理工具是Nodejs提供的一个包管理工具，因此要使用npm还需要先安装Nodejs

安装

有关先前版本的警告：程序包名称从更改vue-cli为@vue/cli。如果vue-cli已全局安装了先前的（1.x或2.x）软件包，则需要先使用npm uninstall vue-cli -g或卸载它yarn global remove vue-cli。

节点版本要求：Vue CLI 4.x需要Node.js版本8.9或更高版本（建议使用v10+）。您可以使用n，nvm或nvm-windows在同一台计算机上管理多个版本的Node 。

• 安装Node.js，目的是用来安装npm

  • Node官方下载地址： https://nodejs.org/dist/，里面是所有Node.js历史版本，需要哪个版本自己选择下载即可，其中.xz格式的压缩包一般为编译好的版本，直接下载解压缩即可，Linux下墙裂建议使用该版本

  • Mac和Windows上安装比较简单，基本上一路next，就不做过多说明了

  • Linux（CentOS）下安装遇到一个问题，现在做一下记录

    • Node 官网已经把 linux 下载版本更改为已编译好的版本了，我们可以直接下载解压后使用：

    wget https://nodejs.org/dist/v10.19.0/node-v10.19.0-linux-x64.tar.xz
    tar -xvf  node-v10.19.0-linux-x64.tar.xz
    cd node-v10.19.0-linux-x64/
    ./bin/node -v
    

    • 解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接，就可以全局使用了：

    mv ./node-v10.19.0-linux-x64 /usr/local/node14
    ln -s /usr/local/node14/bin/* /usr/local/bin/ 
    node -v
    npm -v
    

    • 我的问题：

    npm -v
    /usr/local/bin/npm: line 1: ../lib/node_modules/npm/bin/npm-cli.js: No such file or directory
    

    说明：安装了好几遍，包括创建软连接、修改全局环境变量、yum安装、编译安装、切换旧版本，问题依旧，最终参照一篇帖子解决了问题，感谢大佬！ link

    • 问题原因：下载的压缩包我是在Windows下解压然后复制到Linux下使用的，是windows和linux两个文件系统不一样导致的
    • 解决方案：将压缩包传到Linux里，在Linux里tar解压缩即可。

• 注意：下面的操作如果是在Linux下执行，需要使用root用户

• 执行安装vue-cli，目前版本为3.X

npm install -g @vue/cli # 本案例试用该方法
# OR
yarn global add @vue/cli

vue --version

• 如果npm安装过慢，可以考虑使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
ln -s /usr/local/node14/bin/cnpm /usr/local/bin/    # 如果是Linux环境别忘记软连接
cnpm -v
cnpm install -g @vue/cli
ln -s /usr/local/node14/bin/vue /usr/local/bin/     # 如果是Linux环境别忘记软连接

• 如果不习惯使用cnpm命令进行操作，还想走淘宝镜像可以吗？当然可以。只需要修改npm全局配置中的镜像站点为淘宝镜像，然后依然使用npm进行操作就会走淘宝镜像

# 修改`npm`全局配置中的镜像站点为淘宝镜像：
npm config set registry https://registry.npm.taobao.org
# 查看是否设置成功：
npm config get registry

• 如果安装过程中报错：npm ERR! Maximum call stack size exceeded，说明npm版本问题，更新npm版本

npm install npm -g
# or
cnpm install npm -g

• 安装完cnpm后，Vscode中无法使用，报错：cnpm : 无法加载文件...

  • 以管理员身份运行：Wins+X，点击A，打开power shell，输入set-ExecutionPolicy RemoteSigned，输入A，问题就解决

• 如果你的版本是1.X或者2.X，可以使用以下命令进行升级

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

• 接下来开始创建和管理你的项目：使用GUI可视化图形管理工具（当然此工具需要3.X版本的vue-cli）

vue ui

GUI工具包括项目的所有管理功能，如：新建、启动、停止、域名配置、端口配置、编译压缩、lint、webpack配置、依赖、插件等

• 如果你想在3.X版本使用2.X旧版的vue init，可以使用以下命令（Linux下只能使用该传统方法了）

npm install -g @vue/cli-init
# vue init now works exactly the same as vue-cli@2.x
vue init webpack my-project
# 或者
vue create my-project

#启动
cd my-project
npm run dev

注意：vue 创建项目不支持在宿主机给虚拟机的共享目录下操作，存在symlink...问题！

注意：在Mac下创建项目时如果卡住，请注意项目所在文件件权限！