linux(fedora 32):安裝node/vue的運行環境(node v14.15.0)

一，node的下載和解壓：

官網：

https://nodejs.org/en/

下載:

[root@localhost ~]# cd /usr/local/source/ 
[root@localhost source]# wget https://nodejs.org/dist/v14.15.0/node-v14.15.0-linux-x64.tar.xz

 解壓：

[root@localhost source]# xz -d node-v14.15.0-linux-x64.tar.xz 
[root@localhost source]# tar -xvf node-v14.15.0-linux-x64.tar 

 

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/

說明：作者:劉宏締 郵箱: [e-mail]

 

二，安裝node

1,移動到安裝目錄:

[root@localhost source]# mv node-v14.15.0-linux-x64 /usr/local/soft/

 

2,創建符號鏈接:

[root@localhost ~]# ln -s /usr/local/soft/node-v14.15.0-linux-x64/bin/node /usr/local/bin/node
[root@localhost ~]# ln -s /usr/local/soft/node-v14.15.0-linux-x64/bin/npm /usr/local/bin/npm

 

3,測試命令是否可以訪問:

[root@localhost ~]# node -v
v14.15.0
[root@localhost ~]# npm -v
6.14.8

 

三，安裝cnpm

1，安裝cnpm

[root@localhost ~]# npm install -g cnpm --registry=https://registry.npm.taobao.org 

 

2,創建符號鏈接,以方便訪問

[root@localhost ~]# ln -s /usr/local/soft/node-v14.15.0-linux-x64/bin/cnpm /usr/local/bin/cnpm

 

3,測試cnpm命令是否可以訪問:

[root@localhost ~]# cnpm -v
cnpm@6.1.1 (/usr/local/soft/node-v14.15.0-linux-x64/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.8 (/usr/local/soft/node-v14.15.0-linux-x64/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@14.15.0 (/usr/local/soft/node-v14.15.0-linux-x64/bin/node)
npminstall@3.28.0 (/usr/local/soft/node-v14.15.0-linux-x64/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local/soft/node-v14.15.0-linux-x64 
linux x64 5.8.16-200.fc32.x86_64 
registry=https://r.npm.taobao.org

 

四，安裝vue-cli

1,安裝vue-cli

[root@localhost ~]# cnpm install -g vue-cli

 

2,創建符號鏈接

[root@localhost ~]# ln -s /usr/local/soft/node-v14.15.0-linux-x64/bin/vue /usr/local/bin/vue

 

3,測試命令是否可用:

[root@localhost ~]# vue -V
2.9.6

 

五，dnf安裝git

[root@localhost vue]# dnf install git

說明:vue init webpack 項目時會用到git

 

六，測試創建一個vue項目:

1,用cnpm安裝webpack:

[root@localhost vue]# cnpm install --save-dev webpack 

 

2,用vue創建一個項目:

[root@localhost test]# cd /data/vue
[root@localhost vue]# vue init webpack test1

創建時各個選項我們用最簡化的方式：

[root@localhost vue]# vue init webpack test1         

? Project name test1
? Project description A Vue.js project
? Author lhd
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "test1".


# Installing project dependencies ...

 

3,用npm運行項目

[root@localhost vue]# cd test1
[root@localhost test1]# npm run dev

> test1@1.0.0 dev /data/vue/test1
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 25/29 modules 4 active ...e&index=0!/data/vue/test1/src/App.vue{ parser: "babylon" } is deprecated; 
    we now treat it as { parser: "babel" }.
 95% emitting                                                                        

 DONE  Compiled successfully in 2755ms                                                                                            上午7:59:38

 I  Your application is running here: http://localhost:8080

 

4，從瀏覽器中查看效果：

 

 

七，查看linux的版本:

[root@localhost ~]# cat /etc/redhat-release 
Fedora release 32 (Thirty Two)