BelleDiao的博客

项目准备安装Vetur插件，并做配置、devtool等。组件拆分之目录结构与框架搭建mainheader组件实现1、页面显示2、样式3、

Babel 官网：https://www.babeljs.cn/webpack：https://www.babeljs.cn/setup#installation一、使用Babel安装：npm install --save-dev babel-loader @babel/core配置：{ module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, u

一、

休息休息

官网：https://www.webpackjs.com/guides/development/https://www.webpackjs.com/configuration/dev-server/watch mode（不常见）webpack-dev-server（常用）webpack-dev-middleware开发环境配置（一）devServer为我们提供了一个简单的服务器，并能够实时重新加载。1、安装npm install -D webpack-dev-...

Watch Modedev-server

九、插件在某个时间点，自动执行的处理程序（一）html-webpack-plugin：打包结束时，在dist目录下自动生成index.html 文件，并把打包好的js文件引入到html中。1、安装：npm install -Dhtml-webpack-plugin2、配置插件：（1）在webpack.config.js中引入插件（2）在plugins:[],中添加配置内容。再次打包之后，只要npm run build，index.html 就自动打包到dist中。但是自.

七、css打包css文件是前端项目不可少的文件，webpack通过css-loader和style-loader来打包css文件。1、安装css-loader和style-loader安装file-loader时，css-loader已经安装好了，可以在package.json中查看。安装style-loader：npm install -D style-loader2、在webpack.config.js中添加规则书写顺序：按照从右到左，从下到上3、创建css文件在sr

五、file-loader 基本使用1、安装：npm install -D file-loader此时：2、接下来需要对webpack进行配置（设置打包规则）3、在src文件夹下，新建assets文件夹，用于存放资源文件。以导入1.png为例：在app.vue中，写入importimgfrom'./assets/images/1/png'怎么实现导入图片的过程的：（从配置文件开始看起）从打包入口main.js 开始，开始打包，就开始加载内容，当加载到a...

bilibili中找到一个讲的很好的webpack+vue教程：https://www.bilibili.com/video/BV157411V7Dh?from=search&seid=13060654339969180489代码见git：一、准备工作1、项目初始化： npm init -y 生成package.json2、安装webpack和webpack-cli npm install -D webpack webpack-cli （...

换了新电脑装了nodejs等一系列软件还是不会启动项目也不知道哪里的问题。bug都记录在文章里面了。这次的问题可能是最有意义的。出现问题：解决方案：删掉node_modules.安装readme的说明就行：npm install----》 npm run dev注意npm install 太慢， 我一晚上都没下好，后来选择用淘宝镜像。很快成功了。...

因为npm连接的数据源网站太慢，可以使用淘宝提供的npm数据源，npm config set registry https://registry.npm.taobao.org使用NPM（Node.js包管理工具）安装依赖时速度特别慢，为了安装Express，执行命令后两个多小时都没安装成功，最后只能取消安装，笔者20M带宽，应该不是我网络的原因，后来在网上找了好久才找到一种最佳解决办法，在安装时可以手动指定从哪个镜像服务器获取资源，我们可以使用阿里巴巴在国内的镜像服务器，命令如下：npm in

直接用VS Code 打开项目，先输入 npm init -y ，然后在终端输入npm run dev的时候，提示错误信息：PS C:\Users\Bella\Desktop\vue-admin-template-master> npm run dev> vue-admin-template@4.4.0 dev C:\Users\Bella\Desktop\vue-admin-template-master> vue-cli-service serve'vue-cli-se

直接用VS Code 打开项目，先输入 npm init -y ，然后在终端输入npm run dev的时候，提示错误信息：最后看了一些资料，很多都说用淘宝镜像来运行：cnpm install使用这个命令首先得安装淘宝镜像。我没有用这个。后来看到也可以直接用npm install来运行。最后再执行npm run dev...

npm install xxx会把X包安装到node_modules目录中 不会修改package.json 之后运行npm install命令时，不会自动安装X-g全局安装-S， --save会把X包安装到node_modules目录中 会在package.json的dependencies属性下添加X 之后运行npm install命令时，会自动安装X到node_modules目录中-P, --save-prod: Package will appear in yourdep

安装nodejs时直接用上面的命令分别安装了nodejs，npm，和nrm，安装后 nrm ls 错误，查了一下，发现是node版本太低，我windows上node版本是10.16，ubuntu上只是4.2，更新nodejs版本即可。node -v4.2.1sudo npm cache clean -fsudo npm install -g nsudo n stable sudo ln -sf /usr/local/n/versions/node/<新的版本号>...

一、nrm是什么？nrm是一个管理npm的工具二、nrm的安装$npm install -g nrm三、nrm命令$nrm ls　　// 查看所有的支持源（有*号的表示当前所使用的源,以下[name]表示源的名称）$ nrm use [name]　　// 将npm下载源切换成指定的源$ nrm help　　// 查看nrm帮助$ nrm home [name]　　// 跳转到指定源的官网如果在你的网络不太理想或者在不能FQ的情况下，又或者收到其他网络限制导致不能...

项目场景：问题描述：运行vue项目 提示 npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查原因分析：解决方案：用管理员打开vscode

拿到一个项目先用init管理起来：npm init -y（会产生package.json文件）2、安装webpack-dev-server (实现自动打包js文件)3、本地安装webpack4、写配置文件：webpack.config.js (写打包的入口和出口文件)5、在package.json的script节点下添加 "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"6、安装html-webpac

# Vue.js - Day5 - Webpack## 在网页中会引用哪些常见的静态资源？+ JS- .js .jsx .coffee .ts（TypeScript 类 C# 语言）+ CSS- .css .less .sass .scss+ Images- .jpg .png .gif .bmp .svg+ 字体文件（Fonts）- .svg .ttf .eot .woff .woff2+ 模板文件- .ejs .jad...

1、npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。在vscode里面按Ctrl+~打开终端，输入npm -v 或其它命令显示无法运行，是因为没有使用管理员打开vscode，使用管理员打开vscode就可以了2、webpack : 无法加载文件 C:\Users\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本以管理员身份运行powershell然后输入：set-ExecutionPolicy Remo.