20230419----重返学习-webpack基础-vue脚手架

news/2024/7/8 1:23:44

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

webpack基础

  1. 配置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]

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

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

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

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

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

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

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

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

    1. 安装mini-css-extract-plugin依赖插件。

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

    2. 在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. 使用插件，是一个数组。也可以写在这，不过为了好抽离和逻辑更新，最好放外面用一个变量来放置。
};

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

      // 1. 抽离css文件，通过link引入。
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  // 3. 配置loader
  module: {
    //配置规则----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
        ],
      },
    ],
  },
};

  4. 压缩css文件（优化项）

    1. 安装依赖

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

    2. 在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, //优化项列表
  },
};

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

    1. 安装依赖

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

    2. 在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-loader
              limit: 200 * 1024,
              //输出后的路径 dist/images
              outputPath: "/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"],
      },
    ],
  },
};

  6. 配置js的ES6转ES5解析

    1. 安装依赖

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

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

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

  7. 使用垫片处理ES6转ES5中的Promise语法

  8. 配置js的压缩规则

    1. 安装依赖

      npm i terser-webpack-plugin --save-dev

    2. 在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, //优化项列表
  },
};

插件的问题

插件与优化项

  1. 如果带有optimize与plugin的，一般就为优化项。
    • 如：“optimize-css-assets-webpack-plugin”。
  2. 单纯地只有plugin的一般就是插件。
    • 如："clean-webpack-plugin"与"mini-css-extract-plugin"等。
  3. 有些插件，还配置了对应的路由，在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. 配置loader
  module: {
    //配置规则----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
        ],
      },
};

使用插件

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

vue脚手架

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

  1. 全局安装vue-cli。

    npm install -g @vue/cli
    • 这个一个电脑一般就只要一次就好了，除非要更新vue-cli的版本

  2. 安装成功后查看版本，出现版本说明成功了

    vue -V
    • 这个

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

    • 相当于创建好vue项目，并搭建好该vue项目完整的webpack配置。同时一般它还会安装好对应的依赖，相当于在项目根目录中的npm install
    vue create 项目名称
    • 选项一些选项，空格用于选中选项，按上下键可以上下移动选项以便取消或选中，按回车表示完成了当前选项的所有选择。

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

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

      2. 问题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. 问题3：选择vue版本。问题2结束后，就会出现问题3了

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

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

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

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

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

      6. 问题6：选择ESlint的配置

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

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

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

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

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

      9. 问题9：择是否保存本次配置以便于下次使用。一般选n否，输入n按回车。

        ? Save this as a preset for future projects?
  输入
    y：保存配置
    N：不保存配置

  4. 进入新创建的项目目录

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

  5. 运行脚本文件

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

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

    • 打包项目 (生产环境)

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

  6. 目录结构

      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总体思路

      1. /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 = false

let vm=new Vue({
  router,
  store,
  render: h => h(App)//解析 App.vue
}).$mount('#app')//插入 id="app"

console.log(vm);

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

  7. 每个XXX.vue的页面都是一个组件

    • 完整结构

      <template>
  <div class="XX">
  </div>
</template> 视图
<script>
  export default{
    data(){
        return {
            num:100
        }
    }
  }
</script>
<style></style>

    • 里面中的<template>与<script>两个至少要有一个，而<style>可有可无。

  8. 创建组件

    • 创建的地方
      • 业务类组件一般在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>

      • 全局组件

进阶参考

  1. 前端工程基础知识点–Browserslist
  2. browserslist - 官方github仓库
  3. mini-css-extract-plugin插件快速入门

http://lihuaxi.xjx100.cn/news/1048005.html

相关文章

用golang实现traceroute

用golang实现traceroute

Traceroute 概念 traceroute是一种网络诊断工具&#xff0c;通过traceroute可以诊断出本机到目的地IP之间的路由情况&#xff0c;例如路由跳数、延迟、是否可达等信息。该工具在linux环境下的命令是traceroute或者tracepath&#xff0c;在windows下命令是tracert。 工作原理…
阅读更多...
小程序封装公共搜索框

小程序封装公共搜索框

小程序封装公共搜索框 在小程序开发中&#xff0c;全局搜索是一个常见的需求&#xff0c;例如在一个商城小程序中&#xff0c;用户可以通过搜索框快速搜索商品。为了提高代码复用性和可维护性&#xff0c;我们可以将搜索框封装成一个组件&#xff0c;同时通过从父组件传递参数…
阅读更多...
强训之【求最大连续的bit数和最近公共祖先】

强训之【求最大连续的bit数和最近公共祖先】

目录 1.求最大连续的bit数1.1题目1.2思路1.2.1暴力求解1.2.2 字符串分割求解1.2.3 位运算“与”求解 1.3代码1.3.1暴力求解代码1.3.2字符串分割求解代码1.3.3位运算“与”求解 2.最近公共祖先2.1题目2.2思路2.3代码 3.选择题 1.求最大连续的bit数 1.1题目 链接: link 描述 求…
阅读更多...
电脑端(PC)按键精灵——5.找色/找图命令

电脑端(PC)按键精灵——5.找色/找图命令

电脑端(PC)按键精灵——5.找色/找图命令 注&#xff1a;说了键盘、鼠标、其他、控制命令还有安装内容&#xff0c;现在说下颜色/图形命令&#xff0c;这一节相当重要 按键精灵小白入门详细教程&#xff1a; 电脑端(PC)按键精灵—小白入门 详细教程 命令介绍 1.GetPixelCol…
阅读更多...
C. Vus the Cossack and Strings(异或判断二进制位匹配数奇偶)

C. Vus the Cossack and Strings(异或判断二进制位匹配数奇偶)

Problem - C - Codeforces 题目描述 Vus the Cossack has two binary strings, that is, strings that consist only of "0" and "1". We call these strings aa and bb . It is known that |b| \leq |a|∣b∣≤∣a∣ , that is, the length of bb is at m…
阅读更多...
增广拍卖——二跳页下的拍卖机制探索

增广拍卖——二跳页下的拍卖机制探索

1. 引言 本文提出的方案已被WSDM 2023接收&#xff0c;论文&#xff1a;Boosting Advertising Space: Designing Ad Auctions for Augment Advertising&#xff0c; 下载&#xff1a;https://dl.acm.org/doi/abs/10.1145/3539597.3570381 信息流产品为了保障用户体验通常会严格…
阅读更多...
基于stm32f103c8t6的智能小车蓝牙模块

基于stm32f103c8t6的智能小车蓝牙模块

一、蓝牙模块简介 1.1、HC05 1.1.1、HC05AT指令 AT 识别是否进入AT模式 AT+NAME / AT+NAME=< param > 询问名字 / 设置名字 AT+RNAME？< param1> 获取远程蓝牙设备名称： AT+PSWD / AT+PSWD=< param > 询问密码 / 设置密码 AT+UART /A…
阅读更多...
“升级大师：不同级别程序员的成长之路和突破痛点难点实战案例“

“升级大师：不同级别程序员的成长之路和突破痛点难点实战案例“

在编程世界中&#xff0c;程序员的技能和经验各不相同。根据他们的经验水平&#xff0c;我们可以将他们分为&#xff1a;小白、初级、中级、高级和资深程序员。在本文中&#xff0c;我们将讨论这些不同级别的程序员如何处理问题&#xff0c;以及他们在解决问题过程中可能遇到的…
阅读更多...
最新文章

Copyright @ 2022~2023