Vue——基础篇

---

基础理解

入门

Vue的前端工程化
模块化（js、css、文件的复用）组件化（html的复用）规范化、自动化（自动构建、部署、测试）
webpack、parcel	前端工程化的解决方案
.html、script、css	全部都变成js代码来执行，实质上都是js。

vue cli和vue-router和 vuex是基础知识

---

Webpack原理

---

webpack

前端项目工程化。优势：代码压缩混淆、处理js的兼容性、性能优化。应用:vue、react。一切皆可作为模块来导入到js中运行

案例,环境vscode，npm：node.js package manager

1、新建英文空白目录，在目录cmd执行【npm init -y】：初始化配置文件package.json

2、新建src目录，新建src\index.html、src\index.js

3、在index.html中输入【!】初始化页面结构。输入【ul>li{这是第$个li}*9】快速生成表格

4、安装jquery包。不用再去网上搜 。根目录cmd运行【npm i jquery -S】。该包会在package.json中有配置记录。-S可省略，也可写--save。-S的包属于dependencies，开发和上线都要用到

5、在index.js导入jquery包【import $ from 'jquery'】

6、index.js实现li隔行变色：                        在index.html中调用【<script src='.\index.js'></script】 $(function(){         $('li:odd').css('background-color','red')        #odd  奇数         $('li:even').css('background-color','pink')     #even  偶数 }) 结果，实现失败，引入webpack，增强代码兼容性。

安装和配置webpack

1、【安装】cmd执行【npm install webpack@5.42.1 webpack-cli@4.7.2 -D】 -D ，也可写--save-dev，属于 devdependiencies，只在开发阶段用到，上线就不用了。辅助项目开发

2、【配置】新建根目录\webpack.config.js module.exports = {         mode:'development'  //开发者模式，相对的production }  --mode优先   所以正式执行npm run build package.json "scripts":{         "dev":"webpack"   //script节点下的脚本，通过npm run执行，如mpm run dev } cmd【执行】npm run dev对webpack进行打包构建，并不会压缩。 以production模式运行，就会压缩。压缩导致命令执行时间变长。

3、重新引入webpack重构的index.js,重构后被更名为dist\main.js【<script src='..\dist\main.js'></script】。 main.js除了index.js全部代码，包括注释，还有webpack自带的js、jquery代码。

【npm run 包】的执行顺序

1、先去看\webpack.config.js的moduls.exports配置:   mode，关于打包入口、输出文件的约定。【webpack.config.js没指定的话】默认入口严格按照src-->index.js     默认输出严格按照dist-->main.js。 webpack.config.js配置修改打包入口、输出文件： node 导入模块   const path = require（‘path’）   __dirname:webpack.config.js所在的目录

【dist】文件总要手动运行【npm run 包】？使用插件

1、webpack-dev-server:类似于node.js的nodemon工具；每当修改保存了源代码自动打包、重构 【npm install webpack-dev-server@3.11.2 -D】-D:只在开发阶段用到的工具 修改package.json "scripts":{         "dev":"webpack  server"   //script节点下的脚本，通过npm run执行，如mpm run dev } 此时要用http协议去看效果，访问localhost:8080,直接打开html是file协议。 dist下的内容被打包存储在内存中了，该插件实现了更快，更高效的打包重构。 但是要修改【<script src='/main.js'></script】,加载在内存中的js

访问localhost:8080后不能直接看首页？使用插件

2、html-webpack-plugin:自定制index.html的内容。模板引擎插件 【npm install html-webpack-plugin@5.3.2 -D】，它可以将index.html复制一份到根目录，该操作只在将文件读到内存中时，在内存中生成，还会自动引入打包重构后内存中的js文件