webpack 前端自动化的构建工具(打包 压缩 解析)

打包命令：webpack ./index.js  自动输出 到dist目录下多一个main.js

                   由于webpack局部安装的，直接执行命令不认识webpack, 解决1：npx webpack ./index.js

解决2：将命令定义到script脚本中，通过npm run xxx



通过webpack.config.js配置 打包信息

entry：入口配置

output: 出口配置

mode: 设置打包的模式（开发，生产）

plugins:[] htmlwebpackplugin(自动生产html页面，并且引入输出js文件）【1.安装 2.配置】

module(loaders)：识别其他文件需要配置loader(css：css-loader， style-loader) 

                                  转换es6到es5（babel)

                                  文件（file-loader)



打包命令: webpack --config webpack.config.js

webpack: 只认识json, js

开发服务器：webpack-dev-serve



默认情况下修改html页面，是不会自动刷新的，需要手动。

【mode:开发环境】

解决：html热更新

1. 安装raw-loader
2. 入口文件引入html
3. 配置webpack.config.js 配置loader





1. 脚手架中开发（使用脚手架创建vue项目----vue create xxx) 【package.json-- vue,vuex,vue-router】
2. public 静态资源

src 项目代码资源

assets: 图片资源+样式资源

components：公共组件

router: 路由配置（页面切换）

store: 数据仓库+数据共享 ----还没用上

views: 组件

App.vue：全局组件 -- 默认会加载（渲染）该组件

main.js：入口文件

其他：配置文件（babel, vue, git，帮助文档 remand.md)

3.关于“./"

{

path:"/aaa", //浏览器中地址 http://localhost：8080/aaa

name: 'set04', //命名

components:() => import('../components/04Set.vue')

}

4.watch

当数据发生变化时，自动执行某函数

watch：{

//普通监听

要监听的变量（新值，旧值）{

}

// 立即监听

要监听的变量：{

handler(新值，旧值）{

},

imemediate:true

},

//深度监听（不推荐）

要监听的变量：{

handler(新值，旧值）{

},

deep:true

},

//优化方法，直接监听具体的某一属性

"对象.属性名"(新值，旧值){

}



与computed区别是什么？

当数据变化时，需要做一些开销比较大的操作（异步操作）使用watch【一个数据影响多个值时】任何复杂业务逻辑的都应该使用计算属性。使用computed【一个数据受多个数据影响时】



5. 修改数组或者对象不响应时解决办法 $set()

this.$set(数组对象，下标，值)

this.$set(对象，属性名，属性值)



this.arr.push() //页面是会自动更新的。（vue已经帮我们处理过了）



6. ref 和 $refs

作用: 获取dom元素

    1. 给标签设置ref属性，相当于设置id
    2. 通过$refs.属性名 得到该dom对象



7. nextTick的作用
+ 我们在挂载前的这个阶段是无法获取到dom元素的,如果需要在挂载前这个阶段获取dom元素,就要使用到$nextTick  语法:$nextTick(回调函数)



8. 生命周期钩子

钩子函数都是写在data(){}与methods:{}的同级,

+ beforeCreate(){这个阶段什么东西都拿不到一般我们都不用}, created(){这个阶段能拿到数据与函数,一般在阶段会发送一些请求},
+  beforeMount(){与created拿到的数据是一样的 一般都会写在created},  mounted(){在这里能拿到所有数据,我们也可以在这里对dom进行操作,如果绑定事件等}
+ beforeUpdate(){更新前:我们在这个钩子函数主要是监听数据的更新,这里监听的是更新前的数据} , updated(){更新后:这里是监听更新后的数据}
+ beforeDestroy(){销毁前:一般会在这里写一些销毁前要处理的一些代码,比如定时器,要在这个阶段处理完后,再到销毁后执行完全销毁}  destroyed(){销毁完,转换页面时就会执行该钩子}