Arch Linux 安装vue3.0 以及用vscode打开

1.下载Node.js

(1)点击此网址：https://nodejs.org/en/

(2)如图：下载LTS版本

​

(3)下载后在Downloads目录下执行以下两部操作进行解压

​ sudo xz -d node-v14.17.4-linux-x64.tar.xz

​ sudo tar -xvf node-v14.17.4-linux-x64.tar

​ 解压后：

​

2.安装node.js

  ### (1)将上步解压好的目录移动到安装目录（我这里安装到的是/opt）

​ sudo mv node-v14.17.3-linux-x64/ /opt

(2)配置环境变量

​ sudo vim /etc/profile
复制下面两行到刚打开的profile文件最底部(注意node的安装地址/opt/node-v14.17.4-linux-x64换成自己的)：
​
#node
export NODE_HOME=/opt/node-v14.17.4-linux-x64
export PATH=$PATH:$NODE_HOME/bin

​

  保存后退出，再执行下面命令将环境变量生效：
    source /etc/profile

(3)将目录软链接到全局环境下（命令后面的/usr/local/bin/node是固定的）

         ***sudo ln -s /opt/node-v14.17.4-linux-x64/bin/node  /usr/local/bin/node***

​ sudo ln -s /opt/node-v14.17.4-linux-x64/bin/npm /usr/local/bin/npm

     ![](https://img2020.cnblogs.com/blog/2464419/202108/2464419-20210807160647542-899892945.png)

完成node.js的安装

​

这样安装好了以后使用npm安装的包(比如：ionic serve)，使用包的命令时可能会提示找不到命令，没关系，在用户目录下终端执行下面命令(固定写法)：

echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc

(4)执行以下命令

(5)输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站提升速度

输入命令npm config list 显示所有配置信息，我们关注一个配置文件

(6)

       检查一下镜像站行不行命令1
              npm config get registry

       检查一下镜像站行不行命令2
            sudo npm info vue 看看能否获得vue的信息
     ![](https://img2020.cnblogs.com/blog/2464419/202108/2464419-20210807162410016-1966273005.png)

(7)更新npm

执行 npm list -global发现不再为空

（8）在/etc/profile中添加如下变量

3.安装vue3.0

（1）命令：sudo npm install vue -g安装vue

（2）测试NPM安装vue-router

    命令：sudo npm install vue-router -g

（3）安装vue脚手架（以下任意装一个不可重复安装）

      运行sudo npm install vue-cli -g   (vue2.x脚手架)

           sudo npm install -g @vue/cli  （vue3.x脚手架）

(4)创建符号链接

​ sudo ln -s /usr/lib/node_modules/node_global/bin/vue /usr/local/bin/vue

注意：如果安装的是vue3.x的脚手架还需执行一步 sudo npm i -g @vue/cli-ini

(3)创建名为test的项目执行以下语句

​ sudo vue create test

会看到如下效果：

​

选择第二个选项

(4)创建完成后进入test文件夹

4.用vscode打开此文件

(1)在终端输入code .即可完成

至此Arch Linux下的vue3.0以搭建完成

(2)切换到test目录下执行下列操作运行

​ npm run serve

​

浏览器中访问可看到如下效果

我是一直在学习的小白同学呀！