1. 程式人生 > 其它 >ubuntu21.04(linux):安裝node(14.17.1)和vue.js3.1環境

ubuntu21.04(linux):安裝node(14.17.1)和vue.js3.1環境

一,下載node:

訪問:
https://nodejs.org/en/
如圖: 我們選擇lts版本下載
liuhongdi@lhdpc:/usr/local/source$ wget https://nodejs.org/dist/v14.17.1/node-v14.17.1-linux-x64.tar.xz
解壓:
liuhongdi@lhdpc:/usr/local/source$ xz -d node-v14.17.1-linux-x64.tar.xz
liuhongdi@lhdpc:/usr/local/source$ tar -xvf node-v14.17.1-linux-x64.tar

說明:劉巨集締的架構森林是一個專注架構的部落格,地址:

https://www.cnblogs.com/architectforest

對應的原始碼可以訪問這裡獲取:https://github.com/liuhongdi/

說明:作者:劉巨集締 郵箱: [email protected]

二,安裝node

移動到軟體安裝目錄
liuhongdi@lhdpc:/usr/local/source$ mv node-v14.17.1-linux-x64 /usr/local/soft/
建立符號連結:
root@lhdpc:~# ln -s /usr/local/soft/node-v14.17.1-linux-x64/bin/node /usr/local/bin/node
root@lhdpc:
~# ln -s /usr/local/soft/node-v14.17.1-linux-x64/bin/npm /usr/local/bin/npm
檢視效果:
liuhongdi@lhdpc:/usr/local/source$ node -v
v14.17.1
liuhongdi@lhdpc:/usr/local/source$ npm -v
6.14.13

三,安裝cnpm

安裝
liuhongdi@lhdpc:/usr/local/source$ npm install -g cnpm --registry=https://registry.npm.taobao.org
建立符號連結
root@lhdpc:~# ln
-s /usr/local/soft/node-v14.17.1-linux-x64/bin/cnpm /usr/local/bin/cnpm
測試效果
root@lhdpc:~# cnpm -v
cnpm@6.2.0 (/usr/local/soft/node-v14.17.1-linux-x64/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.13 (/usr/local/soft/node-v14.17.1-linux-x64/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@14.17.1 (/usr/local/soft/node-v14.17.1-linux-x64/bin/node)
npminstall@3.28.0 (/usr/local/soft/node-v14.17.1-linux-x64/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local/soft/node-v14.17.1-linux-x64
linux x64 5.11.0-18-generic
registry=https://registry.nlark.com

四,安裝vue-cli

安裝
liuhongdi@lhdpc:/usr/local/source$ npm install -g @vue/cli
建立符號連結
root@lhdpc:~# ln -s /usr/local/soft/node-v14.17.1-linux-x64/bin/vue /usr/local/bin/vue
檢視檔案
root@lhdpc:~# whereis vue
vue: /usr/local/bin/vue
檢視版本
root@lhdpc:~# vue -V
@vue/cli 4.5.13

五,建立一個vue.js專案:

建立專案vuedemo1
liuhongdi@lhdpc:/data/vue$ vue create vuedemo1
如圖: 選擇vue3後回車 按照提示進行操作:
liuhongdi@lhdpc:/data/vue$ cd vuedemo1/
liuhongdi@lhdpc:/data/vue/vuedemo1$ npm run serve
檢視vue.js的版本:
liuhongdi@lhdpc:/data/vue/vuedemo1$ npm list vue
vuedemo1@0.1.0 /data/vue/vuedemo1
└── vue@3.1.1
通過瀏覽器檢視專案效果

六,檢視linux版本:

liuhongdi@lhdpc:/data/vue/vuedemo1$ cat /etc/os-release
NAME="Ubuntu"
VERSION="21.04 (Hirsute Hippo)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 21.04"
VERSION_ID="21.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=hirsute
UBUNTU_CODENAME=hirsute