网站导航
> 文章列表 > 20230419----重返学习-webpack基础-vue脚手架

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

网友: 文章列表 2024-03-22 01:54:27

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

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. 配置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],},],},
};

  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-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"],},],},
};

  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. 配置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],},
};

使用插件

  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.x3.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 keys)Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass)>LessStylus

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

          ? Pick a linter / formatter config: (Use arrow keys)> ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + 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 = falselet 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插件快速入门
网络标签：

相关问题