月影WEB-CSDN博客

1.在 package.json 文件中中添加调试 webpack 配置文件的代码。"scripts": { "debug": "node --inspect-brk ./node_modules/webpack/bin/webpack.js --config ./webpack.dev.config.js",}【node】：通过node启动。【inspect】：调试模式。【brk】：在首行打一个断点，调试代码会在首行停住。【./node_modules/webpack/...

2022-05-28 21:14:16 961 4

原创 webpack的配置详解

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。通俗的解释就是：webpack 可以将你项目中的每一个模块都进行打包编译成一个或者多个静态资源，然后可以通过打包过后的静态资源来展示你的项目内容。webpack（webpack.config.js）的核心概念：1.入口(entry)打包模块的入口，在没有设置【入口(entry)】的时候，默认的入口路径为：【./src/index.js】。代码：单页面应用：module.exports

2022-05-27 19:58:52 616 4

原创三分钟带你快速了解网站开发的整个流程

很多人都对网站从无到有的过程很好奇，其实这个并没有那么神秘！网站的整个制作流程其实不难。下面【月影WEB】就来给大家讲讲网站从无到有及其到上线的整个流程。第一步：你要知道你想要做一个什么样的网站。把你想做的网站页面UI用PS（或者是其它制图软件）做出来！第二步：根据你用PS（或者是其它制图软件）做出来的网站UI页面图片进行切图，并且用代码将页面的图片转化为网页。也就是按照PS（或者是其它制图软件）的UI设计图的样子来写代码（可能会用到HTML/CSS/JAVASCRIPT..

2022-05-26 18:53:36 2433 10

原创 Vue3+webpack项目的vuex封装

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单解释就是它是用来放项目所有组件都能共享的数据用的。首先安装vuex：npm i vuex -s封装vuex的目录结构如下图：图1【./src/store】：用来存放封装 vuex 相关文件的文件夹；【./src/store/index.js】：封装 vuex 的主体文件，创建全局store，存放全..

2022-05-23 20:51:46 764 11

原创项目中常用到的git命令的详解

本地的git操作：1.创建分支。git branch【要创建的分支名】例子：git branch yueying2.切换分支。git checkout 【要切换的分支名】例子：git checkout yueying3.创建并切换分支。git checkout -b 【创建出来的分支名】例子：git checkout -b yueying4.查询本地分支。git branch5.删除本地分支。git branch -d 【需要删除的...

2022-05-23 20:38:11 609 3

原创 Vue3+webpack的axios的封装

首先安装axios：npm i axios -s然后在根目录的 src 文件夹下新建一个 servers 文件夹，接着在 servers 文件夹下新建 axios.js 和 request.js 文件。目录文件结构如下图：图1./src/servers/axios.js：代码：/*** 文件主要用来创建 axios 实例，然后添加请求拦截器和响应拦截器*/import axios from 'axios'// 1.定义存放后端请求的服务地址的常...

2022-05-20 21:23:32 1184 8

原创解决Vue3+webpack调试代码部分编码不方便调试的问题

如何解决Vue3+webpack调试代码部分编码不方便调试的问题？页面代码如下图所示：图1<template> <div @click="methods.goToList">ceshi</div> <router-view></router-view></template><script>import { setup } from 'vue'import { axiosGet }...

2022-05-20 20:09:46 939 3

原创 Vue3+webpack的vue-router路由封装

Vue的路由封装需要用到的文件如下图：图1主要用到的文件有：./src/views文件夹及其文件夹下的文件；./src/router文件夹及其文件夹下的文件；./src/index.js和./src/App.vue；views文件夹：用来放页面代码页面模块的。views文件夹下有admin和webroot这两个文件夹，也是将此项目分为了两个模块，每一个模块都有自己独立的路由文件，这样便于项目的后期扩展开发和维护。admin文件夹：文件夹下放的是项目后台管理页面的相关代码；ad.

2022-05-19 19:49:00 1272 8

原创解决Vue不支持运行时编译的问题(...runtime compilation is not supported in this build of Vue...)

在Vue开发这种如果遇到以下警告：[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".如下图：图1翻译出来的意思是：[Vue warn]:组件提供模板选项，但在此版本的Vue中.

2022-05-18 16:19:35 4822 1

原创项目推送到远程gitLab库时一般需要排除什么文件及其如何排除？

不管是前端项目还是后端项目在将项目代码推送到远程gitLab的时候总会有一些不需要推送到远程项目库的文件。比如说：系统文件、应用程序配置文件、构建组件、安装的依赖、个人文件、应用程序数据、日志等等；前端（React/Vue）项目中的：node_modules、build等等；node_modules：是用来放依赖模块用的，因此不需要推送到远程gitLab项目库中，因为此文件下面的依赖模块可以通过npm install来进行安装下载，而npm install会根据package.json文件中

2022-05-17 13:37:42 938 9

原创 Vue3的vue-router路由详解

这篇文章是接着【三分钟快速搭建Vue3+webpack项目】的内容做的开发，有基础的可以跳过【三分钟快速搭建Vue3+webpack项目】，直接看以下的内容。Vue3的vue-router路由详解：首先安装路由依赖模块：npm install vue-router@4所需代码文件如下图：图1所需要的主要文件：index.html、index.js、App.vueindex.html：模板页面，项目中的代码编译之后都是放入到模板页面中id为app的元素这种。代码如下：..

2022-05-16 22:06:12 35794 11

原创三分钟快速搭建Vue3+webpack项目

快速搭建Vue3+webpack项目项目目录如下图：其中：package.json：对项目进行描述，包括项目的基本信息、依赖模块的版本信息等等；注意：可以手动创建或者通过npm init自动创建。代码：{ "name": "yydpt_vue_base", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test sp

2022-05-12 20:37:40 2739 8

原创 [零基础学习Vue3+webpack项目]的vue3代码的开发编译及其启动项目服务的详解（3）

在[零基础学习Vue+webpack]之vue+webpack项目的基础依赖项的安装详解（1）https://blog.csdn.net/qq_34297287/article/details/124656994?spm=1001.2014.3001.5501和[零基础学习Vue+webpack]之vue3+webpack项目的webpack对vue3进行编码打包的详解（2）https://blog.csdn.net/qq_34297287/article/details/124677916?spm

2022-05-10 20:42:18 888 8

原创 [零基础学习Vue3+webpack项目]的webpack对vue3进行编码打包的详解（2）

首先声明这是vue3+webpack；在：[零基础学习Vue+webpack]之vue+webpack项目的基础依赖项的安装详解（1）https://yydpt.blog.csdn.net/article/details/124656994?spm=1001.2014.3001.5502中已经对vue+webpack的基础依赖项进行了安装和讲解，这篇文章继续对项目的依赖项进行完善。首先在package.json文件中的scripts加上"start": "webpack"；然后执行package

2022-05-09 23:27:23 1691 2

原创 [零基础学习Vue3+webpack项目]的基础依赖项的安装详解（1）

首先新建一个空的项目文件夹：yydpt_vue_base图1然后用vscode开发此项目文件图2因为此项目准备用vue+webpack，因此可以先安装webpack这个项目打包工具，以下是详细步骤地址：webpack的安装步骤及文件（1）https://yydpt.blog.csdn.net/article/details/124505511?spm=1001.2014.3001.5502这里就不过多的解释了，直接新建终端，然后在终端中输入：npm init如下图：..

2022-05-08 23:33:05 1413 6

原创前端Vue框架的多种使用方式

首先需要说明的是Vue是前端框架之一；Vue.js可以根据项目需求以不同的方式集成到项目中去。其中主要的方式有两种：第一种：在页面上通过<script>标签直接引用vue库。其中有两种引用方式：一个是直接通过引入远程包文件来使用vue框架，这种方式方便快捷，页面加入一个引入标签即可开始使用vue了；<script src="https://unpkg.com/vue@next"></script>缺点也比较明显，因为这个库文件不在自己的项目

2022-05-07 23:45:41 2239 2

原创 webpack如何跨域和打包线上如何用nginx跨域？

首先项目的前后端完全分离，并且前端和后端各用了一个服务，也就是两个服务，方便前后端各自分开开发；在前端用react开发完之后，一般都是用的webpack来开启前端服务，然后后端也同时开启对应的后端服务。第一种情况：前端和后端代码都在本地。此时本地的前后端服务分别是：前端：http://localhost:8888后端：http://localhost:8085而前端代码中一般都会有大量需要访问后端API接口的功能，因为前后端是不同的两个服务，因此会涉及到跨域访问后端API接口，这个时候就需

2022-05-06 00:06:54 2218 14

原创 webpack的安装步骤及文件（1）

1.检查是否有安装npm。在windows系统下，同时按下windows+R调出命令，输入CMD，如下图：图1打开命令工具，输入命令：npm -v如下图：图2图中显示了5.6.0说明已经安装了npm，显示的5.6.0是npm的版本，如果没有安装的话就要先去安装一下npm之后再继续接下去的操作；2.进入项目文件夹并生成package.json文件。新建一个空文件newitem，如下图：图3然后用命令工具进入这个新项目的空文件夹，然后再输入npm init，如下...

2022-04-29 22:16:58 1524

原创 sql语句对数据库表进行操作

sql语句创建表：CREATE TABLE 表名 (`id` int(11) NOT NULL AUTO_INCREMENT,PRIMARY KEY (`id`))sql语句修改表名：rename table 旧表名 to 新表名;sql语句增加表字段：alter table 表名 add 字段名字段类型(字段长度)sql语句表批量增加字段：alter table 表名 add (字段名1 字段类型1(字段长度1),字段名2 字段类型2(字段长...

2022-04-28 23:37:46 811 4

原创动态改变react页面＜head＞中的内容

首先安装依赖项：npm install --save-dev react-helmet然后新建一个组件HeadHelmet，代码如下：import React from 'react';import { connect } from 'react-redux';import { Helmet } from "react-helmet"; // 引用head管理工具class HeadHelmet extends React.Component { render () { ...

2022-04-28 20:34:16 1277 2

原创 sql语句的增加、删除、修改、查询语句

sql语句的增加数据：insert into 表名 (字段名1,字段名2,字段名3,...) values (字段名1的值,字段名2的值,字段名3的值,...)sql语句的删除数据：删除表的所有数据：delete from 表名根据条件删除数据：delete from 表名 where 需要删除的条件字段 = 字段对应的条件值sql语句的修改数据：修改表的所有数据：update 表名 set 字段1=字段名1的值,字段2=字段...

2022-04-28 00:08:54 13689 2

原创前端brackets软件安装和插件安装方法

最近发现很多人都不会安装前端软件brackets。首先你需要有一个brackets的安装包和brackets的插件！软件下载地址：brackets软件大家可以先下载下来！然后解压安装包之后会看到一个安装软件，如下图所示：点击安装之后会出现如下图所示的弹窗，这里将软件安装到默认文件夹或单击改变选择其他的位置！这里我点击"Change..."把文件安装到我选择的电脑的位置！不知道电脑路径的人可以选择"Next"选择安装到默认文件夹也一样！选择好安装路径之后点..

2022-04-26 23:36:20 2226 3

原创 javascript/js常用正则表达式

javascript/js常用正则表达式说明正则表达式网址（URL） [a-zA-z]+://[^\s]* IP地址(IP Address) ((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?) 电子邮件(Email) \w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* QQ号码 [1-9]\d{4,} HTML标记(包含内容或自闭合)

2022-04-26 23:29:48 158

vue3+webpack+vue-router路由封装+axios封装+vuex封装

vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，资源代码需要先：npm install 安装下依赖组件之后就可以启动测试了。

2022-05-23