mac環境搭建vue項目element ui

1.下載node
官網鏈接下載地址

2.全局安裝vue-cli

npm i vue-cli -g

3.使用命令開始初始化並創建自己的項目

vue init webpack test

4.開發環境啓動

cd test
npm run dev

5.在瀏覽器預覽

6.安裝並使用Element UI

npm i element-ui -S

7.修改 /src/main.js 爲：

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

import App from './App'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

8.創建佈局 修改App.vue

<template>
  <div id="app">
    <el-container>
      <el-header>Header1</el-header>

      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
</style>

9.增加header
在components目錄下新建Header.vue

<template>
  <el-row>
    <el-col :span="24">
      <div class="head-wrap">Hello Wold</div>
    </el-col>
  </el-row>
</template>
<style scoped>
  .head-wrap{

  }
</style>

10.修改App.vue

<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <Header></Header>
      </el-header>

      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from '@/components/Header'
export default {
  name: 'app',
  components: {
    'Header': Header
  }
}
</script>

<style>
  .header {
    background-color: #409EFF;
    color: #fff;
    line-height: 60px;
  }
</style>

其他組件可以按照相同的方式進行操作
更多組件：https://element.eleme.cn/#/zh-CN/component/installation

請關注我的公衆號：每天學一點it知識