Vue
Vue是一套用于构建用户界面的渐进式框架
开发语言:JavaScript

软件介绍

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

支持的操作系统

经过华为云严格实测,以下操作系统在鲲鹏生态中可以完整运行Vue的全部功能:

l   CentOS 7.5

l   EulerOS 2.8

支持版本和获取方式

l   建议使用版本为“Vue-2.9

编译和测试

1.      选择操作环境

本文选用华为鲲鹏云服务ECS KC1实例做测试,详细配置如下:

类别

子项

版本

云服务器配置

ECS实例类型

kc1.xlarge.4

ECS配置

4U16GB

EVS

IO(40GB)*2

OS

CentOS

7.5

Kernel

4.14.0-49

2.      解决依赖关系

1)     安装Git依赖包。

yum install git y

2)     安装“node.js”包。

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

a.         下载“node.js”包。

wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-arm64.tar.xz

b.         解压软件包。

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

c.         在全局路径下建立指向可执行文件“node”及“npm”的软链接,以便在任意目录下执行nodenpm命令。

1.     npm随同NodeJS绑定安装的包管理工具

ln -s /root/node-v10.16.0-linux-arm64/bin/node /usr/local/bin/node

ln -s /root/node-v10.16.0-linux-arm64/bin/npm /usr/local/bin/npm

3.      安装Vue

1)     执行安装命令。

npm install --global vue-cli

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

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

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

cd /root/node-v10.16.0-linux-arm64/bin/

./vue -V

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

 ln -s /root/node-v10.16.0-linux-arm64/bin/vue /usr/local/bin/vue

4.      运行测试Vue

1)     创建一个Vue项目。

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

vue init webpack testProject

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

? 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:
cd testProject
npm run dev

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

npm run dev

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

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

a.         进入“testProject”目录。

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

1.  {
2.  // ...,
3.  host: '0.0.0.0',
4.  port: 8080,
5.  // ...
6.  }

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

1.  devServer: {
2.  clientLogLevel: 'warning',
3.  historyApiFallback: true,
4.  hot: true,
5.  compress: true,
6.  host: HOST || config.dev.host,
7.  port: PORT || config.dev.port,
8.  open: config.dev.autoOpenBrowser,
9.  overlay: config.dev.errorOverlay
10. ? { warnings: false, errors: true }
11. : false,
12. publicPath: config.dev.assetsPublicPath,
13. proxy: config.dev.proxyTable,
14. quiet: true, // necessary for FriendlyErrorsPlugin
15. disableHostCheck: true,
16. watchOptions: {
17. poll: config.dev.poll,
18. }
}

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

npm run dev

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