linux(fedora 32):安装node/vue的运行环境(node v14.15.0)

2022-02-10 21:58:09

一，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/

说明：作者:刘宏缔邮箱: 371125307@qq.com

二，安装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)