介绍

简要介绍

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

编写语言：js

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

建议的版本

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

环境要求

云服务器要求

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

操作系统要求

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

安装

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 刷新界面