文档首页 > > 移植指南> 安装Element UI> 安装指导

安装指导

分享
更新时间:2020/10/10 GMT+08:00

介绍

简要介绍

Element,一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。

编写语言:js

一句话概述:桌面端UI框架

建议的版本

  • 建议使用版本为“2.0.0-rc.1”
  • 由npm工具获取,命令为:npm i element-ui@next -D

环境要求

云服务器要求

本文以云服务器KC1实例测试,云服务器配置如表1所示。

表1 云服务器配置

项目

说明

规格

kc1.xlarge.2 | 4vCPUs | 8GB

磁盘

系统盘:高IO(40GB)

操作系统要求

操作系统要求如表2所示。

表2 操作系统要求

项目

版本

下载地址

CentOS

7.5

在公共镜像中已提供。

Kernel

4.14.0

在公共镜像中已提供。

安装

  1. 安装Element的依赖Node.js和npm。

    1. Element依赖于Node.js和npm,因此先安装Node.js和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. 查看Node.js和npm的版本号,确保Node.js和npm安装成功。

      node -v

      回显信息如下,表示Node.js安装成功。

      v10.16.0

      npm -v

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

      6.9.0

  2. 安装Element的依赖Vue。

    1. 确认完Node.js和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]

  3. 创建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访问,所以需要修改配置文件,修改步骤如下:
      1. 进入“testProject”目录。
      2. 修改“config/index.js”“host”属性为“0.0.0.0”
        1.  {
        2.  // ...,
        3.  host: '0.0.0.0',
        4.  port: 8080,
        5.  // ...
        6.  }
      3. 修改“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”/即可访问,如图1所示。
      图1 访问Vue

  4. 安装element-ui到项目下。

    1. 3的项目“testProject”中,安装element-ui。

      cd /usr/local/src/testProject

      npm i element-ui@next -D

    2. 查看Element的版本号。

      安装成功后,会在“/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"
      }

运行和验证

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

  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”,如图2所示,则表示Element可正常使用。
图2 刷新界面
分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问