IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向-CFANZ编程社区

在这里插入图片描述

Vue.js概述

MVVM模型

在这里插入图片描述

Hello Vue

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../sources/vue.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <h1>{{message}}</h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定元素
        //Model：数据
        data:{
            message:"Hello，Vue!"
        }
    });
</script>
</body>
</html>

缩写 v-bind & v-on

Vue的7个属性

双向数据绑定

组件

在这里插入图片描述

<!--view层 模板-->
<div id="app">

<!--组件：传递给组件中的值；只能通过props参数接受-->
    <wei_shuo v-for="item in items" v-bind:wei="item"></wei_shuo>

</div>

<script>

    <!--定义一个Vue组件component-->
    Vue.component("wei_shuo", {
        //接受参数
        props:['wei'],
        //模板
        template: '<li>{{wei}}</li>'
    });

    var vm = new Vue({
        el: "#app",  //绑定元素
        //Model：数据
        data: {
            items: ["Java","Linux","前端","后端"]
        }
    });
</script>

Axios异步通讯

背景

Vue声明周期

在这里插入图片描述

声明周期钩子函数

内容分发（Slot插槽）

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../sources/vue.js"></script>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title1"></todo-title>
        <todo-items slot="todo-items" v-for="item1 in todoItems" :item="item1"></todo-items>
    </todo>
</div>
<script>

    <!--定义插槽-->
    Vue.component("todo", {
        template:
            '<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '<slot name="todo-items"></slot>' +
            '</ul>' +
            '</div>'
    });
    Vue.component("todo-title",{
        props:['title'],
       template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data:{
            title1:"wei_shou列表",
            todoItems:['学习Java','学习Linux','学习Vue']
        }
    })
</script>
</body>
</html>

自定义事件（$emit）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../sources/vue.js"></script>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title1"></todo-title>
        <todo-items slot="todo-items" v-for="(item1,index) in todoItems" :item="item1" v-bind:index="index"
                    v-on:remove="removeItems(index)" v-bind:key="index"></todo-items>
    </todo>
</div>
<script>

    <!--定义插槽-->
    Vue.component("todo", {
        template:
            '<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '<slot name="todo-items"></slot>' +
            '</ul>' +
            '</div>'
    });
    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item', 'index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                //自定义事件分发
                //this.$emit('自定义事件名',参数)
                this.$emit('remove', index)
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title1: "wei_shou列表",
            todoItems: ['学习Java', '学习Linux', '学习Vue'],
            removeItems: function (index) {
                console.log("删除" + this.todoItems[index] + "OK")
                this.todoItems.splice(index, 1);    //一次删除一个元素
            }
        }
    })
</script>
</body>
</html>

vue-cli项目

初始化运行

IDEA搭建vue-cli项目

Webpack学习

安装Webpack

在这里插入图片描述

测试安装成功

在这里插入图片描述

配置

webpack使用

vue-router路由

安装vue-router

测试

vue-router使用

创建公共组件目录components

创建存放路由的文件夹router

配置路由

使用路由

vue-router使用流程

结果测试

Axios

安装

$ npm install axios

Vue+ElementUI

创建工程

项目搭建

在这里插入图片描述

排错分析

排错一

在这里插入图片描述

排错二

在这里插入图片描述

Module build failed: Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.

排错三

在这里插入图片描述

Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)

在这里插入图片描述

排错四

在这里插入图片描述

"export 'default' (imported as 'Router') was not found in 'vue-router'

排错总结

运行项目

vue项目目录分析

npm命令解析

路由嵌套

/user/johnny/profile                     /user/johnny/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

项目结构

在这里插入图片描述

路由模式

export default new Router({
  mode:'history',
  routes: [
  ]
});

参数传递&重定向

参数传递

重定向

//导出默认接口路由
export default new Router({
  mode:'history',
  routes: [
    //重定向
    {
      path:'/goHome',
      redirect:'/main'	//重定向路径
    }
  ]
});

404页面

路由钩子&异步请求

路由钩子

<script>
export default {
  //进入路由之前执行
  beforeRouteEnter:(to,from,next)=>{
    console.log("STARE");
    next();
  },
  //进入路由之后执行
  beforeRouteLeave:(to,from,next)=>{
    console.log("END");
    next();
  }
}
</script>

异步请求

Vue工程化项目目录结构

在这里插入图片描述