element ui 普通区域 element ui+vue

转载

mob64ca14040d22 2024-04-10 15:23:35

文章标签 element ui 普通区域 vue elementui Vue App 文章分类 机器学习人工智能

文章目录

Vue（11）——vue+elementUI的简单使用

1、创建工程
2、配置环境
3、编写vue组件
4、配置路由
5、开启路由
6、展示组件
7、测试
8、运行时可能遇到的问题：

Vue（11）——vue+elementUI的简单使用

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型

vue+elementUI的使用

elementUI官网

1、创建工程

使用命令创建一个名为hello-vue的项目：

vue init webpack hello-vue

2、配置环境

//进入工程目录
cd hello-vue
//安装vue-router
cnpm install vue-router --save-dev
//安装element-ui
npm i element-ui -S
//安装sass加载器
cnpm install sass-loader node-sass --save-dev
//启动测试
npm run dev

测试成功！

为什么使用 Sass?

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。

Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

3、编写vue组件

在src下面新建一个目录view，用来存放组件

<template>
<div>
  <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
    <h3 class="login-title">欢迎登录</h3>
    <el-form-item label="账号" prop="username">
      <el-input type="text" placehodler="请输入账号" v-model="form.username"/>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" placeholder="请输入密码" v-modle="form.password"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
    </el-form-item>
  </el-form>
  <el-dialog
    title="温馨提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>请输入账号和密码</span>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogViaible = false">确定</el-button>
    </span>
  </el-dialog>

</div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      form:{
        username: '',
        password: ''
      },
       // trigger表单验证触发方式：blur失去焦点
      rules: {
        username: [
          {required: true,message:'账号不可为空',trigger: 'blur'}
        ],
        password: [
          {required: true,message:'密码不可为空',trigger:'blur'}
        ]
      },
      //对话框显示和隐藏
      dialogVisible: false
    }
  },
  methods: {
    onSubmit(formName) {
      //为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid){
          //使用vue-router路由到指定页面，该方式称为编程式导航
          this.$router.push("/main");
        }else{
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box{
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

Main.vue

<template>
<div>
  首页
</div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

4、配置路由

在src目录下创建router目录，用于存放路由配置文件

在route目录下index.js文件，用来编写路由配置:

import Vue from 'vue'
import Router from 'vue-router'
import Main from "../view/Main";
import Login from "../view/Login";

Vue.use(Router);


export default new Router({
  routes:[
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

5、开启路由

在项目入口main.js文件中导入并开启Element-ui和路由：

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

import router from './router' //扫描路由

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

Vue.use(router);
Vue.use(ElementUI);

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  render: h => h(App)

})

6、展示组件

在App.vue的template里展示Login和Main组件

<template>
  <div id="app">

    <router-view></router-view>

  </div>
</template>

7、测试

运行命令：npm run dev进行测试：

element ui 普通区域 element ui+vue_element ui 普通区域

8、运行时可能遇到的问题：

node-sass版本过高：
问题描述：Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
解决方案：卸载重装低版本
1、卸载： npm uninstall node-sass
2、安装： npm install node-sass@4.14.1
3、运行：npm run dev
问题描述：‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。
解决方案：前往项目根目录删除node_modules文件夹，然后在项目根目录路径下的终端运行"cnpm install"等待安装完之后，再次运行“npm run dev”
node-loader版本过高：
问题描述：TypEerror: this.getOptions is not a function
解决方案：
1.找到package.json文件
2.找到"sass-loader"，将它改为7.3.1版本（仅供参考）
3.重新下载依赖：cnpm install