element ui框架（第一个element ui程序）-CFANZ编程社区

有了之前的nodejs和vue作为铺垫之后，后面就可以准备导入element ui库了。我们还是以一个demo的形式来完整说明，应该如何导入element ui库。

1、创建test-elementui工程

用管理员的账号打开cmd窗口，输入vue init ./webpack test-elementui。不出意外的话，就可以看到创建好的test-elementui的目录。

C:\Users\feixiaoxing\Desktop\test>vue init ./webpack test-elementui

? Project name test-elementui
? Project description A Vue.js project
? Author feixiaoxing <feixiaoxing@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "test-elementui".

# Project initialization finished!
# ========================

To get started:

  cd test-elementui
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

2、安装好第三方库

下面要做的，就是先安装好其他第三方库。

cd test-elementui
npm install

3、继续安装element-ui库

npm install element-ui -S

4、确保element-ui已经安装上了

如果安装没有问题，可以发现node-modules下面element-ui库已经安装好了。

5、寻找src目录下面的main.js文件，添加相关内容，修改好的main.js如下所示

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 添加elementui文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 将ElementUI添加到vue里面
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  
  render:h=>h(App) // 添加渲染
})

修改的地方主要有三处。第一处就是引入element-ui和index.css文件；第二处是将ElementUI添加到Vue中；第三处就是render渲染。上述三处都有中文说明，大家可以好好看一下。

6、编译运行

npm run dev

输入上述命令之后，如果没有错误的话，就会产生相关的打印。比如像这样，

DONE  Compiled successfully in 29802ms                                                                                                 14:34:59

 I  Your application is running here: http://localhost:8082

7、第一次添加element代码

默认工程显示的内容都是放在components/HelloWorld.vue下面，可以在上面做相关修改。注意，修改的时候，可以让console窗口一直打开，因为默认nodejs是支持动态修改的。修改后的HelloWorld.vue内容如下，

<template>
  <div class="hello">
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

8、重新打开127.0.0.1:8082网页，不出意外，就可以相关的显示内容了，

element ui框架（第一个element ui程序）_ui

姑且不论美丑，只要看到这些按钮，至少说明element ui已经用起来了。后面就可以借助于node.js和vue进一步开发前端网站了。

9、发布

如果需要发布的话，那么直接输入npm run build即可。执行结束后，就会发现有一个dist目录，里面包含一个static目录和index.html文件。其中index.html就是入口文件，static下面包含了css、fonts、js三个目录，相关文件已经做了压缩和重新编码。