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

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        有了之前的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: '',
  
  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已经用起来了。后面就可以借助于node.js和vue进一步开发前端网站了。

9、发布

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