vue生命周期+npm webpack vue-cli+Vuex以及axios

去掉# 再new vue 添加 mode:history

vue生命周期简介

生命周期的钩子 LifeCycle hooks

上面已经能够清晰的看到vue2.0都包含了哪些生命周期的钩子函数~~

那么执行顺序以及什么时候执行，我们上代码来看~~~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

</head>
<body>
<div id="app">
    <p>{{message}}</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello gaoxin!!"
        },
        beforeCreate: function () {
            console.group("beforeCreate  创建实例之前===========");
            console.log("el: " + this.$el); // undefined
            console.log("data: " + this.$data); // undefined
            console.log("message: " + this.message);
        },
        created: function () {
            console.group("Created:  创建实例完成===========");
            console.log("el: " + this.$el); // undefined
            console.log("data: " + this.$data); // 已被初始化
            console.log("message: " + this.message); // 已被初始化
        },
        beforeMount: function () {
            console.group("beforeMount  挂载前状态==========");
            console.log("el: " + this.$el); // 已被初始化
            console.log("data: " + this.$data); // 已被初始化
            console.log("message: " + this.message); // 已被初始化
        },
        mounted: function () {
            console.group("Mounted  挂载结束状态=============");
            console.log("el: " + this.$el); // 已被初始化
            console.log("data: " + this.$data); // 已被初始化
            console.log("message: " + this.message); // 已被初始化
        },
        beforeUpdate: function () {
            console.group("beforeUpdate  更新前状态=========");
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
        },
        updated: function () {
            console.group("Updated  更新完成状态");
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
        },
        beforeDestroy: function () {
            console.group("beforeDestroy  实例销毁之前");
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
        },
        destroyed: function () {
            console.group("Destoryed  实例销毁之后");
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
        }

    })
</script>


</body>
</html>

生命周期钩子函数

create 和 mounted 相关

执行上面代码，可以看到：

　　beforecreated ：el 和 data 并未初始化

　　created：完成了data数据的初始化 el 没有

　　beforeMount：完成了el 和 data的初始化

　　mounted：完成了挂载

也就是说~挂载前的状态是虚拟DOM技术，先把坑站住了~挂载之后才真正的把值渲染进去~

update 相关

我们在浏览器console里执行命令：

　　app.message = "hello~"

我们就出发了update相关的钩子函数~也就是说data里的值被修改会出发update的操作~

destroy 相关

我们在浏览器console里执行命令：

　　app.$destroy();

触发了destroy相关的钩子函数，也就是说组件被销毁~

更改message的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~

Node.js npm

什么是Node.js 以及npm

简单的来说 Node.js 就是运行在服务端的JavaScript，基于Chrome V8 引擎的。

npm 是Node.js 的包管理工具。

npm的安装和更新

Node.js下载安装 Node.js 官网下载安装。npm自带的包管理工具。

查看安装版本信息：

　　-- node -v 查看Node.js 版本信息

　　-- npm -v 查看npm版本信息

更新npm到指定版本：

　　-- npm install npm@5.3.0 -g

　　-- npm install npm@latest -g 更新最新的稳定版本

npm 常用操作

之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，而且要管理版本。

有了npm，我们管理自己的依赖包以及版本更加简单。

到自己项目目录下，进行以下命令：

　　-- npm init -y 输入-y使用默认配置项生成package.json文件。

　　-- npm i jquery@0.0.0 简写install 为 i 下载依赖不写@ 默认最新版本

　　-- npm uninstall jquery 卸载依赖包

　　-- npm update jquery 更新依赖包

　　-- npm list 列出已安装的依赖

　　-- npm install webpack --D 保存为开发环境依赖

　　-- 老版本需要 --save 参数现在不需要了

我们的项目目录下会生成一个 node_modules 目录，我们用npm下的包会在这个目录下。

我们所有的依赖信息放在package.json文件中，包括我们所有的依赖以及版本。

如果我们删掉 node_modules目录，可以使用 npm i 来下载所有依赖。

npm 常用配置项

当我们用npm init 的时候用了参数 -y，如果不用-y我们可以进行一些配置。

在我们的package.json文件中有很多配置项

　　-- name 项目名字中间不能有空格只能用小写

　　-- version 项目版本

　　-- description 项目描述信息

　　-- main 项目的入口文件

　　-- scripts 指定命令的快捷方式 npm run test test是scripts里的键名值为具体命令

　　-- author 作者

　　-- license 许可证

　　-- dependencies 生成环境依赖的包以及版本信息

　　-- devDependencies 开发环境的依赖

webpack3

webpack是什么

webpack是一个模块打包器，它将根据模块的依赖关系进行静态分析，

然后将这些模块按照指定的规则生成静态资源。

那么，我们为什么要用这个东西呢~~因为前端的包袱太多，历史遗留问题太重~~~脑补吧......

安装和配置

webpack是跑在Node.js环境下的，所以确定自己有node环境。

安装方式：

　　-- npm install webpack -g 全局安装

　　-- webpack <要打包文件> <打包后文件> 全局这种方式进行打包

　　-- npm install webpack 在自己的项目下 npm init 后在下载webpack 这就是局部安装

　　-- node_modules/.bin/webpack <要打包文件> <打包后文件> 项目里要打包文件是入口文件

　　-- 路径太长太烦可以自定义命令在package.json 文件的 scripts下面自定义

entry 和 output

entry 入口文件 output 出口文件

上面我们自定义命令的时候命令太长了~~而且我们命令太多的时候我们需要每次都自定义多条命令~~

我们可以把命令写在webpack.config.js文件中~~

module.export = {
    // 所有的入口文件
    entry: {
         home: './main.js', 
         login: './login.js',
    }, 
    // 出口文件  
    output: {
         filename: '[name].bundle.js',
         path: __dirname + '/dist',
    }       
}
// backage.json  下的scripts
scripts: {
     "pack": "node_moudles/.bin/webpack --watch"
}

//  运行命令
npm  run pack

webpack.config.js

webpack4

webpack的新特性

1, webpack不在单独使用，需要webpack-cli

　　-- 全局安装 npm install webpack webpack-cli -g -D

　　-- 局部安装 npm install webpack webpack-cli -D

2, 增加了模式区分（development, production）

　　--webpack --mode development/production 进行模式切换

　　-- development 开发者模式打包默认不压缩代码

　　-- production 生产者模式上线时使用，压缩代码。默认是这个模式

3，固定入口目录为src，与入口默认文件index.js，打包后文件在新增的dist目录下

　　-- 当只有一个入口文件也就是src/index.js时，无需增加webpack.config.js

4，多入口以及多出口

entry: {
    // 多入口
    a: "./src/js/index.js",
    b: "./src/js/index2.js",
}
output: {
    // 多出口
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].bundle.js'
}

webpack.config.js　　

vue-cli

vue-cli是官方提供的快速构建这个单页面应用的脚手架。

根据官方文档中的构件流程：

　　-- 前提是已经安装了node.js 否则npm都用不了

　　-- 1，使用npm全局安装vue-cli

　　　　　　npm install -g vue-cli

　　-- 2, 安装完成后在自己的工作空间里

　　　　　　vue init webpack vue-demo

　　　　输入命令后进入安装阶段，需要用户输入一些信息这里省略了.....

　　-- 3，切换到我们的项目目录下

　　　　　　cd vue-demo

　　　　　　npm run dev

目录结构：

　　-- build 里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件

　　-- config 配置文件，执行文件需要的配置信息

　　-- src 资源文件所有的组件以及所有的图片都在这个文件夹下

　　-- node_modules 项目依赖包

　　-- static 静态资源

　　-- package.json 依赖包的json文件

其实这里面命令很多~我们在后续项目中应用到再说~~~

vue-cli配置JQuery、bootstrap

第一步下载安装

　　-- npm install jquery

　　-- npm install bootstrap

第二步修改build/webpack.base.conf.js

const webpack = require('webpack')
// 在module.exports里添加插件
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery",
      // Popper: ['popper.js', 'default']
    })
],
//  *******下面是如果手动下载bootstrap用的*******
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 如果是手动下载的bootstrap需要添加这个配置
      // 'assets': path.resolve(__dirname, '../src/assets'),
      // 'jquery': 'jquery/src/jquery'
    }
  },

修改配置文件

第三步修改主程序的js文件 main.js

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

main.js

可以用啦~~~~~

vue-cli 3.0

第一步下载vue-cli 3.0

　　-- npm install -g @vue/cli

　　-- 报错 npm error 可以运行下面命令

　　　　-- npm cache clean --force && npm cache verify

第二步创建项目

　　-- vue create xxxx

　　之后会出现很多选项，我们可以根据自己的习惯去选择~~

第三步目录结构以及配置文件

　　-- vue-cli3 目录更加简单

　　-- 我们手动在项目根目录下创建 vue.config.js 里面写vue的配置信息

vue-cli3 配置jQuery、bootstrap

　　-- 跟vue-cli2一样的配置，手动创建一个webpack.base.conf.js

Vuex简介

vuex是一个专门为Vue.js设计的集中式状态管理架构。

状态？我们把它理解为在data中需要共享给其他组件使用的部分。

Vuex和单纯的全局对象有以下不同：

1、Vuex 的状态存储是响应式的。当vue组件从store中读取状态的时候，

　　若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。

2、你不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的

　　提交(commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化，

　　从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。

安装使用vuex

　　-- npm install vuex

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import vuex from 'vuex'

Vue.use(vuex)

Vue.config.productionTip = false

const store = new vuex.Store({
    state: {
      show: false,
    }
});

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

vuex的使用一

// 为了方便维护，我们通常把在src下面新建一个store文件夹，
// 然后在里面新建一个index.js
import Vue from 'vue'
import Vue_x from "vuex"

Vue.use(Vue_x);

export default  new Vue_x.Store({
   state: {
      show: false,
    },
});
// 那么main.js要改成
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store"

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

vuex的使用二

State

简而言之~~state是保存我们data中需要共享的数据。

由于Vuex的存储是响应式的，从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态。

this.$store.state.count

// 创建一个组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count(){
      return this.$store.state.count
    }
  }
};

组件中获取vuex中状态

Getter

有时候我们需要从store中的state中派生出一些状态，例如对数据进行简单的计算。

并且很多组件都需要用到此方法，我们要么复制这个函数，要么抽取到一个公共函数，多处导入。

我们vuex提供了更加方便的方法，getter ，它就像计算属性一样，getter的返回值会根据它的依赖被

缓存起来，只有它的依赖发生改变时，才会重新计算。

Getter会接收state作为其第一个参数：

import Vue from 'vue'
import Vue_x from "vuex"

Vue.use(Vue_x);

export default  new Vue_x.Store({
   state: {
     count: 20,
   },
  // 通过 this.$store.getters.my_func
  getters: {
    my_func: function (state) {
      return state.count * 2
    }
  },

});

Getter使用

Getter也可以接收getters为第二个参数：

import Vue from 'vue'
import Vue_x from "vuex"

Vue.use(Vue_x);

export default  new Vue_x.Store({
   state: {
     count: 20,
   },
  // 通过 this.$store.getters.my_func
  getters: {
    my_func: function (state) {
      return state.count * 2
    },
    // 通过 this.$store.getters.my_func_count
    my_func_count: function (state, getters) {
      return getters.my_func.length
    }
  },

});

Getter使用

Mutation

更改Vuex中的store中的状态的唯一方法是提交mutation。

每个mutation都有一个字符串的事件类型(type)，和一个回调函数handler。

也就是说我们要触发mutation中定义的方法(type)，然后才会执行这个方法(handler)。

这个方法就是我们更改状态的地方，它会接收state为第一个参数，后面接收其他参数：

import Vue from 'vue'
import Vue_x from "vuex"

Vue.use(Vue_x);

export default  new Vue_x.Store({
   state: {
     count: 20,
   },
  // 需要通过 this.$store.commit('increment', 10)
  mutations: {
     increment (state, n) {
       // 变更状态
       state.count += n
     }
  }

});

Mutation基本使用

Mutation需要遵守Vue的响应规则

既然vuex中的store中的状态是响应式的，那么当我们状态变更时，监视状态的vue组件也会更新。

这就意味着vuex中的mutation也需要与使用vue一样遵守一些注意事项：

　　-- 1，最好提前在你的store中初始化好所有的所需要的属性

　　-- 2，当对象需要添加属性时，你应该使用

　　　　　　-- Vue.set(obj, 'newProp', 123)

　　　　　　-- 以新对象代替老对象 state.obj = { ...state.obj, newProp: 123}

axios的简单使用

基于Promise的HTTP请求客户端，可以同时在浏览器和node.js使用。

使用npm安装axios

　　-- npm install axios -D

基本的配置

// main.js
import axios from "axios"

Vue.prototype.$axios = axios

// 组件中
methods: {
     init () {
        this.$axios({
             method: "get",
             url: "/user"
        })
    },
};

axios的基本配置

基本的使用

test(){
          this.$axios.get(this.$store.state.apiList.course,{
            params: {
              id: 123,
            }
          }).then(function (response) {
            // 请求成功回调函数
          }).catch(function (response) {
            // 请求失败的回调函数
          })
}

get请求

test(){
          this.$axios.post(this.$store.state.apiList.course,{
              course_title: "Python",
              course_price: "19.88"
          }).then(function (response) {
            // 请求成功回调函数
          }).catch(function (response) {
            // 请求失败的回调函数
          })
}

post请求

function getCourse(){
          return this.$axios.get('/course/12')
        }
function getCourse_all() {
          return this.$axios.get('/course')
        }
this.$axios.all([getCourse_all(),getCourse()])
          .then().catch()

发送多个并发请求

methods: {
          init(){
            var that = this
            this.$axios.request({
              url: that.$store.state.apiList.course,
              method: 'get'
            }).then(function (data) {
              if (data.status === 200){
                  that.courseList = data.data
              }
            }).catch(function (reason) {
              console.log(reason)
            })
          }
},

axios.request 本人喜欢的

posted on 2021-01-31 15:26 必须登录阅读(92) 评论(0) 收藏举报

刷新页面返回顶部