搭建 vue-cli 和 引入 Element-ui 最完整的入门例子(手把手)

Posted sanri1993

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了搭建 vue-cli 和 引入 Element-ui 最完整的入门例子(手把手)相关的知识,希望对你有一定的参考价值。

搭建 vue-cli 脚手架

  1. 安装 git

  2. 安装 node 并配置环境变量,使用 zip 版本

    # 检查 node 是否安装成功 
    node -v 
  3. 使用淘宝镜像

    npm config set registry https://registry.npm.taobao.org
    # 检查是否配置成功
    npm config get registry 
  4. 安装 node 模块 cnpm

    npm install -g cnpm --registry=https://registry.npm.taobao.org
  5. 全局安装 vue-cli

    cnpm install vue-cli -g
    # 检查是否安装成功
    vue 
  6. 使用 webpack 骨架初始化应用 ,就像 maven 骨架一样

    mkdir test && cd test
    vue init webpack 

    技术图片

  7. 运行项目

    npm run dev 

引入 Element-ui

  1. 修改 main.js

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App'
    import router from './router'
    
    
    Vue.config.productionTip = false
    
    Vue.use(ElementUI)
    
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    其实只改动了三处

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)

    注意事项 :

    • /* eslint-disable no-new */ 注释不能删除 ,不然报错
    • 最底部必须要有一空行,不然编译不过
    • 缩进空格数必须一致,不然报错
  2. 接下来就可以把 vue 官网的组件拿到 HelloWorld.vue 中去玩了,比如我把它弄成了这样

    <template>
     <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
    
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
    
        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    </template>
    
    <script>
     export default {
        data() {
          const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          };
          return {
            tableData: Array(20).fill(item)
          }
        }
      };
    </script>
    
    <style>
      .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
      }
    
      .el-aside {
        color: #333;
      }
    </style>
    
  3. 它长成这样子
    技术图片

一点小推广

创作不易,希望可以支持下我的开源软件,及我的小工具,欢迎来 gitee 点星,fork ,提 bug 。

Excel 通用导入导出,支持 Excel 公式
博客地址:https://blog.csdn.net/sanri1993/article/details/100601578
gitee:https://gitee.com/sanri/sanri-excel-poi

使用模板代码 ,从数据库生成代码 ,及一些项目中经常可以用到的小工具
博客地址:https://blog.csdn.net/sanri1993/article/details/98664034
gitee:https://gitee.com/sanri/sanri-tools-maven

以上是关于搭建 vue-cli 和 引入 Element-ui 最完整的入门例子(手把手)的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli4 项目框架的搭建 以及 路由的封装axios的封装公共函数js文件的封装引用vuex的基本用法minins混入css以及字体图标和图片的引入等

从无到有构建vue实战项目

vuejs 使用vue-cli引入bootstrap

使用vue-cli搭建项目

vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)

vue如何在 Vue-cli 创建的项目中引入iView