Vue整合Element UI从0开始构建一个项目＜一＞

一. 使用vue init webpack  项目名称初始化一个项目

使用npm install 安装依赖.可能遇到报错 - npm ERR! chromedriver@2.46.0 install: `node install.js.

解决方法:

1. npm install --ignore-scripts

2. npm i 

3. npm rebuild node-sass

二.使用npm  run  dev 启动初始项目

三.整合element UI

1. 使用命令npm i element-ui -S 添加element-ui组件
2. 更改main.js文件内容引入element组件

import Vue from 'vue'
import App from './App'
import router from './router'

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

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 四.添加一个主页

        1.删除components下原来的helloworld.vue文件

        2.修改App.vue里的内容:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

</script>

<style>
  body {
    margin:0
  }
  html,body,#app {
      height: 100%;
  }
</style>

        3.在src目录下新建一个文件夹views用于我们存放页面,然后再创建一个home.vue文件,这里代码直接拷贝element-ui官网提供的页面布局 上-左-右 布局.

<template>
  <div id="el">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-container,#el {
    height: 100%;
  }
</style>

        4.在src/router/index.js中添加首页路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '首页',
      component: Home
    }
  ]
})

        5.重新执行npm install 命令和 npm run  dev 命令,浏览器里输入:http://localhost:8080/#/查看首页内容.