创建一个简单的vue框架项目

1、下载安装node,下载之后一步步默认安装即可。下载完成后安装node。

lujunyu2022

930人浏览 · 2023-12-30 09:56:44

lujunyu2022 · 2023-12-30 09:56:44 发布

前言

在现代社会中，文字已经成为传递信息的重要方式之一。人们使用文字来表达思想、交流知识、记录历史等等。而一篇好的文章，往往需要有一个有力的前言来引起读者的兴趣和注意。一个好的前言可以帮助读者迅速了解文章的主题和内容，激发读者阅读下去的欲望。本文将介绍一些撰写文章前言的技巧和要点，希望能对写作有所帮助。

该文章是本人学习web项目开发的心得体会，仍有许多不足之处，如有错误欢迎各位指正，谢谢！

一、vue项目化环境搭配

1.vue脚手架项目环境配置

1、下载安装node,下载之后一步步默认安装即可。

或者直接去官网下载：下载 | Node.js 中文网 (nodejs.cn)

下载完成后安装node

注意：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

2.vue2项目调试插件，下载vue.js_devtools

打开浏览器打开扩展，然后搜索vue.js_devtools，搜索出来后点击获取，即可安装该扩展

注意：也可以自行下载vue.js_devtools，下载完成后打开扩展程序将该文件拖入浏览器的扩展程序中即可使用。

最后打开Visual Studio Code下载该扩展即可

3.创建vue项目

创建你的vue项目存放的文件夹，并在标红位置输入cmd后回车，弹出终端

弹出终端后输入vue create 文件名回车创建vue项目

创建完项目会显示在文件夹，使用Visual Studio Code打开该项目文件夹即可

二、安装element ui框架

使用Visual Studio Code打开项目，打开终端输入指令 npm i element-ui -S 等待下载完成

打开main.js输入以下代码，即可使用element ui框架

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

Vue.use(ElementUI);

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

三、使用elemnt ui框架创建简单登录页面

使用element ui组件创建登录界面

template标签代码

<template>
  <div class="login2">
    <div class="form">
      <h2 class="title">mall-admin</h2>
      <!-- 表单 element-ui -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
        <!-- 用户名输入框 -->
        <el-form-item prop="name">
          <el-input placeholder="请输入用户名" prefix-icon="el-icon-user-solid" v-model="ruleForm.name"></el-input>
        </el-form-item>

        <!-- 密码输入框 -->
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" show-password v-model="ruleForm.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="loginBtn" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

js代码

<script>
import axios from "axios";
export default {
  name: "Login2View",
  data() {
    return {
      ruleForm: {
        name: "",
        password: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        name: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios
            .post("后端接口地址", {
              username: this.ruleForm.name,

              password: this.ruleForm.password,
            })

            .then((res) => {
              if (res.data.code == 200) {
                //登录成功后将数据写入本地
                //JSON.stringify将对象转换为字符串
                //JSON.parse将字符串转换为对象
                sessionStorage.setItem('user',JSON.stringify(res.data.user));
                this.$router.push("/home");
              }

              console.log(res);
            })

            .catch((error) => {
              console.log(error);
            });
          alert("登录成功!");
        } else {
          console.log("登录失败!!");
          return false;
        }
      });
    },
  },
};
</script>

css样式

<style lang="scss" scoped>
.login2 {
  margin: 0 auto;
}

.title {
  text-align: center;
  color: #409eff;
}

.form {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  box-shadow: #eee 0 0 8px;
  background-color: white;
  // opacity: 0.95;
  // margin-top: 150px;
}

.el-form {
  text-align: center;
}

.loginBtn {
  width: 100%;
}
</style>

配置路由打开 router/index.js文件在指定位置输入以下代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    //重定向，跳转登录页面
    redirect:'/login2'
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView,
    meta:{
      title:"首页",
      //决定显示面包屑
      isShowMenu:true
    }
  },
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  // },
 
  // {
  //   path:'/user',
  //   name:'user',
  //   component: () => import('../views/UserView.vue')
  // },
  // {
  //   path:'/login',
  //   name:'login',
  //   component: () => import('../views/LoginView.vue')
  // },
  {
    path:'/login2',
    name:'login2',
    component: () => import('../views/Login2View.vue'),
    meta:{
      title:"登录",
      isShowMenu:false
    }
  },
  {
    path:'/dingdan',
    name:'dingdan',
    component: () => import('../views/dingdan.vue'),
    meta:{
      title:"订单管理",
      isShowMenu:true
    }
  },
  {
    path:'/user',
    name:'user',
    component: () => import('../views/user.vue'),
    meta:{
      title:"用户列表",
      isShowMenu:true
    }
  },
  
]

const router = new VueRouter({
  routes
})

export default router

打开app.vue文件

输入以下代码

Ps：以下代码时根据element ui组件库按照自己的需求得来的代码，

也可以自己更换样式，自己怎么爽怎么来，我使用的就是这样

<template>
  <div id="app">
    <!-- 判断该页面是否显示，路由那里的值 -->
    <div class="leftmenu" v-if="$route.meta.isShowMenu">
      <!-- default-active="$route.path"动态绑定路由路径，不然无法跳转 还有路由可用router -->
      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
        <!-- index可以放路径 -->
        <el-menu-item index="/home">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>商品</span>
          </template>

          <el-menu-item-group>
            <el-menu-item index="1-1">商品分类</el-menu-item>
            <el-menu-item index="1-2">商品规格</el-menu-item>
            <el-menu-item index="1-3">商品列表</el-menu-item>
            <el-menu-item index="1-4">数据统计</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-menu-item index="/dingdan">
          <i class="el-icon-document"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>

        <el-menu-item index="/user">
          <i class="el-icon-setting"></i>
          <span slot="title">用户列表</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right">
      <div class="header" v-if="$route.meta.isShowMenu">
        <!-- separator="/"分隔符 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="$route.meta.title != '首页'">{{ $route.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="user">
          {{ username }}
          <el-dropdown @command="exit">
            <img :src="avatar" alt="">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="退出">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>


      <div class="content">
        <!-- 必须写这个，不然views的页面渲染不出来 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

js部分

<script>
export default {
  data(){
    return{
      //名字
      username:sessionStorage.getItem('user')?JSON.parse(sessionStorage.getItem('user')).username:'',
      avatar:sessionStorage.getItem('user')?JSON.parse(sessionStorage.getItem('user')).avatar:'',
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    exit(command) {
        this.$router.push('/login2');
        sessionStorage.clear();
      }
  },
};
</script>

css样式

<style lang="scss">
#app {
  display: flex;

  .leftmenu {
    width: 200px;
    height: 100vh; //可视高度
  }

  .el-menu {
    border-right: solid 1px #e6e6e6;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: #FFF;
    height: 100%;
  }

  .right {
    flex: 1;
    height: 100vh;
    
  }
  .header{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  img{
    width: 40px;
    height: 40px;
  }
}
</style>

打开浏览器输入https:localhost:8080/login运行即可完成使用element ui框架实现简单登录页面

总结

创建完该项目就完成vue项目化开发啦！

总结起来，这个短文主要讨论了某个主题或问题，给出了一些观点和解释，并提供了一些相关的事实或例子来支持这些观点。作者的立场可能明确或模糊，但在整个文章中，他们努力展示自己的观点并提供合理的论据。总的来说，这篇文章是一个有条理且有力的论述，强调了某个问题的重要性并提出了解决方案。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^