const {resolve} = require('path'); // 使用 nodejs 来定位项目目录

// 所有的配置都是可选的
module.exports = {
    // 以哪个文件作为入口开始打包（默认 ./src/index.js）
    entry: './src/index.js',
    // 打包后的资源输出到哪里以及如何命名
    output: {
        filename: "build.js", // 打包后的文件名
        path: resolve(__dirname,'build') // 保存的目录
    },
    // 配置处理非 js 资源
    module: {
        rules: []
    },
    // 插件
    plugins: [],
    // 指示 webpack 使用相应模式的配置（development开发，production生产）
    mode: 'production', 
}

entry: ['./src/index.js','./src/main.js'],
output: {
    filename: "build.js", // 打包后的文件名
    path: resolve(__dirname,'build') // 保存的目录
},

entry: {
    one: './src/index.js',
    two: './src/main.js'
},
output: {
    filename: "[name].js", // 对象的 key 为文件名输出
    path: resolve(__dirname,'build') // 保存的目录
},

entry: {
    one: './src/index.js',
    two: ['./src/index.js','./src/main.js'],
},
output: {
    filename: "[name].js", // 对象的 key 为文件名输出
    path: resolve(__dirname,'build') // 保存的目录
},

const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入 html-webpack-plugin

// 在 module.exports 中配置 plugins
plugins: [
    // 使用插件，参数为空时默认将生成一个空的模板 index.html 打包的 js/css 在此文件的 body 中引入
    new htmlWebpackPlugin(),
    // 打包多个 html 可配置多个
    new htmlWebpackPlugin({
        // 指定 html 模板最后打包 js/css 文件在此模板 body 最后引入
        template: './src/index.html',
        filename: 'main.html', // 打包后的文件名
        chunks: ['one','two'], // 此 html 中需要引入的 js,entry 配置的 key
        minify: {
            collapseWhitespace: true, // 移除空格
            removeComments: true // 移除注释
        }
    }),
],

require('./style.css'); // 在 js 文件中引入 css

// 配置文件中配置
module: {
    rules: [{
        test: /\.css$/, // 规则
        // 遵循从右到左从下到上，因此注意'style-loader','css-loader'的顺序
        use: ['style-loader','css-loader'],
    }]
},

var o = ()=>{name:'hello',num:1};
console.log(o()); // 报错：VM387:1 Uncaught SyntaxError: Unexpected token ':'

var o = ()=>{return {name:'hello'}}; // 使用 return 返回对象
console.log(o); // ()=>{return {name:'hello'}}
var o = ()=>({name:'hello',num:1}); // 使用括号包裹对象
console.log(o()); // {name: 'hello', num: 1}

var array = [2,3,4];
array.reduce((newValue,nextValue)=>{
    console.log(newValue,nextValue); // 0 2, 2 3, 5 4, 最后返回值为 9
    return newValue+nextValue;
}, 0); // 参2 指定 函数参1 初始化值
array.reduce((newValue,nextValue)=>{
    console.log(newValue,nextValue); // 2 3, 5 4, 最后返回值为 9
    return newValue+nextValue;
}); // 注意 未指定参2 时循环次数少 1

let a = 1;
function b(){
    console.log("js1.js b()");
}
export {a,b}; // 集体导出

export let a = 1; // 单个导出
// 一个 js 只能有一个 export default，可以在我们导入时自定义名字
export default function (){
    console.log("js2.js default");
}

import {a as a1,b} from "./js1.js"; // 指定导入(as 重命名)
// import * as o from "./js1.js"; // 导入所有，并都放入 o 对象中
import {a} from "./js2.js"; // 必须使用{}，否则 a 为 default 的导出
import def from "./js2.js"; // 导入 default 的方法

console.log(a1,a);
b();
def();
// o.b();

/* promise 承诺 resolve 解决 reject 拒绝 then 然后 catch 抓住 */
new Promise((resolve,reject)=>{
    console.log("执行方法 promise1");
    // 表示执行成功，参数为你需要返回的值（可以是任意类型）
    resolve("方法 promise1 执行完成");
    // return Promise.resolve(""); // 作用同上
    // return ""; // 作用同上
    // 表示执行错误，resolve 与 reject 作用与 return 类似会阻断方法的执行 
    reject("方法 pormise1 执行错误");
    // return Promise.reject(""); // 作用同上
}).then(
    res=>{
        console.log(res);
        return new Promise((resolve,reject)=>{
            console.log("执行方法 promise2");
            reject("方法 promise2 执行错误");
        });
    },err=>{
        console.log(err);
    }).then(res=>{},err=>{
    // 此处执行 promise1 then 中返回的 promise2 then
    console.log(err);
}).catch(err=>{
    /* 上面有错误发生并未处理时在此处统一处理 */
    console.log(err);
});

Promise.all([
    new Promise(resolve=>{
        resolve("promise1 执行完成");
    }),
    new Promise(resolve=>{
        resolve("promise2 执行完成");
    })
]).then(res=>console.log(res));
// ['promise1 执行完成', 'promise2 执行完成']

// 默认 get 请求
axios('/api').then(res=>{
    console.log(res);
});

// 设置参数
axios({
    rul: '/api',
    method: "POST", // 指定请求方式
    params: { // 注意此参数是将值添加到 URL 路径中
        name: 'ruoxijun',
        age: 18,
    },
    data: { // 值存储在请求体中传递
        name: 'ruoxijun',
        age: 18,
    }
}).then(res=>console.log(res))
    .catch(err=>console.log(err));

axios.get('/api',{
    params: {
        name: 'ruoxijun',
        age: 18,
    },
}).then(res=>console.log(res));
// 如果 post 参数2为字符串，会拼接到 URL 中作为参数。axios.get 不支持
axios.post('/api','name=ruoxijun&age=18').then(res=>console.log(res));

axios.all([
    axios.get('/api'),
    axios.get('/api'),
]).then(res=>console.log(res)) // 请求结果集中到数组返回
    .catch(err=>console.log(err));

axios.all([
    axios.get('/api'),
    axios.get('/api'),
]).then(
    // 将请求结果作为方法参数
    axios.spread((res1,res2)=>{
        console.log(res1,res2);
    })
).catch(err=>console.log(err));

// 全局配置
axios.defaults.baseURL = "http://localhost"; // 请求路径前缀
axios.defaults.timeout = 5000; // 请求超时时间

// 封装（每一个都可以认为是一个单独的 axios）
let git = axios.create({
    baseurl: "https://github.com/",
    timeout: 5000,
});
let local = axios.create({
    baseurl: "https://localhost",
    timeout: 5000,
});

// 使用
git.get("/api").then(res=>console.log(res));

// 请求拦截器
axios.interceptors.request.use(config=>{
    return config; // 放行
},error=>{
    return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(config=>{
    return config; // 放行
},error=>{
    return Promise.reject(error);
});

/* // vue2 创建实例与挂载元素
const app = new vue({
    el: '#app',
    data: {
        message: 'hello world'
    }
}); */

// vue3 创建实例与挂载元素
const app = {
    data() {
        return {
            message: 'hello world'
        }
    },
};
const vm = Vue.createApp(app).mount("#app");
// 访问属性
vm.message = 'hello'; // 可直接访问（包括方法）
vm.$data.message = 'world';

module.exports = {
    // 设置项目编译后的文件夹（vue-cli 提供的配置方法）
    outputDir: 'build',
    configureWebpack: { // 使用 webpack 原生方法配置
        plugins: []
    }
}

 // 绑定的样式与原有的样式会根据先后顺序以及优先级关系覆盖（如下宽200被宽100覆盖）
<div :style="['font-size:22px','width:200px',fontcolor,styles]"
    style="width:100px;" > div 1 </div>
<div :style="{color:'red','font-size':'18px'}"> div 3 </div>
/* javascript */
data() {
    return {
        fontcolor: 'color:red', // 字体颜色
        styles: {backgroundColor: '#123'}, // 背景
    }
}

<div :class="one"> div 3 </div>
<div :class="{one:isone,istwo}"> div 4 </div>
/* javascript */
data() {
    return {
        one: 'one',
        isone: true,
        istwo: true
    }
}
/* style */    
.one {color: blue;}
.istwo {font-size:18px;}

data() {
  return {
    name: 'hello',
    msg: 'world',
  }
},
methods: {
  getTitle() {
    return this.name + this.msg;
  },
  setTitle() {
    // return ’hi‘ set 方法会返回设置的值
    this.title2='hi';
    return this.title2;
  }
},
computed: {
  title() { // 为方法是默认为计算属性的 get 方法
    return this.name + this.msg;
  },
  title2:{ // 使用对象为属性添加 set、get 方法
    get() {
      return this.name + this.msg;
    },
    set(newVla) {
      this.msg = newVla;
    }
  }
}

watch:{ // 属性监听
    message(newVal, oldVal){}, // 监听 data 中 message 的变化
    obj: { // 监听 data 中 obj 属性的变化
        handler(newVal, oldVal){}, // 触发方法
        immediate: true, // 初始化是否执行一次
        deep: true, // 开启深度监听
    }
}

props: {
  // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
  propA: Number, // 给组件定义了一个 prop-a 属性
  // 多个可能的类型
  propB: [String, Number],
  // 必填的字符串
  propC: {
    type: String,
    required: true
  },
  // 带有默认值的数字
  propD: {
    type: Number,
    default: 100
  },
  // 带有默认值的对象
  propE: {
    type: Object,
    default: { message: 'hello' },
    // 在 vue2 时对象或数组默认值必须从一个工厂函数获取
    // default: function () {
    //   return { message: 'hello' }
    // }
  },
  // 自定义验证函数
  propF: {
    validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

beforeCreate() {
  console.log("实例刚刚被创建");
},
created() {
  console.log("实例已经创建完成");
},
beforeMount() {
  console.log("模板编译之前");
},
mounted() {
  console.log("模板编译完成");
},
beforeUpdate() {
  console.log("数据更新之前");
},
updated() {
  console.log("数据更新完成");
},
activated() {
  console.log("keep-alive 缓存的组件激活时");
},
deactivated() {
  console.log("keep-alive 缓存的组件停用时");
},
beforeUnmount() {
  console.log("实例销毁之前");
},
unmounted() {
  console.log("实例销毁完成");
}

this.$nextTick(function() {
    // 操作更新后的 Dom
})

// 在需要 axios 的组件中导入
import axios from "axios";

import axios from 'axios' // 引入 axios

// 创建 axios 实例
const request = axios.create({
    // config
})
/* 创建其它实例或实例配置等... */
// 导出需要使用的实例或者方法等...
export default request

import router from './router'
createApp(App).use(router).mount('#app')

import { createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL), // 历史模式
  history: createWebHashHistory(process.env.BASE_URL), // Hash 模式（默认）
  routes
})

{
  path: '/',
  name: 'home',
  component: ()=> import('../views/HomeView.vue'),
},{
  path: '/index',
  // alias: '/home', // 别名
  alias: ['/index.html','/home'],
  // alias: ['/home:id'] // 当此路径有使用 params 传参时，别名也需要将参数带上（params 传参下方有介绍）

  redirect: '/', // 重定向
  // redirect: {name:'home'}, // 也可以使用 path 路径方式
  /* 函数返回一个对象，函数参数就是 $route
  redirect: route=>{
    return {path:'/',query:{id:route.params.id}} // query 传参下方有介绍
  } */
},

{
  path: '/',
  name: 'home',
  // component: ()=> import('../views/HomeView.vue'),
  components: {
    default: ()=> import('../views/HomeView.vue'), // 没有对应命名视图时默认显示组件
    home: ()=> import('../views/HomeView.vue'), // name 为 home 的视图展示该组件
    about: ()=> import('../views/AboutView.vue'),
  }
},

{
  path: '/about',
  component: () => import('../views/AboutView.vue'),
  // redirect: '/about/Children1', // 重定向
  children: [ // children 数组定义子路由
    { 
      path:'', // 相当于设置 '/about' 路径时默认显示的组件（优先与重定向）
      component: ()=> import('../components/Children1.vue')
    },{
      path: 'children1', // 子路由路径不需要 '/'
      component: ()=> import('../components/Children1.vue')
    },{
      path: 'children2',
      component: ()=> import('../components/Children2.vue')
    }
  ]
},

{
  path: 'children1/:msg',
  component: ()=> import('../components/Children1.vue')
},{
  path: 'children2',
  name: 'children2', // 定义路由名
  component: ()=> import('../components/Children2.vue')
}

{
  path: '/user/:id', // 定义一个路径参数变量名为 id
  name: 'user',
  props: true, // 使用 props 传参
  component: ()=> import('../views/UserView.vue'),
}

{
  path: '/',
  component: ()=> import('../views/HomeView.vue'),
  meta: { // 路由原信息（可以存储任意信息）
    title: '首页',
  }
}

// 全局前置守卫，to 准备跳转的路由，from 当前路由（next 参数3支持但不建议使用）
router.beforeEach((to, from)=>{
  // path 路由路径，fullPath 完整路径（包括 query 参数） 
  console.log(to.path,from.fullPath);
  // return '/login'; // 重定向
  // return {name: "Login"};
  // return false; // 取消导航
  /* 注意添加 next 参数后必须由 next 控制跳转，
  return 将不起作用，且不 next() 时也不能默认跳转下一页面 */
});

// 全局解析守卫（每次导航时都会触发）
router.beforeResolve(to=> {
  // return false;
});

// 全局后置钩子，to 调转到的路由，from 之前的路由，failure 导航是否成功（不支持 next 参数）
router.afterEach((to, from, failure)=>{
  // 将页面标题更改为 meta.title 属性的值
  document.title = to.meta.title;
});

{
  path: '/user/:id',
  component: ()=> import('../views/UserView.vue'),
  // 路由守卫，同一路由只有 params、query 改变时不会触发
  beforeEnter: (to, from) => {
    // return false
  },
  // 也可以是函数数组
  // beforeEnter: [removeQueryParams, removeHash],
}

<script> 
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this`，因为当守卫执行时，组件实例还没被创建
    // 可以使用 next 的 vm 参数方位实例（仅 beforeRouteEnter 可使用）
    next(vm => {
      // 通过 `vm` 访问组件实例
    });
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
  },
  beforeRouteLeave(to, from) {
    // 在导航离开该组件的对应路由时调用
  },
}
</script>

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
});

import store from './store'
createApp(App).use(store).mount('#app'); // 注册 Vuex

export default createStore({
  state: {
    name: 'ruoxijun', // 这里声明了一个那么属性值
  },
})

/*********** Vuex 中 ************/
mutations: {
  /**
   * 默认会将 state 作为第一个参数传入你的方法中
   * 参数2来接收用户传入的数据（payload 官方称之为载荷，并表示其应该是一个对象）
   */
  setStateName(state, payload) {
    state.name = payload; // 修改状态
  },
}

/*********** 组件中 ************/
methods: {
  setStateName() {
    /**
      * 使用 commit 来修改 Vuex 状态
      * 参数1为在 mutations 中需要被调用的方法名
      * 参数2为你需要传递的参数值（有多个值需要传递时使用对象或数组）
      */
    this.$store.commit('setStateName',this.name);
  }
},

/*********** 组件中 ************/
this.$store.commit({
    type: 'setStateName', // 使用 type 属性指定方法名称
    name: this.name // 参数值（属性名可以自定义）
});

/*********** Vuex 中 ************/
setStateName(state, payload) {
    // 注意接收到的参数值作为对象在参2中
    state.name = payload.name;
},

getters: {
    // 默认会将 state、getters 分别传入参1、2中
    nameAndNum(state, getters){
        // 可以使用参2（getters）调用 getters 中的其它方法
        return state.name + state.loginUser.number;
    }
},

functionName(state, getters){
    // 返回带参的函数，调用时传入参数即可
    return parameter => {/* ... */};
}

actions: {
  // 参数1是 Vuex 上下文对象
  action1(context){
    setTimeout(()=>console.log(context),1500);
  },
  // 基本使用与 mutations 中类似（除参1不同）
  action2({state, commit, getters, dispatch}, payload){
    /* context 解构大概有这几个属性 */
    // state.name // 访问状态
    // commit('setStateName', payload) // 依然推荐使用 commit 方式修改数据
    // getters.nameAndNum // 访问 getters 属性
    // dispatch('action1', payload) // 调用 actions 中的其它方法
  }
},

const module1 = {
    state: ()=>{ // 与组件类似，子模块的state需要使用函数封装
        return {
            // $store.state.module1.module1Name 组件中访问方式
            module1Name: 'module1Name'
        }
    },
}

mutations: {
  // $store.commit('setName',payload) // 默认全局注册
  setName(state, payload){
    // state 只能访问子模块状态
    state.module1Name = payload;
  }
},
getters: {
  /**
   * @param state       默认子模块中的 state 只能访问子模块的状态
   * @param getters     只能访问模块的 getters
   * @param rootState   访问根模块的状态
   * @param rootGetters 访问根模块的 getters
   * 组件访问方式：$store.getters.getModule1Name // 默认全局
   */
  getModule1Name(state, getters, rootState, rootGetters){
    return module1Name + rootState.name; // 访问根组件的状态属性
  }
},
actions: {
  /**
   * actions 参1 context 中除根节点介绍过的属性外，
   * 还有 rootState、rootGetters 来访问根节点。
   * 组件访问方式：$store.dispatch("module1Actions", payload) // 默认全局
   */
  module1Actions({rootState, rootGetters}, payload){}
},
modules: { /* 嵌套子模块 */ }

const module1 = {
  namespaced: true, // 开启命名空间
  // 嵌套子模块
  modules: {
    myPage: { // 继承父模块的命名空间
      getters: {
        profile () {} // -> getters['module1/profile']
      }
    },
    posts: {
      namespaced: true, // 进一步嵌套命名空间
      getters: {
        popular () {} // -> getters['module1/posts/popular']
      }
    }
  }
}

$store.getters['module1/getModule1Name']
$store.commit('module1/setName', payload)
$store.dispatch("module1/setName", payload)

import { createStore } from 'vuex';

// Vuex 核心概念
import getters from './getters'; // 不需要 js 的后缀
import mutations from './mutations';
import actions from './actions';
// 模块（可以根据不同的模块来细分）
import module1 from './module/module1';

const state = {/* 状态 */}

export default createStore({
  state,
  getters,
  mutations,
  actions,
  modules: {
    module1,
  }
})

// Composition API 都必须导入才能使用
import { ref, reactive, toRef, toRefs, readonly, isRef, computed } from 'vue';

export default {
  setup() {
    let num = 1; // 基本类型
    
    // ref 为单个数据提供响应式代理
    const count = ref(0);
    // ref 定义的对象在 setup 中必须使用 value 访问或修改（视图中可以直接访问）
    count.value++;
    
    // reactive 只能为对象或数组提供响应式代理
    const user = reactive({ name:"hi", age:18 });
    user.age++; // 正常使用
    
    // toRef 从对象响应式数据中提取单个数据作为响应式数据
    const name = toRef(user,"name");
    name.value = "ha"; // user.name 或 name 改变双方都会发生改变
    
    // toRefs 对象响应式数据转普通对象，但属性只修改为响应式数据
    const { age } = toRefs(user); // age 为响应式数据
    
    // readonly 响应式数据类型转普通数据类型
    // const user2 = readonly(user);
    
    // isRef 判断某属性是否是响应式对象
    const userIsRef = isRef(user);
    
    // 定义方法
    let add = ()=> count.value++;
    
    /* 计算属性 */
    // let nameNum = computed(()=> user.name + count.value); // 返回一个不可修改的 ref （只有 get）
    let nameNum = computed({
      get: ()=> user.name + count.value,
      set: val=> user.name + count.value + val // 添加 set 方法后该属性可以修改
    });
    nameNum.value = 1; // 计算属性返回的是一个 ref 对象
    
    return {
      num, // 返回原生数据是无法响应式的改变的
      count, // 响应式数据
      // user, // 对象类型响应式数据
      ...toRefs(user), // 响应式对象解构为单个的响应式数据
      add, // 与 methods 中方法一样
      nameNum, // 暴露计算属性
    }
  },
}

watch(()=>{
    console.log("watch", count.value);
});
// watchEffect 只能默认监听方法中使用到的数据变化局限性大
const stop = watchEffect((oninvalidate)=>{
    console.log("watchEffect", count.value);
    oninvalidate(()=>{ // 回调函数
      console.log("before"); // 在上面代码之前执行
    });
},{ /* 可选配置参数与 watch 相同 */ });
stop(); // 返回的函数执行将停止监听

const a = ref(9);
// 监听 a 数据变化（注意这里不需要使用 value）
watch(a, (newV, oldV)=>{
    console.log("watch", count.value); // count 变化无影响
}, { immediate: true }); // 参数3 中的 immediate 默认为 false

// 监听多个属性时使用数组
watch([a,count],
    // 监听方法中，第一个数组为新值，第二个数组为旧值
    ([newA, newCount], [oldA, oldCount])=>{
        console.log("watch", newA, oldA, newCount, oldCount);
}, { immediate: true });