Day06-Vue全家桶项目

最新推荐文章于 2024-05-06 18:46:17 发布

金霖海

最新推荐文章于 2024-05-06 18:46:17 发布

阅读量192

点赞数

分类专栏：前端3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_33396183/article/details/132490801

版权

前端3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Day01-Vue全家桶项目

一全家桶项目介绍

Vue在使用脚手架创建项目的时候，提供前端工程化项目

目前主要学习了Vue基础：Vue指令、Vue组件开发、Vue样式、组件通信、生命周期

全家桶项目是很多技术结合的一种开发模式：

全家桶项目搭建
路由搭建（前端路由）
网络请求封装
ElementUI组件库（帮助我们快速开发）
Vuex状态机（项目状态管理）
数据可视化

二创建全家桶项目

1 使用脚手架创建全家桶项目

vue create vue-project

2 Vue的创建模式

3 选择项目中需要的插件

? Check the features needed for your project: 
 ◯ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

选择的模板：

Babel：Babel是一个js的编译工程

4 选择vue版本

5 路由配置

6 选中SASS

7 插件的相关配置代码放在哪个文件中

8 是否保存当前配置

9 出现以下内容就是项目创建完毕

输入该两句命令快速启动vue项目

停止项目的命令 ctrl + c

扩展：Vue这个框架有两条路线

PC端开发，目前我们学习的主线
APP开发，有一个新的框架weex ,但是目前都没有使用了

10 vue全家桶项目目录结构

public: 模板文件目录，该目录中的图片以及静态的资源不会经过webpack的编译。
src: vue的源代码目录
.browserslistrc: 浏览适配的配置文件
babel.config.js: babel是编译.vue结尾文件的插件。babel.config.js是该插件的配置文件
jsconfig.json: 是js运行环境的配置文件，webpack打包编译时会用到该配置
package-lock.json: 这是插件版本锁定文件
package.json: 包依懒的配置文件，也有部分webpack的配置
README.md: 项目的描述帮助文档。
vue.config.js: vue框架和webpack的配置文件

11 src目录结构

assets: 存放静态资源文件的目录，它会经过webpack的编译和打包。图片、css、js都会压缩处理。
components：存放功能组件的目录
router: vue-router的代码文件存放位置
store: vuex的代码文件存放位置
views: 存放页面组件的文件夹

三 ElementUI环境搭建

(1)如果已经创建好了一个项目，我们可以使用下面命令快速集成elementui这个组件库

vue add element

执行这个命令的时候，Element底层采用scss来设计样式，要求项目中必须要有sass和node-sass

node-sass在你们本地下载可能很慢。多试几次。

(2)配置完成后，项目产生一些变化

App.vue：里面代码会被初始化，默认给新增了element的按钮组件，你们需要重新改造

plugins：项目目录下面多了文件夹，这个文件夹里面配置就是elementui的插件记载

element-variables.scss：elementui的样式配置，以后可以在这个文件中自己改变主题色

(3)在main.js中加载element.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

只要项目启动，element环境就会加载成功

(4)在任何一个组件中引入element组件

<el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
</el-row>

(5)启动的时候如果elementui报错，这是sass版本跟elementui版本不兼容

npm i sass@1.32.13 --save-dev

这个sass包属于开发依赖，-dev必须加上

四页面设计

1 登录 Login.vue

<template>
  <div class="container">
    <el-card class="login-box">
      <h1>蜗牛电商后台管理系统</h1>
      <el-form :model="formData" :rules="rules"  ref="ruleForm" label-width="80px" >
        <el-form-item style="margin:30px 0" label="用户名" prop="username">
          <el-input v-model="formData.username" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password"   show-password></el-input>
        </el-form-item>
      </el-form>
      <el-button class="btn" @click="login"  type="primary">登录</el-button>
    </el-card>
  </div>
</template>




<script>
/**
 * 一.表单的双向绑定
 *  1.在data中创建一个属性formData
 *  2.在el-form上给model属性赋值为formData
 *  3.在el-input上使用v-model="formData.username"进行双向绑定
 * 二.表单失去焦点校验
 *  1.在data中创建一个属性rules,在rules中制定校验规则
 *  2.在el-form上给rules属性赋值为rules
 *  3.el-form-item的prop赋值
 * 三.点登录按钮的校验
 *  1.给登录按钮绑定点击事件
 *  2.点登录按钮的时候,进行表单校验
 */
export default {
  data(){
    return{
      formData:{},
      rules: {
        username:[ { required: true, message: '请输入用户名', trigger: 'blur' }],
        password:[ { required: true, message: '请输入密码', trigger: 'blur' }],
      }
    }
  },
  methods:{
    login(){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  // vw是宽度百分百 vh是高度百分比 是相对于视口的百分比
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/images/bg.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 500px;
    height: 350px;
    display: flex;
    justify-content: center;
    h1{
      text-align: center;
    }
    .btn{
        width: 400px;
        margin-top: 30px;
    }
    // 让父组件的某一个样式能够穿透到子组件上
    ::v-deep .el-form-item__label{
      text-align: left;
    }
  }
}
</style>

2 首页

<template>
  <div class="container">
    <!-- 侧边栏 -->
    <div class="side">
        <div class="logo">
            <img src="https://woniuxy.com/static/images/logo-500px.png" alt="">
        </div>
        <div class="menu"></div>
    </div>
    <!-- 内容区域 -->
    <div class="content"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.container{
    width: 100vw;
    height: 100vh;
    display: flex;
    .side{
        width: 15vw;
        height: 100vh;
        background-color: #031527;
        .logo{
            margin-top: 20px;
            img{
                width: 100%;
            }
        }
    }
    .content{
        height: 100vh;
        flex: 1;
        background-color: paleturquoise;
    }
}
</style>

五路由介绍

前端路由

Vue是SPA(Single Page Application)开发模式，

整个项目只有一个HTML文件，在这个文件中通过引入不同的组件，实现页面显示效果不一样。

Vue开发的是单页应用,我们以组件为项目的最小开发单元,当页面上显示什么样的组件,就会呈现什么样的效果

当组件开发完成后,通过路径来实现页面上组件的切换

路由就是我们要输入到浏览器URL上的地址

在vue项目中,把路由跟对应的组件进行关联,当路由发生改变的时候,在页面上显示对应的组件

http://127.0.0.1:8080/login   ---->Login.vue
http://127.0.0.1:8080/home ---->Home.vue

六一级路由

1 配置一级路由

一级路由：用户第一次访问这个系统可以直接获取到页面，将这种路由配置称为一级路由

比如：登录、注册、主页

找到router文件夹下面index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "@/views/Login.vue"
import Home from "@/views/Home.vue"

Vue.use(VueRouter)


/**
 * Vue开发的是单页应用,我们以组件为项目的最小开发单元,当页面上显示什么样的组件,就会呈现什么样的效果
 * 当组件开发完成后,通过路径来实现页面上组件的切换
 * 路由就是我们要输入到浏览器URL上的地址
 * 在vue项目中,把路由跟对应的组件进行关联,当路由发生改变的时候,在页面上显示对应的组件
 * 路由的开发步骤
 *  1.配置路由对象,包含三个属性
 *    path
 *    name
 *    component
 *      
 *  2.配置路由的出口   
 *    <router-view></router-view>
 *  3.路由重定向
 *    设置默认要显示的组件
 */

const routes = [
  {
    path:"/",
    redirect:"/home"
  },
  {
    path:"/login",
    name:"登录",
    component:Login
  },
  {
    path:"/home",
    name:"首页",
    component:Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2 在App.vue中引入路由出口

<template>
  <div id="app">
    <!-- 配置路由的出口 -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {

}
</script>

<style>

</style>

七页面设计

1 所有订单 OrderManager.vue

<template>
  <div>
    所有订单
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2 管理员管理 AdminManager.vue

<template>
  <div>管理员管理</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

3 角色管理 RoleManager.vue

<template>
  <div>角色管理</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

4 权限管理 PermissionManager.vue

<template>
  <div>权限管理</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

八二级路由配置

 * 一级路由:在项目中,用户可以直接看到的页面,比如 登录 注册 首页
 *    http:127.0.0.1:8080/login
 *    http:127.0.0.1:8080/home
 * 二级路由:打开一个页面后,在这个页面的某个区域要进一步的显示其它组件的路由
 *    http:127.0.0.1:8080/home/order
 *    http:127.0.0.1:8080/home/admin
 *    http:127.0.0.1:8080/home/role
 *    http:127.0.0.1:8080/home/permission
 *    
 *  二级路由的配置
 *    1.在某个一级路由children里面去配置二级路由对象
 *        children是一个数组
 *        二级路由的路径前面不要加 /
 *    2.配置路由的出口

const routes = [
  {
    path:"/",
    redirect:"/home"
  },
  {
    path:"/login",
    name:"登录",
    component:Login
  },
  {
    path:"/home",
    name:"首页",
    component:Home,
    children:[
      {
        path:"order",
        name:"所有订单",
        component:OrderManager
      },
      {
        path:"admin",
        name:"管理员管理",
        component:AdminManager
      },
      {
        path:"role",
        name:"角色管理",
        component:RoleManager
      },
      {
        path:"permission",
        name:"权限管理",
        component:PermissionManager
      },
      {
        path:"*",
        name:"notFind",
        component:NotFind
      }
    ]
  }

]

总结

(1)

children：代表配置二级路由

二级路由的路径不能添加/

(2)配置路由渲染出口

你必须告诉路由映射文件，我们的组件在哪个地方渲染。

Home是父级组件，渲染出口一定在这个组件内部。

    <!-- 内容区域 -->
    <div class="content">
        <!-- 配置二级路由的出口 -->
        <router-view></router-view>
    </div>

(3)路由切换效果

你们可以在浏览器里面手动输入二级路由地址，实现切换效果

/home/ -->主页
/home/order -->用户页面
/home/adminManager --->订单页面

九路由 404界面配置

     {
        path:"*",
        name:"notFind",
        component:NotFind
      }

十路由跳转

1 标签跳转

<router-link to="order">所有订单</router-link>

2 js跳转

this.$router.push("/home")
this.$router.replace("/home")

push：跳转到指定路由地址，会记录跳转路径，返回可以直接返回原来路径

replace：跳转指定路由地址，不记录跳转路径，返回默认会从历史记录找最近的地址，返回地址

登录成功一般replace。一般不允许再回退到登录

注销一般也用replace，不允许他再返回主页

扩展

//后退
this.$router.go(1)

金霖海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day06-Vue全家桶项目

Vue是SPA(Single Page Application)开发模式，整个项目只有一个HTML文件，在这个文件中通过引入不同的组件，实现页面显示效果不一样。Vue开发的是单页应用,我们以组件为项目的最小开发单元,当页面上显示什么样的组件,就会呈现什么样的效果当组件开发完成后,通过路径来实现页面上组件的切换路由就是我们要输入到浏览器URL上的地址在vue项目中,把路由跟对应的组件进行关联,当路由发生改变的时候,在页面上显示对应的组件。
复制链接

扫一扫