day-053-fifty-three-20230419-webpack基础-vue脚手架

webpack基础

配置CSS的解析和压缩规则
- 需要在打包页面中使用样式【编译less为css,最后把css导入到页面中】
- 初始打包，不支持less,需要配置打包规则，支持less
1. 创建less文件
  - 示例为：
    - 在src目录下面创建一个assets的文件夹，里面创建 common.less、index.less 文件
      - index.less通过@import "./common.less";导入common.less文件
2. 在js文件中引入less文件
3. 在webpack.config.js中设置module.exports对象的module.rules[n]

配置css兼容各浏览器-即css加浏览器前缀

安装mini-css-extract-plugin插件依赖

npm i mini-css-extract-plugin –save-dev

在根目录下创建postcss.config.js

module.exports = {plugins: [require('autoprefixer')]
};

在package.json中配置浏览器兼容性问题即browserslist

{"browserslist注释": "表示全球超过1%人使用的浏览器都要兼容，最后两个版本不用兼容","browserslist": ["> 1%","last 2 versions"]
}

抽离css文件-即出口文件html中的css文件通过link引入

安装mini-css-extract-plugin依赖插件。
```
npm i mini-css-extract-plugin –save-dev
```

在webpack.config.js中引入并使用插件。

//所有的插件都放在这个数组里。
const pluginsList = [];// 1. 抽离css文件，通过link引入。
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
const theMiniCssExtractPlugin = new MiniCssExtractPlugin({//=>设置编译后的文件名字filename: "main.[hash].css",
});
pluginsList.push(theMiniCssExtractPlugin);
module.exports = {plugins: pluginsList, //2. 使用插件，是一个数组。也可以写在这，不过为了好抽离和逻辑更新，最好放外面用一个变量来放置。
};

在webpack.config.js中设置module，即设置加载器相关的东西。

// 1. 抽离css文件，通过link引入。
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {// 3. 配置loadermodule: {//配置规则----css，图片...等。rules: [// 配置css。{test: /\.(css|less)$/, //要处理文件的文件名规则，用正则进行匹配。这里表示匹配以`.css`或`.less`结尾的文件。//对应文件的编译规则，规则由下往上看use: [MiniCssExtractPlugin.loader, //使用MiniCssExtractPlugin插件配套中的loader代替style-loader中的内嵌style方式。即使用link标签引入代替了在html中内嵌style标签的方式。// "style-loader", //=>把CSS插入到HEAD中，以内嵌使用css样式。"css-loader", //=>编译解析@import/URL()这种语法"postcss-loader", //=>设置前缀"less-loader", //将less后缀的文件转为css],},],},
};

压缩css文件（优化项）

安装依赖

npm i optimize-css-assets-webpack-plugin –save-dev

在webpack.config.js中引入并使用依赖，之后设置module.exports对象的optimization，即设置优化项相关的东西。

// 所有的优化项都放在这里
const optimizationMinimizerList = [];// 1. 配置压缩优化项
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const theOptimizeCssAssetsWebpackPlugin = new OptimizeCssAssetsWebpackPlugin();
optimizationMinimizerList.push(theOptimizeCssAssetsWebpackPlugin);// 这个导出的对象，就是webpack的配置；
module.exports = {//2. 设置优化项optimization: {minimize: true,minimizer: optimizationMinimizerList, //优化项列表},
};

配置图片的解析和压缩规则

安装依赖

npm i file-loader url-loader html-withimg-loader --save-dev

在webpack.config.js中引入并使用依赖，之后设置module.exports对象的module.rules，即设置加载器相关的东西。

module.exports = {//=>模块规则：使用加载器（默认从右向左执行）module: {//配置规则----css，图片...等。rules: [//图片{test: /\.(png|jpe?g|gif)$/i, //文件格式的后缀。大图片use: [{//=>把指定大小内的图片BASE64//=>不在指定范围的采用file-loader进行处理loader: "url-loader",options: {//小于200kB的图片自动 base64，大于的 file-loaderlimit: 200 * 1024,//输出后的路径 dist/imagesoutputPath: "/images",//name:'[name].[ext]'},},],exclude: /node_modules/, //在文件文件夹里的文件不处理// includes: /assets/, //只处理对应文件夹里的图片},{test: /\.(svg|eot|ttf|woff|woff2)$/i, //动态图，字体等。use: "file-loader",},{test: /\.html$/,use: ["html-withimg-loader"],},],},
};

配置js的ES6转ES5解析
1. 安装依赖
2. 在package.json中配置浏览器兼容性问题即browserslist
```
{"browserslist注释": "表示全球超过1%人使用的浏览器都要兼容，最后两个版本不用兼容","browserslist": ["> 1%","last 2 versions"]
}
```
3. 在webpack.config.js中设置module.exports对象的module.rules，即设置加载器相关的东西。
使用垫片处理ES6转ES5中的Promise语法

配置js的压缩规则

安装依赖
```
npm i terser-webpack-plugin --save-dev
```

在webpack.config.js中引入并使用依赖，之后设置module.exports对象的optimization，即设置优化项相关的东西。

// 所有的优化项都放在这里
const optimizationMinimizerList = [];// 1. 压缩js
const TerserPlugin = require("terser-webpack-plugin");
const theTerserPlugin = new TerserPlugin();
optimizationMinimizerList.push(theTerserPlugin);// 这个导出的对象，就是webpack的配置；
module.exports = {//2. 设置优化项optimization: {minimize: true,minimizer: optimizationMinimizerList, //优化项列表},
};

插件的问题

插件与优化项

如果带有optimize与plugin的，一般就为优化项。
- 如：“optimize-css-assets-webpack-plugin”。
单纯地只有plugin的一般就是插件。
- 如："clean-webpack-plugin"与"mini-css-extract-plugin"等。

有些插件，还配置了对应的路由，在module.exports.module.rules[n].use[m]中调用。

如：“mini-css-extract-plugin”

// 抽离css文件，通过link引入。
// 1. 导入插件。
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
const theMiniCssExtractPlugin = new MiniCssExtractPlugin({//=>设置编译后的文件名字filename: "main.[hash].css",
});
// 2. 使用插件
const pluginsList = [];
pluginsList.push(theMiniCssExtractPlugin);
// 这个导出的对象，就是webpack的配置；
module.exports = {plugins: pluginsList, //2. 使用插件，是一个数组。// 3. 配置loadermodule: {//配置规则----css，图片...等。rules: [// 配置css。{test: /\.(css|less)$/, ////对应文件的编译规则，规则由下往上看use: [MiniCssExtractPlugin.loader, //使用MiniCssExtractPlugin插件配套中的loader代替style-loader中的内嵌style方式。即使用link标签引入代替了在html中内嵌style标签的方式。// "style-loader", //=>把CSS插入到HEAD中，以内嵌使用css样式。"css-loader", //=>编译解析@import/URL()这种语法"postcss-loader", //=>设置前缀"less-loader", //将less后缀的文件转为css],},
};

使用插件

安装依赖
在webpack.config.js中引入插件，一般都会实例化一次。
在webpack.config.js中module.exports对象里的plugins中引入该插件实例，以使用插件。
有些插件可能还要配合module.rules[n].use[m]中调用对应配置的loader。

vue脚手架

vue的脚手架就是vue-cli。
步骤

全局安装vue-cli。
```
npm install -g @vue/cli
```
- 这个一个电脑一般就只要一次就好了，除非要更新vue-cli的版本
安装成功后查看版本，出现版本说明成功了
```
vue -V
```
- 这个

使用vue-cli的vue命令创建一个vue项目

相当于创建好vue项目，并搭建好该vue项目完整的webpack配置。同时一般它还会安装好对应的依赖，相当于在项目根目录中的npm install

vue create 项目名称

选项一些选项，空格用于选中选项，按上下键可以上下移动选项以便取消或选中，按回车表示完成了当前选项的所有选择。

问题1：选择vue项目的基础模板

- ? Please pick a preset 选择vue项目的基础模板，默认有`vue2的默认模板`与`vue3的默认模板`及`自己本地电脑保存的项目模版`及`Manually select features自定义项目`> Manually select features //自定义项目

问题2：选择Manually select features，就会出现问题2，用于选择项目的一些常用依赖与插件。

- ? Check the features needed for your project (*) Choose Vue version  //选择vue版本(*) Babel  //用于把es6--转成es5( ) TypeScript   //是否使用 ts( ) Progressive Web App (PWA) Support  //是否支持Progressive Web Apps，渐进式网页应用(*) Router  //是否使用 vue-Router路由配置(*) Vuex    //是否使用 vuex全局存储(*) CSS Pre-processors  是否使用 预处理  less sass stylus>(*) Linter / Formatter  是否使用 eslint 语法检测( ) Unit Testing  是否使用 单元测试( ) E2E Testing   是否使用 E2E元测试

问题3：选择vue版本。问题2结束后，就会出现问题3了

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)> 2.x3.x

问题4：选择vue-Router的导航方式是否为history历史模式。一般选择否，即用哈希模式。

?Use history mode for router?  router是否是history(Requires proper server setup for index fallback in production) (Y/n) n

问题5：选择css预处理语言。一般选择less或者scss。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass)>LessStylus

问题6：选择ESlint的配置

  ? Pick a linter / formatter config: (Use arrow keys)> ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + Prettier

问题7：选择ESlint的什么时候开始检测

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) //选择在什么时间进行ESLint检测> In dedicated config files //保存时检测In package.json //提交时检测

问题8：选择在什么位置保存配置文件

? Where do you prefer placing config for Babel, ESLint, etc.? //选择在什么位置保存配置文件，这里有两个选项（单选）> In dedicated config files //独立保存为 config 文件In package.json //全部保存在 package.json 文件

问题9：择是否保存本次配置以便于下次使用。一般选n否，输入n按回车。
```
? Save this as a preset for future projects?输入y：保存配置N：不保存配置
```

进入新创建的项目目录
- 因为vue-cli会在当前目录新创建一个与项目名称同名的文件夹，当成项目的根目录
```
cd 新创建项目目录
```

运行脚本文件

启动创建的项目(开发环境)

//yarn serve //yarn执行，备用。npm先下，下不下来。因为npm支持的比较多。
npm run serve

打包项目 (生产环境)

//yarn build //yarn执行，备用。npm先下，下不下来。因为npm支持的比较多。
npm run build

目录结构

  public/ |--index.html //打包入口的html文件src/|--api //ajax请求及封装文件|--assets //静态资源文件|--components //业务组件，一般不会随url路径而变动的组件。|--router //路由文件夹|--store  //vuex文件夹|--views/或pages/ //vue页面，路由变化切换时用的会跟随url路径变动的组件。|--App.vue  //vue入口页面|--main.js //入口的js文件.browserslistrc //browserslistrc配置文件，用于浏览器兼容。.eslintrc.js   //eslint配置文件，babel.config.js //配置文件  es6--es5.gitgnore //git配置文件，用于配置忽略文件。package.json //npm包管理器的清单vue.config.js  //配置 相当于  webpack.config.js

vue总体思路

/src/main.js 在vue-cli中默认是主入口文件，会以它为入口构建js代码，一个vue单页应用程序通常会依赖于它。

/src/main.js中引入的东西在webpack中都会被解析成js代码，最终运行的都是js代码。

/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'//如果vue出现警告型错误，开发环境会提示，生产环境不会提示
Vue.config.productionTip = falselet vm=new Vue({router,store,render: h => h(App)//解析 App.vue
}).$mount('#app')//插入 id="app"console.log(vm);

/public/index.html 是打包入口的html文件，/src/main.js最终会被它导入。

每个XXX.vue的页面都是一个组件
- 完整结构
```
<template><div class="XX"></div>
</template> 视图
<script>export default{data(){return {num:100}}}
</script>
<style></style>
```
- 里面中的<template>与<script>两个至少要有一个，而<style>可有可无。
创建组件
- 创建的地方
  - 业务类组件一般在components中创建，即与url变动没关系的组件。
  - 页面类组件一般在views中创建，一般与url变动有关，一个url变动后也随之变动组件。
- 组件的命名规则
  - 串式命名： my-name-apple 一般在template标签中使用
    - 原因是原生html规则不支持驼峰字母命名规则
      - 不过个人感觉，业务组成员自己定义的用大驼峰，第三方插件用串式命名更好。
        因为业务中，可不可控更重要。
        第三方插件意味着不可控，可以自己进一步封装成，之后再大写。
        业务级成员定义的，则意味着可以改，用大写区别更好。
  - 大驼峰命名：MyNameApple 一般在vue文件名及vue引入及script标签中使用
- 组件的类别
  - 类组件里面有data，有自己内部的数据
    - vue的组件基本上都是类组件
    - 类组件可以变成函数组件：在template根标签上加上functional这个属性。
      - <template functional></template>
  - 函数组件通常只做渲染
    - 一般只有一个template标签和style标签。
- 组件的作用范围
  - 局部组件
    - 局部组件的创建
      1. 创建一个组件（
        
        一般components文件夹创建
        用大驼峰作文件名，如 OnePage.vue
      2. 在某个路由组件中使用（切页面的）
        
        // 导入组件 @--->src目录 import OnePage from '@/components/OnePage.vue' // 导入组件 import OnePage from '../components/OnePage.vue'export default{components: {//挂载OnePage} }
        
        在template标签中使用
        
        <template><one-page></one-page> </template>
  - 全局组件