526互联

vue项目创建和启动、ElementUI的安装和快速学习

发布时间 2023-10-15 16:22:35作者: 201812

5.创建Vue项目

方式一：命令行（不推荐）

方式二：图形化

先找到项目想要创建的位置，去到该目录下，输入cmd回车

 输入 vue ui回车

可能会遇到的问题：Failed to get response from /vue-cli-version-marker

 解决办法：

找到  .vuerc文件，位置在C:\Users\当前用户.vuerc

将packageManager修改如下：

原因是本地hadoop环境变量回合vue项目有冲突，他们都要用到yarn集群

 修改后再重新输入vue ui，没有报错信息且自动打开Vue项目管理器的页面

 

 点击创建-->在此创建新项目

 

 

 

 

 出现这个页面就创建完成

将创建好的vue项目

 

项目目录结构说明

 

6.Vue项目的启动

方法一：图形化界面启动

方法二：命令行

方法一：

 

 

 

 

 

 Vue项目执行流程

在工程化项目中，vue要做的事情就是通过main.js吧App.vue渲染到index.html的指定区域中

09、前端工程化-Vue项目执行和开发流程_哔哩哔哩_bilibili

可能出现的问题：

vscode中vue代码全灰且没有代码提示 - 201812 - 博客园 (cnblogs.com) 

7.Element

基于Vue2.0的桌面端组件库

组件：组成网页的部件，入超链接按钮图片表格等。

安装ElementUI组件库，在当前工程的目录下安装ElementUI组件库

指定版本安装：npm install element-ui@2.15.3

在main.js中引入Element UI组件库且使用

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

Vue.use(ElementUI);

 

 7.2使用

可能会出现的问题：版本不匹配的问题：

Error: Vue packages version mismatch: - vue@2.6.14 (D:\前端\vue01\node_modules\vue\dist\vue.runtime.common.js)- vue-template-compiler@2.7.14 (D:\前端\vue01\node_modules\vue-template-compiler\package.json) - 201812 - 博客园 (cnblogs.com)

在src/views里面创建一个ElementView.vue组件

 

 

 直接在ElementView.vue中编写代码即可

官方文档：https://element.eleme.cn/2.11/#/zh-CN/component/installation

7.3基础组件使用

表单，直接在官网找代码

<template>
  <div>

    <p>elementview</p>


    <!-- 表格Table：官网复制 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage" 
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
    </div>


  </div>
</template>

<script>
export default{
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          //分页条模型数据， currentPage当前页面
          currentPage: 2
        }
      },
      methods: {
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        }
      },
    }
</script>

<style>

</style>
View Code

 7.4案例

页面效果：

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <h1>XXXXX管理系统</h1>
      <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">部门管理</el-menu-item>
            <el-menu-item index="1-2">员工管理</el-menu-item>
          </el-menu-item-group>
        </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-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="formInline.user" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="formInline.region" placeholder="性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="入职日期">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>


        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="姓名" >
            
          </el-table-column>
          <el-table-column  label="图片">
            <!-- 插槽：scope.row表示当前行数据对象，scope是element封装的对象 -->
            <template slot-scope="scope">
                <img :src="scope.row.image" width="80px">
            </template>
          </el-table-column>
          <el-table-column  label="性别" >
            
            <template slot-scope="scope">
                {{scope.row.gender == 1? "男":"女"}}
            </template>

          </el-table-column>
          <el-table-column prop="job" label="职位" >
            
          </el-table-column>
          <el-table-column prop="entrydate" label="入职日期" >
            
          </el-table-column>
          <el-table-column prop="updatetime" label="修改时间" >
            
          </el-table-column>
          
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
              type="primary"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页条 -->
        <el-pagination
          background="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      currentPage: 1,
        tableData: [
            {id: "1",
            name: "小明", 
            image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
            gender: 1,
            job: '班主任',
            entrydate: "2021-09-09",
            updatetime:"2021-10-09"
            }

        ]
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
     handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>