前端技术Vue.js&webpack

最新推荐文章于 2021-11-19 23:02:54 发布
最新推荐文章于 2021-11-19 23:02:54 发布
阅读量323 收藏
点赞数
分类专栏： 开发随手记 文章标签： vuejs webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leo1120178518/article/details/100938403
版权

Vue.js

vue.js 介绍

Vue是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层。还便于与第三方库或者是既有项目进行整合。

自底向上逐层应用，作为渐进式框架要实现的目标就是方便项目进行增量开发。

MVVM模式

vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js

MVVM拆分解释为：

  • Model：负责数据存储
  • View：负责页面展示
  • View Model：负责业务逻辑处理 比如ajax请求等，对数据进行加工后交给视图进行展示

MVVM要解决的问题是

  • 将业务 逻辑代码与视图代码进行完全分离。使各自的职责更加清晰，后期代码维护更加简单。
  • 用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图更新的缺点，以及使用MMVVM模式是如何来解决这个缺点的。

入门程序：

  1. 编写HTML文件 引入 vue.min.js
  2. 编写视图部分的代码（用户界面，只负责展示）
  3. 编写VM （viewmodel）及其中Model

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
    <script src="vue.min.js"></script>
    </head>
    <body>
    <!--实现在body区域显示一个郑州名称-->
    <div id="app">
    {{name}}<!--相当于MVVM的view视图-->
    </div>
    </body>
    <script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
    el:'#app',//vm接管了app区域的管理
    data:{//model数据
    name:'郑州'
    }
    });
    </script>
    </html>

vue.js常用指令

1. v-model

实现数据的双向绑定：

a、由模型数据绑定到Dom对象，模型数据的值改变，Dom的值自动改变
b、由Dom对象绑定到模型数据，Dom对象的值改变，模型数据就变

例如：

我们使用v-model来实现一个加法计算器的例子。在两个输入框中输入数据，显示两个数相加的结果。使用如下的一个简单地例子实现Dom对象和V-model双向绑定


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
    </head>
    <body>
    
    <div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    
    <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
    
		//在这里我们使用插值表达式进行计算
       {{Number.parseInt(num1)+Number.parseInt(num2)}}
		    

    </div>
    </body>
    <script src="vue.min.js"></script>

    <script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
    el:'#app',//vm接管了app区域的管理
    data:{//model数据
    name:'计算器',
    num1:0,
    num2:0,
    
    }
    });
    </script>
    </html>

v-model和Dom进行绑定，我们输入Dom中的值，然后模型中的值相应的进行改变。

以上就是双向绑定的效果

注意：

v-model
可以在表单控件或者组件上创建双向绑定
v-model只能在如下的元素中使用

  •   input   

  •   select   

  •   textarea   

  •   components（Vue）中的组件

v-text

在以上的例子中我们直接使用了一个插值表达式进行两个输入框中数据的计算，但是当我们的网上过慢的时候，会出现，表达式闪烁的问题，会显示表达式，表达式中的值无法及时的显示

v-test 可以将一个变量的值渲染到指定的元素中，它可以解决插值表达式闪烁的问题。

在上面的例子中，我们可以在标签中添加一个v-text

    <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
       <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
    
    <span v-text="result"></span>

加上v-test之后，当表达式中的值加载完毕之后，才会进行显示。

v-on指令

监听用户事件

在上面的例子中，我们增加一个计算的按钮


    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
       <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    
	<button v-on:click="change">计算</button>

    <script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
    el:'#app',//vm接管了app区域的管理
    data:{//model数据
    name:'计算器',
    num1:0,
    num2:0,
    result:0,
    size:11
    },
    methods:{
    change:function () {
    this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
    }
    }
    });
    </script>

使用 this.result 把计算结果存储到result变量中，我们访问模型中变量的时候，需要增加this. 这样才可以访问模型中的变量。

v-bind

  1. 作用：
    1. v-bind可以将数据对象绑定在dom的任意属性中
    2. v-bind 可以给dom对象绑定一个或者是多个特性，例如动态的绑定style 和class

例如 ：

<a v-bind:href="url">
<span v-text="name"></span>
</a>

我们在模型中增加<a>标签，标签中写上v-bind指令 然后在我们的模型中增加URL属性，这样标签中就可以显示URL属性中的内容。

style绑定：

用v-bind:style

形式是一个对象，对象的key是样式名（如fontSize，注意样式名需要采用驼峰式而不是css式），值是样式的值；

可以直接将对象名放在v-bind:style的等式右边；

对象的值改变，将实时影响内联样式；

对于某些样式，可以针对浏览器加前缀（但某些不能对所有浏览器兼容）；

v-for和vi-if

可以循环遍历一个数组或者是一个json数据中每一个属性值。

例：


    <!DOCTYPE html>
    <html lang="en">
    <head>     
    <meta charset="UTF‐8">     
    <title>Document</title>     
    <script src="/js/vue/vue.min.js"></script>
    </head>
    <body>
    <div id="app">     
    <ul>         
    <!‐‐只显示偶数行‐‐>         
    <li v‐for="(item,index) in list" :key="index" v‐if="index % 2==0"> {{index}}-{{item}}
    </li>      
       
    <li v-for ="(value,key) in user"> {{key}}‐{{value}}</li>         
    <li v‐for="(item,index) in userlist" :key="item.user.uname">             
    <div v‐if="item.user.uname=='heima'" style="background: chartreuse">
    <!‐‐名称为heima的 加背景色‐‐>                 
    {{index}}‐{{item.user.uname}}‐{{item.user.age}}             
    </div>             
    <div v-else="">                 
    {{index}}‐{{item.user.uname}}‐{{item.user.age}}             
    </div>         
    </li>     
    </ul>
    </div>
    </body>  
    
    <script>     
    new Vue({         
    el:'#app',         
    data:{             
    list:[1,2,3,4,4],             
    user:{uname:'zhangsan',age:10},             
    userlist:[                 
    { user:{uname:'xiaohua',age:10}},                 
    { user:{uname:'xiaoming',age:11}}             
    ]         
    }     
    });
    
    </script>
    
    </html>

2. webpack入门

我们在使用vuejs开发大型项目的时候，需要使用webpack打包工具

webpack介绍

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

  1. 模块化开发

    1. 程序员在开发时可以分模块开发，比如什么角色管理模块，用户管理模块等等模块。我们在不同模块的开发中，创建不同的js css等小文件 方便我们开发，最后使用webpack将这些小文件打包成一个文件，减少了http的请求次数。
    2. webpack可以实现按需打包，为了避免出现打包文件过大可以将文件打包成多个文件。

  2. 编译typescript ES6等高级js语法

    1. 随着前端技术的强大，开发中可以使用JavaScript的很多高级版本，比如typescripy ES6等方便开发，webpack可以将打包文件转换成浏览器可以识别的IS语法。。

  3. CSS预编译

    1. webpack允许在开发中使用Sass和Less等原生CSS的扩展技术，通过sass-loader 、less-loader将Sass和Less的语法编译成浏览器可识别的css语法。

webpack的缺点：

  • 1、配置有些繁琐

  • 2、文档不丰富

安装webpack

webpack是一个工具，使用之前我们需要进行安装。

webpack基于node.js运行，首先需要安装node.js

node.js介绍

node.js是Javascript的一个运行环境。nodejs是可以运行我们写的js文件的。

node.js是一个基于JavaScript运行时建立的平台，用于方便地搭建响应速度快，易于扩展的网络应用。Node.js使用事件驱动，非常适合在分布式设备上运行数据密集型的实时应用。

为什么会有node.js

有了node.js我们就可以在服务端解析JavaScript。

传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的JavaScript引擎是 V8，Node.js 是一个运行在服务端 的框架，它的底层就使用了V8引擎，这样就可以使用javascript去编写一些服务端的程序，这样也就实现了用javaScript去开发 Apache + PHP 以及 Java Servlet所开发的服务端功能，这样做的好处就是前端和后端都采用 javascript，即开发一份js程序即可以运行在前端也可以运行的服务端，这样比一个应用使用多种语言在开发效率上要高，不过node.js属于新兴产品，一些公司也在尝试使用node.js完成一些业务领域，node.js基于V8引擎，基于事件驱动机制，在特定领域性能出色，比如用node.js实现消息推送、状态监控等的业务功能非常合适。

安装node.js

  1. 下载对应的版本 https://nodejs.org/en/download/

  2. 选安装目录进行安装
    默认即可
    安装完成检查PATH环境变量是否设置了node.js的路径。  
    3、测试
    在命令提示符下输入命令
     
    会显示当前node的版本

安装NPM

  1. 我们在安装webpack之前需要安装node.js
  2. node.js的运行又依赖于NPM的包

所有我们要安装webpack 需要通过NPM来进行安装webpack

npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件。

node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本

npm -v 查看对应的版本

npm的工作原理就是，去远程下载所依赖的包。

  1. 设置npm下载的包路径

包路径就是npm从远程下载的js包所存放的路径。

使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）

NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules，

为了方便对依赖包管理，我们将管理包的路径设置在单独的地方，将安装目录设置在node.js的目录下，

创建npm_modules和 npm_cache，执行下边的命令：

因为我安装的node.js在D:\Program Files\nodejs下所以执行命令如下：

npm config set prefix "D:\Program Files\nodejs\npm_modules" 
npm config set cache "D:\Program Files\nodejs\npm_cache"

我在修改此处命令的时候，还出现个问题就是，上面的两行命令无法执行成功。路径显示未修改，这个时候也可以直接修改nodejs的配置文件。

修改npm文件夹下的npmrc文件，打开修改里面的内容，原来的内容删掉，写入

prefix=D:\Program Files\nodejs\npm_modules
cache=D:\Program Files\nodejs\npm_cache

此时再使用 npm config ls 查询NPM管理包路径发现路径已更改

  1. 安装cnpm

我们使用npm的时候，默认是从国外的镜像中进行下载的 ，我们可以使用cnpm从国内的镜像中下载。

cnpm替代了npm，可以从国内的镜像中下载文件。

npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像

下边我们来安装cnpm： 有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令，进行全局安装淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装后，我们可以使用以下命令来查看cnpm的版本
cnpm -v

安装webpack

webpack安装分为本地安装和全局安装：

  • 本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。
  • 全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个 项目。全局安装需要添加 -g 参数。

进入webpacktest测试目录目录，运行：

1）本地安装

只在我的项目中使用webpack，需要进行本地安装，因为项目和项目所用的webpack的版本不一样。本地安装就会 将webpack的js包下载到项目下的npm_modeuls目录下。

在门户目录下创建webpack测试目录webpacktest01：

npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)

2）全局安装加-g，如下： 全局安装就将webpack的js包下载到npm的包路径下。

npm install webpack -g 或 cnpm install webpack -g

3）安装webpack指定的版本：

本教程使用webpack3.6.0，安装webpack3.6.0：
进入webpacktest测试目录，

运行：

cnpm install --save-dev webpack@3.6.0

全局安装：

npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g

在cmd状态输入webpack，出现如下提示说明 webpack安装成功

No configuration file found and no output filename configured via CLI option.
A configuration file could be named ‘webpack.config.js’ in the current directory.
Use --help to display the CLI options.

webpack入门程序

主要是webpack打包的过程及模块化开发的思想。

实现对js文件的打包，体会webpack是如何对应用进行模块化管理。
对上边1+1=2的例子使用webpack进行模块化管理

在webpacktest01目录下创建model01.js 将本程序使用的加法运算的js方法抽取到一个js文件，此文件就是一个模块

model01.js

    /**
     * Created by Administrator on 2019/9/9.
     */
    
    var add = function (x, y) {
    return x+y;
    }
    var add2 = function (x, y) {
    return x+y+2;
    }
    module.exports.add = add; //model01导出之后，才能导入，ES5高级语法
    // module.exports ={add,add2};//如果有多个方法这样导出
    // module.exports.add2 = add2//如果有多个方法也可以这样导出

2, 定义入口文件，main.js

在webpacktest01目录下创建main.js，main.js是本程序的js主文件，

包括如下内容：

1、在此文件中会引用model01.js模块
2、引用vue.min.js（它也一个模块）
3、将html页面中构建vue实例的代码放在main.js中。

main.js的代码如下


	//导入model01.js
	var {add} = require("./model01")
	var Vue = require("./vue.min")
	
	var VM = new Vue({
	    el:'#app',//vm接管了app区域的管理
	    data:{//model数据
	        name:'计算器',
	        num1:0,
	        num2:0,
	        result:0,
	        size:11
	    },
	    methods:{
	        change:function () {
	            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))
	        }
	    }
	});

打包测试

上边将mode01.js模块及main.js主文件编写完成，下边使用webpack对这些js文件进行打包

1、进入程序目录，进入到该文件上所在目录，然后打开命令窗口执行以下命令

webpack main.js build.js

执行webpack main.js build.js ，这段指令表示将main.js打包输出为 build.js文件
执行完成，观察程序目录是否出现build.js。

执行结果：

Asset Size Chunks Chunk Names
build.js 105 kB 0 [emitted] main
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[1] ./main.js 447 bytes {0} [built]
[2] ./model01.js 377 bytes {0} [built]
[3] ./vue.min.js 86.7 kB {0} [built]
+ 3 hidden modules

执行完之后，我们就会在我们的项目文件夹下，看到生成的一个build.js文件

然后我们在HTML中，就可以使用来引用我们打包的文件。

以上就是webpack打包的过程。。。

总结：webpack开发过程

1）分模块去定义js
在js找那个要导出将来要被打包的方法module

2）定义main,js 入口文件，这个文件是主文件。在此文件中，导入引用的js文件var {add} = require("./model01")。。可以在main.js中使用导入的js方法

3）使用webpack命令打包js

4）在HTML上引用打包生成的js文件

以上是手动的打包过程，下面使用webpack-server 实现自动的打包和部署

3. webpack-dev-serve

webpack-dev-server开发服务器，它的功能可以实现热加载 并且自动刷新浏览器。

3.1 安装webpack-dev-serve

使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装完成，自动创建nodemodule文件夹，这是这个程序所有依赖的包。而且还会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。

配置webpack-dev-serve

在package.json中配置script

"scripts": {     
	"dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"   
},
  • inline：自动刷新
  • hot：热加载
  • port：指定端口
  • open：自动在默认浏览器打开
  • host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

此时package.json的文件内容如下：

{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}
  • devDependencies：开发人员在开发过程中所需要的依赖。
  • scripts：可执行的命令
配置webpack.config.js

我们可以在项目目录下创建 webpack.config.js，

webpack.config.js是webpack的配置文件。

在此文件中可以配置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin插件。

html-webpack-plugin的作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一 个index.html文件。

  1. 配置模板文件

vue_02.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>vue.js常用指令的测试</title>
	</head>
	<body>
	<!--实现在body区域显示一个传智播客名称-->
	<div id="app">
	    <!--相当于MVVM的view视图-->
	    <!--{{name}}-->
	    <span v-text="name"></span>
	    </a>
	    <input type="text" v-model="num1"/> +
	    <input type="text" v-model="num2"/>=
	
	    <span v-text="result"></span>
	    <button v-on:click="change">计算</button>
	</div>
	</body>
	<script>
	    //编写MVVM中的model部分及VM（ViewModel）部分
	
	</script>
	</html>
2、配置 html-webpack-plugin

在webpack.config.js中配置html-webpack-plugin插件


	//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
	var htmlwp = require('html-webpack-plugin');
	module.exports={
	    entry:'./src/main.js',  //指定打包的入口文件
	    output:{
	        path : __dirname+'/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
	        filename:'build.js'		   //输出文件
	    },
	    devtool: 'eval-source-map',
	    plugins:[
	        new htmlwp({
	            title: '首页',  //生成的页面标题<head><title>首页</title></head>
	            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
	            template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
	        })
	    ]
	}
启动

启动文件：
1、进入项目文件目录，打开命令窗口，执行npm run dev

2、使用webstorm，右键package.json文件，选择“Show npm Scripts”
打开窗口：

双击 dev。

注意：dev就是在package.json中配置的webpack dev server命令。

发现启动成功自动打开浏览器。

修改src中的任意文件内容，自动加载并刷新浏览器。

以上就是使用webpack打包和使用配置的过程

子非鱼leo
关注
专栏目录
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
等风来
08-31 2万+
正式开始学习前 确保你已学过前端三件套 HTML CSS JavaScriptVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应用程序开发中。前端框架那么多，为什么Vue.js非学不可？Vue.js的简洁语法和易用性使得它成为构建现代Web应用程序的优秀选择，无论是小型项目还是大型复杂的应用都能发挥出色的效果。Vue.js使用双向绑定的数据模型，将数据和视图进行关联。
Vue.js与Webpack
weixin_43974572的博客
08-16 526
Vue.js与Webpack 1 vue.js研究 1.1 vue.js介绍 1、 vue.js是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以
Vue.js创建Webpack项目
As的博客
04-18 1130
npm install -D grunt-cache-bust npm install -D fs-extra npm install uglify-js@^2.8.0 npm install rollup-plugin-uglify --dev npm install --save-dev @babel/core npm install --save-dev rollup npm i roll...
解决报错：No configuration file found and no output filename configured via CLI option.
零碎@流年絮语 的博客
01-26 7379
错误分析：无法识别webpack.config.js文件 报错的原因： 第一种情况：webpack.config.js文件所在路径不对 webpack.config.js文件应该在根目录下，而不是在src文件夹中 第二种情况：webpack.config.js文件解析错误 在package.json文件中，找到scripts，查看build的属性值， 例1： "build": "webpack" 上面是代码中的build，对应的工程项目结构如下 例2： "build": "webpack --confi
webpack打包错误：No configuration file found and no output filename configured via CLI option.
小北风的博客
01-25 3462
webpack打包报错：当我将webpack.config.js中的内容进行开发和运行分离后，又将webpack.config.js该文件删除，运行打包报如下错误: No configuration file found and no output filename configured via CLI option. A configuration file could be named ‘webpack.config.js’ in the current directory. 原因是，没有在packag
webpack在配置过程中出现的问题
weixin_30527423的博客
01-13 634
在自行配置webpack.config.js的时候出现很多的问题，踩过的坑越多，就记得越牢； 1. configguration.output.path:The provided value './build' is not an absolute path 或者ReferenceError: _dirname is not defined 解决方法：配置path的时候需要用到的是绝对路径...
window下安装node.js并安装cnpm、webpack、webpack-dev-server
weixin_43569697的博客
04-28 1377
我用的node.js的版本是9.4，如果没有什么特别需求的话，建议安装跟着这个版本安装。 到nodejs的官网下载 https://nodejs.org/en/download/ 滚动到页面底部，选择以前的版本 找到nodejs9.4的版本，点击download进入https://nodejs.org/download/release/v9.4.0/，自行选择64位的或32位的 下载完成后点...
vue.min.js&vue.min.js&vue.common.js&vue.esm.js&vue.runtime.js等 真实资源共计14个js
04-22
Vue.js 是一个流行的轻量级前端JavaScript框架，用于构建用户界面。它采用了声明式的数据绑定和组件化的设计，使得开发过程更加高效且易于维护。在提供的压缩包中，包含了多种不同版本的Vue.js库，这些版本各有其...
Vue.js与Webpack安装教程
10-30
Vue.js和Webpack是现代前端开发中的两个重要工具。Vue.js是一个轻量级的JavaScript框架，以其易学易用、组件化开发和高性能的特点受到开发者喜爱。Webpack则是一个模块打包工具，能够有效地管理和优化项目的资源，...
Vue.js与Webpack.pdf
08-22
### Vue.js与Webpack知识点概述 #### 一、Vue.js简介 **1.1 Vue.js定义** - **定义**: Vue.js (/vjuː/, 类似于“view”) 是一种专为构建用户界面而设计的渐进式JavaScript框架。与其他全面覆盖前端开发各个方面...
整理Webpack安装问题以及让bundle.js自动修改问题相关笔记
青椒的博客
09-06 500
我的是win10系统，不好过和安装好像没什么关系 以下是整理的我看的一个教学视频的安装教程，之前也看过其他的视频，讲得不详细，按好几天都安不上，这里详细写一下过程，对应我之前那个疯狂安装4.0版本的后续…菜鸟放弃了安装4.0 进入正题 安装webpack首先需要安装Node.js,这个百度之后直接去官网下载对应版本就可以，Node.js自带了软件包管理工具npm 下载完成后，win+r->...
webpack2.0 基本使用
weixin_30571465的博客
04-13 162
　　webpack是一款前端模块打包工具, 它的出现是由于现代web开发越来越复杂，如果还是像原来那样把所有的js代码都写到一个文件中，维护非常困难。而解决复杂化的方法通常是分而治之，就是把复杂化的东西进行拆分，形成一个个小的模块，这也是现代web 开发提出的模块化的概念，代码进行拆分，写成一个个小的模块，模块化方案又先后出现了commanjs ,amd, ES6 module方案， 但浏览器并不...
webpack 大法好 ---- 基础概念与配置（1）
weixin_33901926的博客
03-02 112
再一次见面！ Light 还是太太太懒了，距离上一篇没啥营养的文章已经过去好多天。今天为大家介绍介绍 webpack 最基本的概念，以及简单的配置，让你能快速得搭建一个可用的 webpack 开发环境。 webpack的安装 webpack 运行于 node 环境，node 的安装在这就不赘述了。由于 Light 是基于 webpack...
webpack，列出版本报错问题，错误形式多种多样。
Da_ci_hua的博客
11-19 1030
webpack安装 这里我要提醒一下，如果安装webpack1,2,3按照百度上的教程应该不会有问题，但是如果安装最新版本的那 就要注意了 先执行 npm insatll --save-dev webpack 分别依次执行 npm install --save-dev webpack-cli npm install --global webpack npm install --global webpack-
vue-cli配置文件详解
Mr_Yan的博客
02-01 6816
该webpack版本号为3.6.0　　 　　这段时间以来，项目一直都是用Vue全家桶及vue-cli,于是便把vue-cli配置文件给整理了以下，希望对大家能有所帮助。 一：文件的配置结构如下 ├─build │ ├─build.js │ ├─check-versions.js │ ├─logo.png │ ├─utils.js │ ├─vue-loade
Windows下Node.js与npm的安装与配置
热门推荐
TragueZw的博客
01-16 2万+
Node.js和npm的第一次配置
npm WARN enoent ENOENT: no such file or directory, open 'E:\Program Files\nodejs \package.json' npm
菜鸟史
10-26 6068
npm WARN saveError ENOENT: no such file or directory, open 'F:\NodeJS\package.json' npm WARN enoent ENOENT: no such file or directory, open 'F:\NodeJS\package.json' npm WARN NodeJS No descriptio
npm ERR! Windows_NT 6.1.7601 npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nod
wxt185的博客
08-17 1万+
npm ERR! Windows_NT 6.1.7601 npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\ node_modules\npm\bin\npm-cli.js” “install” “webpack” “–save-dev” npm ERR! node v6.9.2 npm
Vue.js与Webpack构建的CMS前端开发实战教程
"该资源是一份关于前后端分离式分布式微服务架构的CMS前端开发教程，包含Vue.js技术、Webpack工具以及CMS前端工程创建和分页查询的实践内容。此外，还提供了源代码和视频教程，帮助学习者深入理解和应用相关技术。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值