使用idea开发vue初始步骤

																																																																																																																																																																																																																																							目标，写一个简单的前端。

当前时间是2020/12/08，最近几年前后端发展的有点快，开发工具使用的是idea。
idea前后端都可以用。
这个工具很方便，作为从c++转过来的，发现网站相关的东西有点多，不记录一下的话过一段时间就忘记了。

idea配置vue设置

也就是在idea中的插件中添加vue的插件，这样就能创建vue的工程了

idea 2020.3把创建vue工程的地方，改了未知

添加element-ui的支持

使用element-ui是因为现在（2020/12这段时间）流行的就是element-ui。
1，在vue项目的控制台中执行

npm install --save element-ui

vue也是把element-ui当成一个组件来加载的。
参考
修改项目的main.js文件，添加两行

这样就能在项目中使用element-ui了

创建一个按钮点击

在HelloWorld.vue中创建一个按钮

 <el-button type="primary">这个按钮</el-button>

添加按钮事件绑定

添加一个网络请求

方法1 vue-resource 插件方式

这种方法一般不推荐用，只是让你知道有这个东西的存在
参考

方法2 axios插件方式

我们用的是这种方式
参考

安装

npm install --save axios

导入

使用

封装一下

一般来说我们会把axios给封装一下，至于怎么封装。看情况
参考

网页间跳转

打开页面

参考:Window open() 方法

window.open("www.baidu.com",'_blank');//打开一个新的窗口
window.open("https://www.baidu.com",'_self');//在当前窗口打开这个页面

vue 路由简介

简单用法参考
里面有个很简单的demo，说的很明确。
注: Vue-Router 是为了单页面应用而设计的。

Vue组件的定义

组件定义的方式有点多，这点很懵逼。
参考:vue 组件-组件定义的4种方式

    // cp1组件
    const cp1 = {
        data: function() {
            return {
                name: "CP1"
            };
        },
        mounted() {
            console.log("cp1 mounted");
        },

        destroyed() {
            console.log("cp1 destroyed");
        },
        template: "<p>{{ name }}</p>"
    };
    //cp2的定义同上
        // 指定路由
    const routes = [
        {
            path: "/cp1",
            component: cp1
        },
        {
            path: "/cp2",
            component: cp2
        }
    ];
    
    // 生成VueRouter实例
    const router = new VueRouter({ routes: routes });
    // 在vue中加载vuerouter
    var app = new Vue({
        router: router,
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    });

通过文件的方式定义组件

参考:Vue组件定义
1，定义个vue文件

<template>
    <div>
        {{msg}}
        <div>
            会话状态
            <el-switch
                v-model="session_switch_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switch_state_changed">
            </el-switch>
        </div>

        <div class="wrap">
            首次<div>访客第一次发起对话</div>
        </div>
        <div class="wrap">
            超时<div class="wrap">访客发送消息后，客服
            <el-input v-model="session_timeout_minutes" @change="session_timeout_minutes_changed">
            </el-input>分钟未回复</div>
        </div>

    </div>
</template>

<script>
import {getTiktokSessionSwitchState,toSetTiktokSessionTimeoutMinutes} from "@/api/zhangsanMode";
export default {
    name: "dialogueRule",
    data() {
        return {
            msg: '这个是' + this.$options.name + '模板页',
            session_switch_state: false,
            session_timeout_minutes: 5,
        }
    },
    methods:{
        switch_state_changed: function (newValue) {
            //***
            });
        },
        session_timeout_minutes_changed:function (newValue) {
            console.log("robin:session_timeout_minutes_changed:",newValue);
            let parms = {"session_timeout_minutes":newValue};
            toSetTiktokSessionTimeoutMinutes(parms).then((res)=>{
                if (0 === res.state){
                    console.log("robin:set switch state success");
                }
            });

        },
        initPageValue: function () {
            let parms = {};
            getTiktokSessionSwitchState(parms).then((res)=>{
                if (0 === res.state) {
                    this.session_switch_state = res.data.session_switch_state;
                }
            });
            getTiktokSessionTimeoutMinutes(parms).then((res)=>{
               if (0=== res.state){
                   this.session_timeout_minutes = res.data.session_timeout_minutes;
               }
            });
        },


    },
    mounted() {
        //页面加载完成后就执行
        this.initPageValue();
    },

}
</script>

<style scoped>
.wrap{
    display: flex;
    justify-content: flex-start;
}
</style>

结构大体就是这个样子，使用idea创建vue文件的时候，自动会创建这个结构
不过创建的结构有点简单

<template>
  <div>
    
  </div>
</template>

<script>
export default {
  name: "testVueCom",
  data(){
    return{
      msg:'这个是xx页面',
      myschool: 'xiaoxue',
      bOk: false,
    }
  },
  methods:{
    myFunc1: function (newVlue) {
      console.log(newVlue),
      console.log(newVlue+1)
    },
    myFun2:function (newVlue2) {
      //
      console.log(newVlue2)
    },
    initPageValue: function () {
      console.log("~~initPageValue~~")
    }
  },
  mounted() {
    //页面加载完成后就执行
    this.initPageValue();
  }

}
</script>
/*这里是样式相关的*/
<style scoped>
.wrap{
    display: flex;
    justify-content: flex-start;
}
</style>

这里面每一个字段都有自己的含义。
在路由那里

{
    path: 'dialoguePage',
    meta: {
        name: '对话页面'
    },
    component: () => import("@/views/xxx"),
}

简单的例子

参考：简单的例子

一点语法区别：

<script>
import Header from './Header.vue';//引入头部组件
export default {
    data(){
        return{
            msg:'我是一个新闻组件'
        }
    },
    components:{
        'v-header':Header,
    }
}
</script>

也可以不重命名组件名

 components:{
        Header,
    }

只是在使用那里

<template>
    <div>
        <v-header></v-header>
        <h2>这是一个新闻组件</h2>
        <ul>
            <li>aaaaaa</li>
            <li>bbbbb</li>
            <li>cccccc</li>
            <li>ddddd</li>
        </ul>

    </div>
</template>

组件之间传递参数

网上文章很多，我就不写了