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
步骤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
3)打开NodeJS的解压目录,并进入该解压目录的bin目录下,执行命令,显示版本号则表示安装成功。
cd /home/node-v10.21.0-linux-arm64/bin/
./vue -V
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包的情况,
目录下。再执行初始化
2)当前目录下会生成“testProject”目录,进入该目录,并执行启动命令。 cd testProject
npm install npm run dev
终端返回“Your application is running here: http://localhost:8080”,则表示启动成功。
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, } }
4)修改完配置文件后,重新执行命令,启动Vue。
npm run dev
启动后就可以通过IP访问,比如IP为“192.168.2.215”,在浏览器地址栏输入“http:// 192.168.2.215:8081”/即可访问,如下图所示。
3.5测试
1.进入/vue/my-projest/src/,打开App.vue
代码如下
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
}
}
测试出现如下界面