linux部署前端element组件项目

vue是一套轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb. 

Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0版本的桌面端UI框架，可以直接引用很多组件功能，不在去写各种JS代码。

使用华为云ECS服务器安装nodejs，

1.下载node.js安装包.

wget https://nodejs.org/dist/v10.14.1/node-v10.14.1-linux-x64.tar.xz

2.解压文件.

tar xvJf node-v10.14.1-linux-x64.tar.xz

3.为node和npm建立软连接，可以在任意目录执行node和npm命令.

ln -s /root/node-v10.14.1-linux-x64/bin/node /usr/local/bin/node

4. 查看Node和npm版本

华为CloudIDE创建项目：

terminal--mkdir vue-element

安装淘宝镜像cnpm代替npm外国镜像下载速度慢问题：

安装vue脚手架工具：

开始创建项目：

配置VUE外网访问：

修改config/index.js

 host: '0.0.0.0'

bulid/webpack.dev.conf.js

disableHostCheck: true

安装elementUI

element的引入, 在main.js里面添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

修改App.vue

在components下创建一个HuaWei.vue

<template>
<div class="banner">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>
</template>


<script>
  export default {
    name: 'HuaWei',
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

打包项目：

上传云服务器：

解压：

tar -xvf element.tar

下载模块：

启动项目：

ECS外网IP访问：