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知识