WEB应用服务 — Element UI

支持的操作系统

经过华为云严格实测，CentOS 7.5在鲲鹏生态中可以完整运行Element UI的全部功能。

支持版本和获取方式

l   建议使用版本为“2.0.0-rc.1”

l   由npm工具获取，命令为：npm i element-ui@next -D

编译和测试方式

1.      选择操作环境

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

2.      配置编译环境

步骤一：安装Element UI的依赖nodejs和npm

1)     Element UI依赖于nodejs和npm，因此先安装nodejs和npm。

cd /usr/local/src

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

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

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

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

2)     查看nodejs和npm的版本号，确保nodejs和npm安装成功。

node -v

回显信息如下，表示nodejs安装成功。

v10.16.0

npm -v

回显信息如下，表示npm安装成功。

6.9.0

步骤二：安装Element UI的依赖Vue

1)     确认完nodejs和npm安装好后开始安装Vue脚手架工具。

npm install -g vue-cli

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

2)     安装完成后确认Vue是否安装成功。

vue

回显信息如下，则表示Vue安装成功。

Usage: vue <command> [options]
 
Options:
  -V, --version  output the version number
  -h, --help     output usage information
 
Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

步骤三：创建Vue项目

1)     创建一个Vue项目。

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”目录，进入该目录，并执行启动命令。

cd 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

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

步骤四：安装element-ui到项目下

1)     在步骤三：创建Vue项目的项目“testProject”中，安装element-ui。

cd /usr/local/src/testProject

npm i element-ui@next -D

2)     查看Element UI的版本号。

安装成功后，会在“/usr/local/src/testProject/node_modules”路径下生成“element-ui”文件夹。

进入该文件夹，在“package.json”文件中可查看element UI的版本号。

vi /usr/local/src/testProject/node_modules/element-ui/package.json

查找“version”内容，可查到以下版本信息。

  "style": "lib/theme-chalk/index.css",
  "typings": "types/index.d.ts",
  "unpkg": "lib/index.js",
  "version": "2.0.0-rc.1"
}

3.      测试已完成编译的软件

通过查看浏览器中的改动是否与编辑的一致，以此验证Element UI是否能正常使用。

1)     进入项目，编辑“src”路径下的“App.vue”文件，其他文件不变。

vi /usr/local/src/testProject/src/App.vue

在原始文件上添加文本内容，如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <div class="block">
    <span class="demonstration">start your element UI</span>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#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;
}
</style>

2)     刷新浏览器页面，显示信息中最后一行增加文本“start your element UI”，则表示Element UI可正常使用

已知问题汇总

问题描述：

在4.3 测试已完成编译的软件中创建Vue项目时，下载chromedriver时出现异常，如下所示：

# Installing project dependencies ...
# ========================
 
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-ext
ract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket da
ta flow and an import issue introduced in 2.1.0
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
 
> chromedriver@2.46.0 install /usr/local/src/testProject/node_modules/chromedriver
> node install.js
 
/usr/local/src/testProject/node_modules/chromedriver/2.46/chromedriver is not writable: EACCES: permission denied, mkdir '/us
r/local/src/testProject/node_modules/chromedriver/2.46'
/usr/local/src/testProject/node_modules/chromedriver/2.46/chromedriver is not writable: EACCES: permission denied, mkdir '/us
r/local/src/testProject/node_modules/chromedriver/2.46'
Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromedriver_linux64.zip
Saving to file: /tmp/2.46/chromedriver/chromedriver_linux64.zip

问题原因：无法正常下载chromedriver。

解决方法：

1)     手动设置npm中下载chromedriver的地址。

cd /usr/local/src

npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver

2)     设置完成后，先删除之前未创建成功的Vue项目，之后再创建Vue项目即可。

rm -rf testProject