linux(fedora 32):安装node/vue的运行环境(node v14.15.0)
<h2>一，node的下载和解压：</h2><p>官网：</p>
<div class="cnblogs_code">
<pre>https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">nodejs.org/en/</span></pre>
</div>
<p>下载:</p>
<div class="cnblogs_code">
<pre># cd /usr/local/source/<span style="color: rgba(0, 0, 0, 1)">
# wget https:</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">nodejs.org/dist/v14.15.0/node-v14.15.0-linux-x64.tar.xz</span></pre>
</div>
<p> 解压：</p>
<div class="cnblogs_code">
<pre># xz -d node-v14.15.0-linux-<span style="color: rgba(0, 0, 0, 1)">x64.tar.xz
# tar </span>-xvf node-v14.15.0-linux-x64.tar </pre>
</div>
<p> </p>
<p>说明：刘宏缔的架构森林是一个专注架构的博客，</p>
<p>网站：https://blog.imgtouch.com<br>本文: https://blog.imgtouch.com/index.php/2023/05/26/linux-fedora-32-an-zhuang-node-vue-de-yun-xing-huan-jing/</p>
<p> 对应的源码可以访问这里获取： https://github.com/liuhongdi/</p>
<p>说明：作者:刘宏缔 邮箱: 371125307@qq.com</p>
<p> </p>
<h2>二，安装node</h2>
<p>1,移动到安装目录:</p>
<div class="cnblogs_code">
<pre># mv node-v14.15.0-linux-x64 /usr/local/soft/</pre>
</div>
<p> </p>
<p>2,创建符号链接:</p>
<div class="cnblogs_code">
<pre># ln -s /usr/local/soft/node-v14.15.0-linux-x64/bin/node /usr/local/bin/<span style="color: rgba(0, 0, 0, 1)">node
# ln -s /usr/local/soft/node-v14.15.0-linux-x64/bin/npm /usr/local/bin/npm</pre>
</div>
<p> </p>
<p>3,测试命令是否可以访问:</p>
<div class="cnblogs_code">
<pre># node -<span style="color: rgba(0, 0, 0, 1)">v
v14.</span>15.0<span style="color: rgba(0, 0, 0, 1)">
# npm -<span style="color: rgba(0, 0, 0, 1)">v
</span>6.14.8</pre>
</div>
<p> </p>
<h2>三，安装cnpm</h2>
<p>1，安装cnpm</p>
<div class="cnblogs_code">
<pre># npm install -g cnpm --registry=https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">registry.npm.taobao.org </span></pre>
</div>
<p> </p>
<p>2,创建符号链接,以方便访问</p>
<div class="cnblogs_code">
<pre># ln -s /usr/local/soft/node-v14.15.0-linux-x64/bin/cnpm /usr/local/bin/cnpm</pre>
</div>
<p> </p>
<p>3,测试cnpm命令是否可以访问:</p>
<div class="cnblogs_code">
<pre># cnpm -<span style="color: rgba(0, 0, 0, 1)">v
cnpm@</span>6.1.1 (/usr/local/soft/node-v14.15.0-linux-x64/lib/node_modules/cnpm/lib/<span style="color: rgba(0, 0, 0, 1)">parse_argv.js)
npm@</span>6.14.8 (/usr/local/soft/node-v14.15.0-linux-x64/lib/node_modules/cnpm/node_modules/npm/lib/<span style="color: rgba(0, 0, 0, 1)">npm.js)
node@</span>14.15.0 (/usr/local/soft/node-v14.15.0-linux-x64/bin/<span style="color: rgba(0, 0, 0, 1)">node)
npminstall@</span>3.28.0 (/usr/local/soft/node-v14.15.0-linux-x64/lib/node_modules/cnpm/node_modules/npminstall/lib/<span style="color: rgba(0, 0, 0, 1)">index.js)
prefix</span>=/usr/local/soft/node-v14.15.0-linux-<span style="color: rgba(0, 0, 0, 1)">x64
linux x64 </span>5.8.16-200<span style="color: rgba(0, 0, 0, 1)">.fc32.x86_64
registry</span>=https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">r.npm.taobao.org</span></pre>
</div>
<p> </p>
<h2>四，安装vue-cli</h2>
<p>1,安装vue-cli</p>
<div class="cnblogs_code">
<pre># cnpm <span style="color: rgba(0, 0, 255, 1)">install</span> -g vue-cli</pre>
</div>
<p> </p>
<p>2,创建符号链接</p>
<div class="cnblogs_code">
<pre># <span style="color: rgba(0, 0, 255, 1)">ln</span> -s /usr/local/soft/node-v14.<span style="color: rgba(128, 0, 128, 1)">15.0</span>-linux-x64/bin/vue /usr/local/bin/vue</pre>
</div>
<p> </p>
<p>3,测试命令是否可用:</p>
<div class="cnblogs_code">
<pre># vue -<span style="color: rgba(0, 0, 0, 1)">V
</span><span style="color: rgba(128, 0, 128, 1)">2.9</span>.<span style="color: rgba(128, 0, 128, 1)">6</span></pre>
</div>
<p> </p>
<h2>五，dnf安装git</h2>
<div class="cnblogs_code">
<pre># dnf <span style="color: rgba(0, 0, 255, 1)">install</span> git</pre>
</div>
<p>说明:vue init webpack 项目时会用到git</p>
<p> </p>
<h2>六，测试创建一个vue项目:</h2>
<p>1,用cnpm安装webpack:</p>
<div class="cnblogs_code">
<pre># cnpm <span style="color: rgba(0, 0, 255, 1)">install</span> --save-dev webpack </pre>
</div>
<p> </p>
<p>2,用vue创建一个项目:</p>
<div class="cnblogs_code">
<pre># cd /data/<span style="color: rgba(0, 0, 0, 1)">vue
# vue init webpack test1</span></pre>
</div>
<p>创建时各个选项我们用最简化的方式：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"># vue init webpack test1
</span>?<span style="color: rgba(0, 0, 0, 1)"> Project name test1
</span>?<span style="color: rgba(0, 0, 0, 1)"> Project description A Vue.js project
</span>?<span style="color: rgba(0, 0, 0, 1)"> Author lhd
</span>?<span style="color: rgba(0, 0, 0, 1)"> Vue build standalone
</span>? Install vue-router?<span style="color: rgba(0, 0, 0, 1)"> No
</span>? Use ESLint to lint your code?<span style="color: rgba(0, 0, 0, 1)"> No
</span>?<span style="color: rgba(0, 0, 0, 1)"> Set up unit tests No
</span>? Setup e2e tests with Nightwatch?<span style="color: rgba(0, 0, 0, 1)"> No
</span>? Should we run `npm <span style="color: rgba(0, 0, 255, 1)">install</span>` <span style="color: rgba(0, 0, 255, 1)">for</span> you after the project has been created?<span style="color: rgba(0, 0, 0, 1)"> (recommended) npm
vue</span>-cli · Generated <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">test1</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">.
# Installing project dependencies ...</span></pre>
</div>
<p> </p>
<p>3,用npm运行项目</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"># cd test1
# npm run dev
</span>> test1@<span style="color: rgba(128, 0, 128, 1)">1.0</span>.<span style="color: rgba(128, 0, 128, 1)">0</span> dev /data/vue/<span style="color: rgba(0, 0, 0, 1)">test1
</span>> webpack-dev-server --inline --progress --config build/<span style="color: rgba(0, 0, 0, 1)">webpack.dev.conf.js
</span><span style="color: rgba(128, 0, 128, 1)">13</span>% building modules <span style="color: rgba(128, 0, 128, 1)">25</span>/<span style="color: rgba(128, 0, 128, 1)">29</span> modules <span style="color: rgba(128, 0, 128, 1)">4</span> active ...e&index=<span style="color: rgba(128, 0, 128, 1)">0</span>!/data/vue/test1/src/App.vue{ parser: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">babylon</span><span style="color: rgba(128, 0, 0, 1)">"</span> } is deprecated; <br> we now treat it as { parser: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">babel</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)"> }.
</span><span style="color: rgba(128, 0, 128, 1)">95</span>%<span style="color: rgba(0, 0, 0, 1)"> emitting
DONECompiled successfully </span><span style="color: rgba(0, 0, 255, 1)">in</span> 2755ms 上午7:<span style="color: rgba(128, 0, 128, 1)">59</span>:<span style="color: rgba(128, 0, 128, 1)">38</span><span style="color: rgba(0, 0, 0, 1)">
IYour application is running here: http:</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">localhost:8080</span></pre>
</div>
<p> </p>
<p>4，从浏览器中查看效果：</p>
<p> <img src="https://img2020.cnblogs.com/blog/1938691/202011/1938691-20201101080900825-876456121.png"></p>
<p> </p>
<h2>七，查看linux的版本:</h2>
<div class="cnblogs_code">
<pre># <span style="color: rgba(0, 0, 255, 1)">cat</span> /etc/redhat-<span style="color: rgba(0, 0, 0, 1)">release
Fedora release </span><span style="color: rgba(128, 0, 128, 1)">32</span> (Thirty Two)</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/architectforest/p/13907390.html
頁:
[1]