Vue+ElementUI项目搭建小案例（idea）

最新推荐文章于 2024-04-29 02:46:43 发布

@小匠

最新推荐文章于 2024-04-29 02:46:43 发布

阅读量3.6k

点赞数 4

分类专栏：前端文章标签： vue

原文链接：https://www.bilibili.com/video/BV18E411a7mC?t=402&p=16

版权

前端专栏收录该内容

37 篇文章 1 订阅

订阅专栏

npm下载比较慢，可以使用cnpm安装：npm下载包路径更改

npm命令解释：

在这里插入图片描述

1、创建一个名为hello-vue的项目

2、在项目目录下初始化项目

vue init webpack hello-vue

在这里插入图片描述

进入项目目录 cd hello-vue
先安装组件，在idea中会有语法提示
安装vue-router

npm install vue router --save-dev

在这里插入图片描述

安装elementUI

npm i element-ui -S

在这里插入图片描述

安装依赖

npm install

安装SASS加载器

 cnpm install sass-loader node-sass --save-dev

启动测试

npm run dev

访问 http://localhost:8080
在这里插入图片描述

3、项目案例

在src目录下建立文件夹：router，views
在views目录下创建一个main.vue文件
在views目录下创建一个Login.vue文件

<template>
  <div class="login-box">
    <!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
    <el-form :rules="loginFormRules" ref="loginForm" :model="loginForm" label-position="right" label-width="auto" show-message>
      <span class="login-title">欢迎登录</span>
      <div style="margin-top: 5px"></div>
      <el-form-item label="用户名" prop="loginName">
        <el-col :span="22">
          <el-input type="text" v-model="loginForm.loginName"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="密码" prop="loginPassword">
        <el-col :span="22">
          <el-input type="password" v-model="loginForm.loginPassword"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loginSubmit('loginForm')">登录</el-button>
        <el-button type="primary" @click="onRegit('loginForm')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        loginName: '',
        loginPassword: ''
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      loginFormRules: {
        loginName: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        loginPassword: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    loginSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          console.log("to loginSuccess")
          this.$router.replace("/loginSuccess");
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style 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 palegreen;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #66CD00;
  font-size: 30px;
  font-weight: bold;
}
</style>

配置router，在router目录下建index.js配置文件

import Vue from "vue";
import Router from "router";
import Main from "../views/main"
import Login from "../views/Login";
Vue.use(Router);

export default new Router({
  routers: [
    {
      path: "/main",
      component: Main
    },{
      path: "/login", // 访问路径
      component: Login // 组件
    }
  ]
})

在main.js中导入相关的依赖包（Router，ElementUI）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from "./router";
import ElementUI from "element-ui";
Vue.config.productionTip = false;

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

import 'element-ui/lib/theme-chalk/index.css';
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

在这里插入图片描述

4、路由嵌套

在views目录下建user文件夹，并创建两个vue文件，List.vue和Profile.vue
在main.vue加入以下代码：

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/user/profile">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <e1-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </e1-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-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

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

<style scoped lang="scss">
.el-header {
  background-color: #048bd1;
  color: #333;
  line-height: 60px;
}

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

在路由中添加配置，导入组件

import List from "../views/user/List";
import Profile from "../views/user/Profile";

路由嵌套

  routes: [
    {
      path: "/Main",
      component: Main,
      //嵌套路由
      children: [
        {
          path: "/user/list",
          component: List
        }, {
          path: "/user/profile",
          component: Profile
        }
      ]
    }, {
      path: "/login", // 访问路径
      component: Login, // 组件
    }
  ]

在这里插入图片描述

5、参数传递及重定向

参数传递

方法一：

<!-- 需要进行双向绑定：name为组件路径也可以为组件名，param为参数 -->
<router-link v-bind:to="{name: '/user/profile',param: {id:1}}">个人信息</router-link>

{
    //与传参的名字一致
    path: "/user/profile/:id",
    component: Profile
}

<template>
  <!-- 踩坑点：所有的元素必须放在根标签下-->
  <div>
    <h2>用户信息</h2>
    <!-- $route没有s param有s-->
    {{$route.params.id}}
  </div>
</template>

方法二：通过props解耦
在路由配置文件中添加

{
          path: "/user/profile/:id",
          component: Profile,
          props: true //添加这一行表示开启props传参
        }

在profile.vue中添加，props:[‘id’]接收参数
在这里插入图片描述

重定向

,{
      path: "/gohome",
      redirect: "/main"
    }

6、路由钩子

在这里插入图片描述

导入依赖

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

Profile.vue，添加路由钩子，在路由前、路由后执行

<script>
export default {
  props: ['id'],
  name: "profile",
  beforeRouteEnter: (to, from, next)=>{
    console.log("进入路由之前");
    //加载数据
    next(vm => {
      vm.getData();
    })
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("进入路由之后");
    next();
  },
  methods: {
    getData: function () {
      this.axios({
        method: "get",
        url: "http://localhost:8080/static/mock/data.json"
      }).then(function (response) {
        console.log(response)
      })
    }
  }
}
</script>

bug

如何解决： [Vue warn]: Do not use built-in or reserved HTML elements as component id: 标签id
自定义的id和HTML内部id重复
出现bug有可能是单词拼写错误（踩坑点：不能正确跳转页面）
npm run dev 错误提示：

{ parser: “babylon” } is deprecated; we now treat it as { parser: “babel” }.

解决方法：

找到你的工程文件夹里的 YourProName\node_modules\vue-loader\lib\template-compiler\index.js

//将以下代码
if (!isProduction) {
code = prettier.format(code, { semi: false, parser: ‘babylon’ })
}

//修改为：

if (!isProduction) {
code = prettier.format(code, { semi: false, parser: ‘babel’ })
解决方法：将SaaS的版本改为7.3.1,然后重新安装依赖

@小匠

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
Vue+ElementUI项目搭建小案例（idea）

npm命令解释：1. 创建一个名为hello-vue的项目2. 在项目目录下初始化项目vue init webpack hello-vue进入项目目录 cd hello-vue先安装组件，在idea中会有语法提示安装vue-routernpm install vue router --save-dev安装elementUInpm i element-ui -S安装依赖npm install...
复制链接

扫一扫