麒麟v10关闭防火墙linux命令,Vue 银河麒麟Kylin V10 B06-移植指导书

本文介绍了在银河麒麟V10操作系统中如何关闭防火墙,修改SELINUX设置,并详细阐述了Vue的移植过程,包括安装Git、Node.js,以及Vue的全局安装和项目创建。在完成配置后,通过修改Vue项目配置文件实现外部访问,并提供了简单的测试步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.软件介绍

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。此外,当与现代化的工具链以及各种支持类库结合使用时,Vue完全能够为复杂的单页应用提供驱动。

2.支持版本和获取方式

建议使用版本为“Vue-2.9”

3.编译和测试

3.1系统环境

服务器

TaiShan 2280 V2

处理器

2*KunPeng 920 4826

内存

4*16G 2933MHz

硬盘

1 * 960G SSD

网络

1 * NIC 1(TM210)

软件名称

版本号

备注

银河麒麟

V10 B06

Kernel

4.19.90-11.ky10

GCC

4.8.5

3.2系统配置

关闭防火墙

步骤1停止防火墙。# systemctl stop firewalld.service

步骤2关闭防火墙。# systemctl disable firewalld.service

修改SELINUX为disabled

步骤1关闭防火墙。

# sed -i 's/SELINUX=enforcing/SELINUX=disabled/g' /etc/sysconfig/selinux

配置本地yum源

步骤1配置源文件

#mv /etc/yum.repos.d/ /etc/yum.repos.d-bak

#mkdir /etc/yum.repos.d

#echo -e "[local]\nname=local\nbaseurl=file:///mnt\ngpgcheck=0\nenabled=1" > /etc/yum.repos.d/local.repo

步骤2执行cat确认上一步操作写入成功,显示如下图

#cat /etc/yum.repos.d/local.repo

984f3fff21c16e73b76dc60494238712.png

步骤3挂载源镜像,将系统镜像通过KVM挂载

#mount /dev/cdrom /mnt

3.3解决依赖关系

1)安装Git依赖包。

yum install git–y

2)安装“node.js”包。

Vue的安装依赖于Node.JS,因此需要先安装“node.js”包

a.下载“node.js”包。

b.解压软件包。

tar -xvf node-v10.21.0-linux-arm64.tar.xz

c.在全局路径下建立指向可执行文件“node”及“npm”的软链接,以便在任意目录下执行node及npm命令。 npm是随同NodeJS绑定安装的包管理工具

ln -s /home/node-v10.21.0-linux-arm64/bin/node /usr/local/bin/node

ln -s /home/node-v10.21.0-linux-arm64/bin/npm /usr/local/bin/npm

3.4安装Vue

1)执行安装命令。

npm install --global vue-cli

2)终端返回以下信息则表示安装结束:

+ vue-cli@2.9.6 updated 1 package in 26.817s

87465e9719958a50b47d5ca89f9e3d76.png

3)打开NodeJS的解压目录,并进入该解压目录的bin目录下,执行命令,显示版本号则表示安装成功。

cd /home/node-v10.21.0-linux-arm64/bin/

./vue -V

5dd20cb316e5f406b228d21046315553.png

4)在全局路径下创建指向Vue的软连接,以便执行Vue命令。

ln -s /home/node-v10.21.0-linux-arm64/bin/vue /usr/local/bin/vue

4.运行测试Vue (联网情况下按如下步骤编译,未联网情况下,现场移植请参考步骤5)

1)创建一个Vue项目。

“vuetestproject”为创建的项目名,可任意命名。

vue init webpack vuetestproject  (一直按回车)

按照提示输入相关参数即可,示例如下,创建成功后会返回提示信息。

Project name test  Project description A Vue.js project  Author te  Vue build standalone  Install vue-router? Yes  Use ESLint to lint your code? Yes  Pick an ESLint preset Standard  Set up unit tests Yes  Pick a test runner jest  Setup e2e tests with Nightwatch? Yes  Should we run `npm install` for you after the project has been created? (recommended) npm      vue-cli· Generated "testProject".     # Installing project dependencies ... ... # Project initialization finished! # ======================== To get started:

初始化过程中会遇到如下没有chromedriver包的情况,

2a67b0cf7c7a1c623239c8325bee052b.png

目录下。再执行初始化

19d223a206a08f76dd32f933a55da953.png

38206cbb5055fa10c4765f9e6c6dfa6c.png

2)当前目录下会生成“testProject”目录,进入该目录,并执行启动命令。 cd testProject

npm install npm run dev

终端返回“Your application is running here: http://localhost:8080”,则表示启动成功。

ba759c4ed45e7931e3fd1399c3f929fd.png

3)在默认配置情况下,Vue本地服务不能被外部IP访问,所以需要修改配置文件,修改步骤如下:

进入“testProject”目录。

.修改“config/index.js” 的“host”属性为“0.0.0.0”。

.  { .  // ..., .  host: '0.0.0.0',

port: 8080,   // ...   }

c.修改“build/webpack.dev.conf.js”的“devServer”配置,增加一行“disableHostCheck: true,”。

devServer: {   clientLogLevel: 'warning',   historyApiFallback: true,   hot: true,   compress: true,   host: HOST || config.dev.host,   port: PORT || config.dev.port,   open: config.dev.autoOpenBrowser,   overlay: config.dev.errorOverlay  ? { warnings: false, errors: true }  : false,  publicPath: config.dev.assetsPublicPath,  proxy: config.dev.proxyTable,  quiet: true, // necessary for FriendlyErrorsPlugin  disableHostCheck: true,  watchOptions: {  poll: config.dev.poll,  } }

2c61e58997c4faa7c8e59cdcd0107d82.png

4)修改完配置文件后,重新执行命令,启动Vue。

npm run dev

280ee407ad1178436c7dd49895ab2e42.png

启动后就可以通过IP访问,比如IP为“192.168.2.215”,在浏览器地址栏输入“http:// 192.168.2.215:8081”/即可访问,如下图所示。

67e76e60cd15202007a7afd43b3f4f7c.png

f3cfcc49047da95a1953ea00a9171c08.png

3.5测试

1.进入/vue/my-projest/src/,打开App.vue

代码如下

logo.png

export default {

name: 'App'

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

打开src下的components,修改HelloWorld.vue

修改为以下代码

{{ msg }}

export default {

name: 'hello',

data () {

return {

msg: 'helloword!'

}

}

}

打开App.vue

导入组件

//导入组件

import Hello from './components/HelloWorld'

export default {

name: 'app',

components: {

HelloWorld

}

}

测试出现如下界面

14246cb240c908cc01989c3975cda63d.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值