day06-webpack

最新推荐文章于 2024-05-17 23:38:07 发布
最新推荐文章于 2024-05-17 23:38:07 发布
阅读量137 收藏 1
点赞数 1
分类专栏： 乐优商城 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu_zhi_chao/article/details/106931782
版权

webpack

0.学习目标

  • 了解vue-router使用
  • 了解webpack使用
  • 会使用vue-cli搭建项目
  • 独立搭建后台管理系统
  • 了解系统基本结构

1.路由vue-router

1.1.场景模拟

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：
在这里插入图片描述

1.1.1.编写父组件

为了让接下来的功能比较清晰，我们先新建一个文件夹：src:
在这里插入图片描述

然后新建一个HTML文件，作为入口：index.html
在这里插入图片描述

然后编写页面的基本结构：

<div id="app">
    <span>登录</span>
    <span>注册</span>
    <hr/>
    <div>
        登录页/注册页
    </div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app"
    })
</script>

样式：
在这里插入图片描述

1.1.2.编写登录组件

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放如独立的JS文件中，我们新建一个login.js
在这里插入图片描述

编写组件，这里我们只写模板，不写功能：

const loginForm = {
    template:'\
    <div>\
    <h2>登录页</h2> \
    用户名：<input type="text"><br/>\
    密码：<input type="password"><br/>\
    </div>\
    '
}

1.1.3.编写注册组件

新建单文件组件：register.js
在这里插入图片描述

编写模板：

const registerForm = {
    template:'\
    <div>\
    <h2>注册页</h2> \
    用户名：<input type="text"><br/>\
    密码：<input type="password"><br/>\
    确认密码：<input type="password"><br/>\
    </div>\
    '
}

1.1.4.在父组件中引用

在index.html中使用刚刚编写的两个组件

    <div id="app">
        <span>登录</span>
        <span>注册</span>
        <hr/>
        <div>
            <login-form></login-form>
            <register-form></register-form>
        </div>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="js/login.js"></script>
    <script src="js/register.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            components:{// 引用登录和注册组件
                loginForm,
                registerForm
            }
        })
    </script>

效果：
在这里插入图片描述

1.1.5.问题

我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

但是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

1.2.vue-router简介和安装

使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。

官网：https://router.vuejs.org/zh-cn/

使用npm安装：npm install vue-router --save
在这里插入图片描述

在index.html中引入依赖：

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

1.3.快速入门

新建vue-router对象，并且指定路由规则：

// 创建VueRouter对象
const router = new VueRouter({
    routes:[ // 编写多个路由规则
        {
            path:"/login", // 请求路径
            component:loginForm // 组件名称
        },
        {path:"/register",component:registerForm},
    ]
})
  • 创建VueRouter对象，并指定路由参数
  • routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
    • path：路由的路径
    • component：组件名称

在父组件中引入router对象：

var vm = new Vue({
    el:"#app",
    components:{// 引用登录和注册组件
        loginForm,
        registerForm
    },
    router // 引用上面定义的router对象
})

页面跳转控制：

<div id="app">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <div>
        <!--vue-router的锚点-->
        <router-view></router-view>
    </div>
</div>
  • 通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
  • 通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

效果：
在这里插入图片描述

注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

事实上，我们总共就一个HTML：index.html

1.4.父子组件

2.webpack

2.1.认识webpack

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

中文官方网站：https://www.webpackjs.com/
在这里插入图片描述

官网给出的解释：
在这里插入图片描述

为什么需要打包？

  • 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
  • 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
  • 将代码打包的同时进行混淆，提高代码的安全性。

2.2.四个核心概念

学习Webpack，你需要先理解四个核心概念：

  • 入口(entry)

    webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据

  • 输出(output)

    出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。

  • 加载器（loader）

    webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。

  • 插件(plugins)

    插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。

2.3.安装

webpack支持全局安装和本地安装，官方推荐是本地安装，我们按照官方的来。

输入命令：npm install webpack webpack-cli --save-dev
在这里插入图片描述

此时，我们注意下项目中文件夹下，会有一个package.json文件。（其实早就有了）
在这里插入图片描述

打开文件，可以看到我们之前用npm安装过的文件都会出现在这里：
在这里插入图片描述

2.4.编写webpack配置

接下来，我们编写一个webpack的配置，来指定一些打包的配置项。配置文件的名称，默认就是webpack.config.js，我们放到hello-vue的根目录：
在这里插入图片描述

配置文件中就是要指定上面说的四个核心概念，入口、出口、加载器、插件。

不过，加载器和插件是可选的。我们先编写入口和出口

2.4.1.入口entry

webpack打包的启点，可以有一个或多个，一般是js文件。现在思考一下我们有没有一个入口？貌似没有，我们所有的东西都集中在index.html，不是一个js，那怎么办？

我们新建一个js，把index.html中的部分内容进行集中，然后在index.html中引用这个js不就OK了！
在这里插入图片描述

然后把原来index.html中的js代码全部移动到main.js中

// 使用es6的语法导入js模块
import Vue from '../node_modules/vue/dist/vue';
import VueRouter from '../node_modules/vue-router/dist/vue-router'
import loginForm from './js/login'
import registerForm from './js/register'

Vue.use(VueRouter)

// 创建VueRouter对象
const router = new VueRouter({
    routes:[ // 编写多个路由规则
        {
            path:"/login", // 请求路径
            component:loginForm // 组件名称
        },
        {path:"/register",component:registerForm},
    ]
})
var vm = new Vue({
    el:"#app",
    components:{// 引用登录和注册组件
        loginForm,
        registerForm
    },
    router
})

  • 原来的index.html中引入了很多其它js，在这里我们使用es6的import语法进行导入。

    注意，要使用import，就需要在login.js和register.js中添加export导出语句：

    const loginForm = {
    template:`
    <div> 
    <h2>登录页</h2> 
    用户名：<input type="text"><br/>
    密码：<input type="password"><br/>
    </div>
    `
}
export default loginForm;

    register.js:

    const registerForm = {
    template:`
    <div>
    <h2>注册页</h2> 
    用户名：<input type="text"><br/>
    密码：<input type="password"><br/>
    确认密码：<input type="password"><br/>
    </div>
    `
}
export default registerForm;

  • vue-router使用模块话加载后，必须增加一句：Vue.use(VueRouter)

这样，main.js就成了我们整个配置的入口了。

我们在webpack.config.js中添加以下内容：

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
}

2.4.2.出口output

出口，就是输出的目的地。一般我们会用一个dist目录，作为打包输出的文件夹：
在这里插入图片描述

然后，编写webpack.config.js，添加出口配置：

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+'/dist',  
        filename:'build.js'	 //输出的js文件名
    }
}

2.5.执行打包

在控制台输入以下命令：

npx webpack --config webpack.config.js

在这里插入图片描述

随后，查看dist目录：
在这里插入图片描述

尝试打开build.js，你根本看不懂：
在这里插入图片描述

所有的js合并为1个，并且对变量名进行了随机打乱，这样就起到了 压缩、混淆的作用。

2.6.测试运行

在index.html中引入刚刚生成的build.js文件，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--router-link来指定跳转的路径-->
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr/>
        <div>
            <!--vue-router的锚点-->
            <router-view></router-view>
        </div>
    </div>
    <script src="../dist/build.js"></script>
</body>
</html>

然后运行：
在这里插入图片描述

2.7.打包CSS

2.7.1.编写css文件

我们来编写一段CSS代码，对index的样式做一些美化：
在这里插入图片描述

内容：

#app a{
    display: inline-block;
    width: 150px;
    line-height: 30px;
    background-color: dodgerblue;
    color: white;
    font-size: 16px;
    text-decoration: none;
}
#app a:hover{
    background-color: whitesmoke;
    color: dodgerblue;
}
#app div{
    width: 300px;
    height: 150px;
}
#app{
    width: 305px;
    border: 1px solid dodgerblue;
}

2.7.2.安装加载器

前面说过，webpack默认只支持js加载。要加载CSS文件，必须安装加载器：

命令：

npm install style-loader css-loader --save-dev

在这里插入图片描述

此时，在package.json中能看到新安装的：
在这里插入图片描述

2.7.3.在main.js引入css文件

因为入口在main.js，因此css文件也要在这里引入。依然使用ES6 的模块语法：

import './css/main.css'

2.7.4.在webpack.config.js添加加载器

module.exports = {
    entry: './src/main.js',  //指定打包的入口文件
    output: {
        path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename: 'build.js'  //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
                use: [ // 要使用的加载器，这两个顺序一定不要乱
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

2.7.5.重新打包

再次输入打包指令：npx webpack --config webpack.config.js
在这里插入图片描述

效果：
在这里插入图片描述

2.8.script脚本

我们每次使用npm安装，都会在package.json中留下痕迹，事实上，package.json中不仅可以记录安装的内容，还可编写脚本，让我们运行命令更加快捷。

我们可以把webpack的命令编入其中：
在这里插入图片描述

以后，如果要打包，就可以直接输入：npm run build即可。

  • npm run ：执行npm脚本，后面跟的是脚本的名称build
    在这里插入图片描述

2.9.打包HTML

之前的打包过程中，除了HTML文件外的其它文件都被打包了，当在线上部署时，我们还得自己复制HTML到dist，然后手动添加生成的js到HTML中，这非常不友好。

webpack中的一个插件：html-webpack-plugin，可以解决这个问题。

1）安装插件：npm install --save-dev html-webpack-plugin

需要在webpack.config.js中添加插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',  //指定打包的入口文件
    output: {
        path: __dirname + '/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename: 'build.js'		   //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
                use: [ // 要使用的加载器，这两个顺序一定不要乱
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', // dist目录下生成的文件名
            template: './src/index.html' // 我们原来的index.html，作为模板
        })
    ]
}

2）将原来HTML中的引入js代码删除：
在这里插入图片描述

3）再次打包：npm run build
在这里插入图片描述

4）查看dist目录：
在这里插入图片描述

打开index.html，发现已经自动添加了当前目录下的build.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--router-link来指定跳转的路径-->
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <div>
            <!--vue-router的锚点-->
            <router-view></router-view>
        </div>
    </div>
<script type="text/javascript" src="build.js"></script></body>
</html>

2.10.热更新的web服务

刚才的案例中，每次修改任何js或css内容，都必须重新打包，非常麻烦。

webpack给我们提供了一个插件，可以帮我们运行一个web服务，加载页面内容，并且修改js后不需要重新加载就能看到最新结果：

1）安装插件：

npm install webpack-dev-server --save-dev

2）添加启动脚本

在package.json中配置script

  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1"
  },

–inline：自动刷新

–hot：热加载

–port：指定端口

–open：自动在默认浏览器打开

–host：可以指定服务器的 ip，不指定则为127.0.0.1

3）运行脚本：

npm run dev

在这里插入图片描述

4）效果：
在这里插入图片描述

3.vue-cli

3.1.介绍和安装

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。

幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli

使用它能快速的构建一个web工程模板。

官网：https://github.com/vuejs/vue-cli

安装命令：

npm install -g vue-cli

3.2.快速上手

我们新建一个module：
在这里插入图片描述

打开终端并进入目录：
在这里插入图片描述

用vue-cli命令，快速搭建一个webpack的项目：vue init webpack
在这里插入图片描述

在这里插入图片描述

前面几项都走默认或yes

下面这些我们选no
在这里插入图片描述

最后，再选yes，使用 npm安装
在这里插入图片描述
在这里插入图片描述

3.3.项目结构

安装好的项目结构：
在这里插入图片描述

入口文件：
在这里插入图片描述

3.4.单文件组件

需要注意的是，我们看到有一类后缀名为.vue的文件，我们称为单文件组件
在这里插入图片描述

每一个.vue文件，就是一个独立的vue组件。类似于我们刚才写的loginForm.js和registerForm.js

只不过，我们在js中编写 html模板和样式非常的不友好，而且没有语法提示和高亮。

而单文件组件中包含三部分内容：

  • template：模板，支持html语法高亮和提示
  • script：js脚本，这里编写的就是vue的组件对象，看到上面的data(){}了吧
  • style：样式，支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用。

3.5.运行

看看生成的package.json：
在这里插入图片描述

  • 可以看到这引入了非常多的依赖，绝大多数都是开发期依赖，比如大量的加载器。
  • 运行时依赖只有vue和vue-router
  • 脚本有三个：
    • dev：使用了webpack-dev-server命令，开发时热部署使用
    • start：使用了npm run dev命令，与上面的dev效果完全一样
    • build：等同于webpack的打包功能，会打包到dist目录下。

我们执行npm run dev 或者 npm start 都可以启动项目：
在这里插入图片描述

页面：
在这里插入图片描述

古士召
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack源码分析—ESModule规范模块的导入与导出详解
weixin_45449964的博客
03-19 1330
webpack源码分析—ESModule规范模块的导入与导出详解前言ESModule规范模块的导入与导出导入分析r方法—模块类型标记 前言 上一章分析了CommonJS规范模块的导入与导出，这一章我们来分析ESModule规范模块的导入与导出。 ESModule规范模块的导入与导出 示例代码 // index.js import data, { param1, param2 } from './module.js' console.log(data) console.log(param1) console.
运行vue报错__WEBPACK_IMPORTED_MODULE_2__router__.a is not a constructor
热门推荐
ranran_sun的博客
01-31 5万+
npm运行正常 但浏览器报错： 解决方法：VueRouter的引入不能用npm安装时自带的“import VueRouter from ‘./router’”，要换成“import VueRouter from ‘vue-router’”
Vue.js - Day5 - Webpack
想搞全栈的前端
05-02 687
文章目录Vue.js - Day5 - Webpack在网页中会引用哪些常见的静态资源？网页中引入的静态资源多了以后有什么问题？？？如何解决上述两个问题什么是webpack?如何完美实现上述的2种解决方案webpack安装的两种方式初步使用webpack打包构建列表隔行变色案例使用webpack的配置文件简化打包时候的命令实现webpack的实时打包构建使用`html-webpack-plugin...
尚医通学习笔记Day06--Webpack使用笔记
GTW、Zeus的博客
04-28 311
Webpack打包工具 是一个前端资源加载打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定规则生成对应的静态资源 安装 npm install -g webpack webpack-cli 检查版本 webpack -v 创建配置文件 webpack.config.js const path=require("path")//Node.js内置模块 module.exports={ //配置入口文件 entry:"./src/main.js", output:{ //打包放的
React-day2-webpack高级
不一样的花朵的博客
04-10 142
移动App第2天 webpack的发布策略 在实际开发中，一般会有两套项目方案： 一套是开发期间的项目，包含了测试文件、测试数据、开发工具、测试工具等相关配置，有利于项目的开发和测试，但是这些文件仅用于开发，发布项目时候需要剔除； 另一套是部署期间的项目，剔除了那些客户用不到的测试数据测试工具和文件，比较纯净，减少了项目发布后的体积，有利于安装和部署！ 为了满足我们的发布策略，需要新建一个配置文件，命名为webpack.publish.config.js，将webpack.config.js的配置
利用 generate-asset-webpack-plugin 插件生成编译的前端包版本信息
qq_42966167的博客
12-15 1096
利用 generate-asset-webpack-plugin 插件生成编译的前端包版本信息
DAY9------webpack打包和不打包的区别
最新发布
Mi_Ni_BoX的博客
05-17 130
打包减少js请求，提升性能。
Day04-Webpack打包js、css文件
qq_46112274的博客
03-03 174
Webpack打包js、css文件一、什么是Webpack?二、Webpack安装1、全局安装Webpack2、查看Webpack版本号三、初始化项目---Webpack打包js文件1、首先在vscode工作空间中创建文件夹Webpackdemo2、初始化项目环境，点击Webpackdemo文件夹，在终端中打开。3、创建src文件夹4、src下创建common.js5、src下创建utils.js6、src下创建main.js四、JS打包1、webpackdemo目录下创建配置文件webpack.confi
antd-dayjs-webpack-plugin::alarm_clock:适用于antd的Day.js Webpack插件
05-28
antd-dayjs-webpack-pluginA webpack plugin for . 一个 Day.js 的 Webpack 插件。Replace Moment.js with Day.js in antd project in ONE step. Bundle size reduced from 65 kb -> 4.19 kb.只需一步操作即可使用 ...
06 day5-Vue.js黑马全家桶笔记-webpack
01-08
webpack的基本使用2.1 列表隔行变色兼容性问题2.2 安装webpack2.3 设置webpack的打包入口/出口2.4 设置webpack的自动打包2.5 配置html-webpack-plugin2.6 webpack中的加载器（三) Vue单文件组件（1）Vue单文件组件...
zc910704#Vue.js-personal-note#day6.1.1.webpack的url-loader1
07-25
需要安装url-loader file-loader(url-loader的内部依赖，不需要配置)；url-loader会自动把图片转为base64编码，因此，
react-module-day1-start:Babel和Webpack环境设置
03-20
1. 安装Webpack：`webpack` 和 `webpack-cli`（命令行接口）。 2. 创建`webpack.config.js`配置文件，指定入口、输出、模块规则等： ```javascript module.exports = { entry: './src/index.js', // 项目入口文件...
HackDay2021-Frontend
05-18
6. **开发服务器**：如webpack-dev-server或http-server，提供自动刷新和热加载功能，加速开发过程。 7. **CSS预处理器**：如Sass或Less，提供更高级的语言特性，使CSS编写更加便捷和模块化。 8. **版本控制**：Git...
用户中心接口说明
hu_zhi_chao的博客
06-29 1279
用户中心接口说明1.数据校验功能说明接口路径参数说明：返回结果：2.生成短信验证码功能说明接口路径参数说明：返回结果：3.用户注册功能说明接口路径参数说明：返回结果：4.根据用户名和密码查询用户功能说明接口路径参数说明：返回结果： 1.数据校验 功能说明 实现用户数据的校验，主要包括对：手机号、用户名的唯一性校验。 接口路径 GET /check/{data}/{type} 参数说明： 参数 说明 是否必须 数据类型 默认值 data 要校验的数据 是 String 无 type 要校
day07-商品分类(vuetity-nginx-cors)
hu_zhi_chao的博客
06-23 513
商品分类0.学习目标1.搭建后台管理前端1.1.导入已有资源1.2.安装依赖1.3.运行一下看看1.4.目录结构1.5.调用关系2.Vuetify框架2.1.为什么要学习UI框架2.2.为什么是Vuetify2.3.怎么用？2.4.项目页面布局3.使用域名访问本地项目3.1.统一环境3.2.域名解析3.3.解决域名解析问题3.4.nginx解决端口问题3.4.1.什么是Nginx3.4.2.nginx作为web服务器3.4.3.nginx作为反向代理3.4.4.安装和使用安装反向代理配置使用3.5.测试4.
day05-vue入门
hu_zhi_chao的博客
06-22 497
vue入门学习目标0.前言1.认识Vue2.Node和NPM2.1.下载Node.js2.2.NPM3.快速入门3.1.创建工程3.2.安装vue3.2.1.下载安装3.2.2.使用CDN3.2.3.推荐npm安装3.3.vue入门案例3.3.1.HTML模板3.3.2.vue声明式渲染3.3.3.双向绑定3.3.4.事件处理4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子4.5.1.生命周期4.5.2.钩子函数4.5.3.this5.指令5.1.插值表达式
day11-Elasticsearch
hu_zhi_chao的博客
06-26 481
Elasticsearch0.学习目标1.Elasticsearch介绍和安装1.1.简介1.1.1.Elastic1.1.2.Elasticsearch1.1.3.版本1.2.安装和配置1.2.1.新建一个用户leyou1.2.2.上传安装包,并解压1.2.3.修改配置1.3.运行1.3.1.错误1：内核过低1.3.2.错误2：文件权限不足1.3.3.错误3：线程数不够1.3.4.错误4：进程虚拟内存1.3.5.重启终端窗口1.3.6.启动1.4.安装kibana1.4.1.什么是Kibana？1.4.2
day09-商品规格管理
hu_zhi_chao的博客
06-24 433
商品规格管理0.学习目标1.商品规格数据结构1.1.SPU和SKU1.2.数据库设计分析1.2.1.思考并发现问题1.2.2.分析规格参数1.2.3.SKU的特有属性1.2.4.搜索属性1.3.规格参数表1.3.1.表结构1.3.2.规格组1.3.2.规格参数2.商品规格参数管理2.1.页面布局2.1.1.整体布局2.1.2.右侧规格2.2.规格组的查询2.2.1.树节点的点击事件2.2.2.页面查询规格组2.2.3.后端代码2.3.规格参数查询2.3.1.表格切换2.3.2.页面查询规格参数2.3.3.后
webpack安装教程
08-25
要安装Webpack，首先需要确保你已经安装了Node.js和npm。然后按照以下步骤进行安装： 1. 打开命令行工具（如cmd或终端），运行以下命令来全局安装webpack-cli： ``` npm i webpack-cli -g ``` 2. 确认安装成功，可以在命令行工具中运行以下命令来检查webpack版本： ``` webpack -v ``` 3. 接下来，在你的项目文件夹中打开命令行工具，运行以下命令来安装本地的Webpack： ``` npm i webpack --save-dev ``` 4. 现在你可以使用Webpack来进行前端资源的加载和打包了。 请注意，以上是基本的Webpack安装方法。如果你想要了解更多关于Webpack的知识，可以参考Webpack官网提供的文档和教程。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [安装webpack的完整步骤](https://blog.csdn.net/heyy1997/article/details/121645002)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Webpack安装教程](https://blog.csdn.net/s_y_w123/article/details/88353493)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值