Vue开发简要笔记

Vue开发简要笔记

项目重要结构

    src
        component
            Aside.vue
            Header.vue
        router
            index.js
        utils
            request.js
        views
            Index.vue
            Main.vue
            UserManage.vue
            Login.vue
        App.vue
        main.js

重要代码

Aside.vue

<template>
<el-aside width="200px">
          <el-menu
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b" router>    <!--router，详细见elementui中NavMenu-->
            <el-menu-item  class="el-icon-caret-right" index="/main">--首页--</el-menu-item><!--index里面的是跳转的组件的path的路径-->
            <el-menu-item  class="el-icon-caret-right" index="/userManage">用户管理</el-menu-item>
      </el-menu>
      </el-aside>
</template>

<script>
export default {
    name:'Aside',

    data() {
        return {
          }
        }
      }    
</script>

<style>
.el-aside{

background-color: rgb(84,93,100);
height: 100vh
}
</style>

Header.vue

<template>  
    <div style="display: flex;line-height: 60px;">
        <div style="margin-top: 8px;">
            <i  style="font-size: 20px;cursor: pointer;" ></i>
        </div>
        <div style="flex: 1;text-align: center;font-size: 34px;">
            <span>Blog</span>
        </div>
        <el-dropdown>
            <span><!--{{user.name}}-->admin_CCL</span><i class="el-icon-arrow-down" style="margin-left: 5px" ></i>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    name: 'Header',
    data() {
        return {
            
        }
    },
    computed: {       
    },
    methods:{
            toUser(){
                console.log('to_user')
                this.$router.push("/Home")  //此处个人中心Home.vue暂时还没创建
            },
            logout(){
                //控制台输出logout
                console.log('logout')
                //this.$confirm
                this.$confirm('您确定要退出登录吗?', '提示', {
                    confirmButtonText: '确定',  //确认按钮的文字显示
                    type: 'warning',
                    center: true, //文字居中显示
                })
                //为什么有.then方法，是promise对象吗？
                    .then(() => {
                        this.$message({
                            type:'success',
                            message:'退出登录成功'
                        })
                        this.$router.push("/")
                        sessionStorage.clear()
                    })
                    .catch(() => {
                        this.$message({
                            type:'info',
                            message:'已取消退出登录'
                        })
                    })
            }
            },
    mounted() {      
    },
    components: {      
    }
}
</script>
<style>
.el-header{
    background-color: rgba(44, 43, 43, 0.42);
    color: #fff;
    font-size: 30px;
    height: 52px;
    margin: 0 auto;
}
</style>

router——index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

//Vue.use函数的作用，是安装插件，把VueRouter安装为Vue项目的插件
Vue.use(VueRouter)
//在vue项目中，要想把路由用起来，必须把路由实例对象，进行挂载，即在main.js中进行挂载；
//先进行导入，然后建立对象，属性名和属性值一致为router：router，可以简写成router

const routes = [
  {
    path: '/',  
    redirect:'/main'
  },
  {
    path:'/index',
    name:'Index',
    component:() => import('../views/Index.vue'),
    children: [
      {
        path: '/main',
        component: () => import('../views/Main.vue'),
        name: 'Main',
      },
      {
        path:'/userManage',
        name:'UserManage',
        component:() => import('../views/UserManage.vue')
      },
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue'),
  },

]
//创建路由的实例对象
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

request.js

import axios from 'axios'
//这个文件是对axios的封装

const request = axios.create({
    //通用请求的地址前缀
    baseURL: 'http://localhost:9090/',
    timeout: 15000      //超时时间，15秒
})

//添加请求拦截器
request.interceptors.request.use(function (config){
    //在发送请求之前做些什么
    return config;
},function(error){
    //对请求错误做些什么
    return Promise.reject(error);
});
//添加响应拦截器
request.interceptors.response.use(function (response){
    //对响应数据做些什么
    return response;
},function(error){
    //对响应错误做些什么
    return Promise.reject(error);    
})

//暴露
export default request;

Index.vue

<template>
    <!--首页-->
  <el-container class="home-container">
    <el-header style="width: 100%;"><Header></Header></el-header>
    <!--主体区域-->
    <el-container>
      <!--侧边栏-->
      <el-aside>
        <Aside></Aside>
      </el-aside>    
      <!--右侧内容主体-->
      <el-main>
        <router-view></router-view> <!--当地址符合路由要求的时候，会把路由的组件在此处呈现-->
      </el-main>
    </el-container>
  </el-container>
</template> 
<script>
import Aside from '../components/Aside.vue'
import Header from '../components/Header.vue'

export default {
    name:"Index",
    components: { Aside,Header  },
  
      }      
</script>
<style>
.home-container{
    height: 100vh;
}
.el-aside{
    background-color: rgb(84,93,100)   
}
.head-div{
    display: flex;
    align-items: center;
}
</style>

main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import './assets/global.css'
import request from './utils/request';
//在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做index.js的文件

//在main.js入口文件中对axios进行全局配置
//第一步：导入包
import axios from 'axios'
//第二步：挂载到vue原型对象上，这样，每个组件都可以通过this访问到$http，从而发起axios请求
Vue.prototype.request = request


Vue.config.productionTip = false
Vue.use(ElementUI);

//创建vue的实例对象
new Vue({
  //属性名和属性值一致，简写成router，
  router,
  //把render函数指定的组件。渲染到#app中
  render: h => h(App)
}).$mount('#app')
//.$mount()的作用和el表达式时一样的，目的是将render中的组件渲染到#app的地方，mount是挂载的意思

App.vue

App.vue是项目的主组件，页面入口文件 ，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>