webpack+vue.js构建前端工程化的详细教程

2024-11-30 17:05:07

本篇主要介绍三块知识点： node.js ,vue.js,webpack前端工程化，希望对您能有所帮助。

本文来自于csdn,由火龙果软件Alice编辑推荐。

node.js基本入门

node.js介绍

node.js可以让javascript程序在后端运行起来。我们之前所熟知的javascript都是运行在前端浏览器，我们编写好了javascript代码后，由浏览器解释执行。而node.js，可以让我们编写javascript，然后在后端运行起来。现在的javascript和java、python一样，可以操作I/O、操作数据库、或者其他各类操作系统资源。

上面这张图，和下面的这张图很像。可以认为，node.js是javascript的一种跨平台运行在主机的实现。

环境搭建

下载node.js （运行环境）

https://nodejs.org/en/

下载Visual Studio Code（开发环境）

https://code.visualstudio.com/

npm介绍

写过Java的同学应该都知道，我们要编写程序往往都需要导入很多其他额外的JAR包（官方的JavaSE包默认提供了）。早期在Maven出现之前，我们都是需要手动去下载各种框架的JAR包。自从有了Maven之后，我们不再需要手动下载了，直接在一个POM.XML文件中引入需要的依赖即可。在node中，运行一个node程序也会依赖于其他的一些模块。当然node也会自带一些基本模块。那当我们需要使用这些模块的时候，我们需要从网络上下载。这个去网上下载非常麻烦。node官方提供了一个管理工具npm，这个工具可以根据需要自动从服务器下载各种包。这就省去了，我们自己去网上下载包的过程。

npm淘宝镜像

官方的npm在国内速度是比较慢的，可以使用淘宝的镜像

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

安装完成后，就可以使用cnpm从淘宝镜像来下载、安装node包

使用cnpm安装包

cnpm install <包的名称>

包的名称可以去https://npm.taobao.org/上搜索

node.js模块化程序结构

每一个js文件就是一个模块（json等其实也可以作为一个模块），对应的就是一个module对象。下面这一段程序，表示从外部引入一个模块，然后执行模块中的函数。

var fs = require("fs"); // 引入fs模块

var data = fs.readFileSync('input.txt'); // 调用fs模块中的readFileSync方法

console.log(data.toString());

第一行的, required表示引入一个包，返回的就是module对象。这个fs包，是node自带的包，引入一个包后就可以调用这个包下的方法。但是包中的方法不是都可以被调用的，只有类似：

exports.world = function() {

console.log('Hello World');

}

这样的代码，才能被调用。更简单来说，在包中定义的函数都是对外不可见的，要想被外部调用，需要使用exports来定义函数。

这个require函数有点类似于C语言中的#include。它首先会从文件cache缓存中查找传入的模块名，如果没有找到再查找原生模块，最后查找文件中加载。

node.js重要模块(API)介绍

node.js全局对象

node.js原生模块

实现一个用户管理模块

创建项目

建立一个空的文件夹用于保存该项目

进入命令提示符，使用npm init初始化项目，结束后会自动生成一个package.json文件，这个文件中包含了项目的所有依赖包，可以把这个package.json文件理解为项目文件

创建客户Service模块

/**
 * 客户Service
 */
 exports.CustomerService = function() {
 this.customers = [];

 // 添加客户
 this.add = function(cstm) {
 this.customers.push(cstm);
 }

 // 根据客户名字移除
 this.remove = function(name) {
 for(var i = 0; i < this.customers.length; ++i) {
 if(this.customers[i].name === name) {
 this.customers.splice(i, 1);
 break;
 }
 }
 }

 // 获取所有客户
 this.findAll = function() {
 return this.customers;
 }
 }

创建入口模块index.js

var customerService = require('./customerService');
 var cm = new customerService.CustomerService();
 cm.add({name: '小乔', age: 20, sex: '女'});
 cm.add({name: '二乔', age: 21, sex: '女'});
 cm.add({name: '大乔', age: 22, sex: '女'});
 // 查询所有客户
 var cstms = cm.findAll();
 console.log("---");
 console.log(cstms);
 // 删除客户
 cm.remove("小乔");
 console.log("---");
 console.log(cm.findAll())

执行node index.js

PS H:\code\nodejs\02> node .\index.js
 ---
 [ { name: '小乔', age: 20, sex: '女' },
 { name: '二乔', age: 21, sex: '女' },
 { name: '大乔', age: 22, sex: '女' } ]
 ---
 [ { name: '二乔', age: 21, sex: '女' },
 { name: '大乔', age: 22, sex: '女' } ]

vue.js基本入门

介绍

Vue是一套前端框架。它实现了前端页面视图（HTML/CSS）和模型数据的分离，而且它提供了快速简单构建组件的方式。让我们以一种全新的方式来开发前端。

基本编程模型（模板 + 模型）

使用Vue指令定义模板

<div id="app">

<span>

{{name}}

</span>

</div>

使用Vue定义数据模型

var app2 = new Vue({
 el: '#app',
 data: { // 定义模型数据
 name: 'Hello, Tom!'
 },
 method: { // 定义绑定数据方法
 sayHello: function() {
 alert('hello!');
 }
 }
 })

常用指令介绍

组件化开发

在前端开发中引入组件化是一个大的进步。其实，如果我们用过一些UI框架就会知道，大多数的UI框架都定义了很多的组件，例如：button按钮、datagrid表格组件、tree树形组件、dialog对话框组件等等。但是，之前我们都是使用别人给我们开发好的框架。我们今天要学习如何使用Vue来开发一个自己的组件。将来，我们可以自己开发一套自己的组件库，然后使用这些组件库来构建我们的前端应用程序。

组件结构

可以把组件理解为就是一个小的页面视图。使用Vue开发的组件也分为两个部分：

视图模板

属性（模型数据）

视图模板依旧是使用HTML/CSS+Vue指令，但是模型数据现在跟之前不太一样，模型数据应该是使用组件的时候，动态传入进来的。所以，模型数据需要先定义出来。

实现一个购物车程序

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>购物车</title>
 <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" rel="external nofollow" >
 </head>
 <body>
 <div id="app" class="container">
 <h1>购物车</h1>
 <hr>
 <btn-grp :buttons="buttons"></btn-grp>
 <btn-grp :buttons="buttons_test"></btn-grp>
 <btn-grp :buttons="buttons"></btn-grp>
 <btn-grp :buttons="buttons_test"></btn-grp>
 <br>
 <br>
 <table class="table table-bordered table-striped table-hover">
 <tr>
 <th>ID</th>
 <th>商品名称</th>
 <th>商品价格</th>
 <th>商品数量</th>
 <th>商品总价</th>
 </tr>
 <tr v-for="(prod, index) in products">
 <td>{{index+1}}</td>
 <td>{{prod.name}}</td>
 <td>{{prod.price}}</td>
 <td>
 <button @click="changeCount(prod, -1)">-</button>
 <input type="text" v-model="prod.count">
 <button @click="changeCount(prod, 1)">+</button>
 </td>
 <td>{{prod.price * prod.count}}</td>
 </tr>
 <tr>
 <td colspan="4" class="text-right">总价:</td>
 <td class="text-primary">{{getTotalMoney()}}</td>
 </tr>
 </table>
 </div>
 <script src="./vue.js"></script>
 <script>
 // 自定义组件，这里实现了一个按钮组组件
 Vue.component('btn-grp', {
 props: ['buttons'],
 template:
 '<div class="btn-group" role="group">'
 + '<button type="button" @click="btn.handler" v-for="btn in buttons" :class="\'btn \' + (btn.class == null || btn.class == \'\' ? \'btn-default\':btn.class)">'
 + '{{btn.title}}'
 + '</button>'
 + '</div>'
 });

 var app = new Vue({
 el: '#app',
 data: {
 // 按钮组件测试
 buttons_test: [
 {title: '测试1', class: 'btn-danger'},{title: '测试2'},{title: '测试3'},{title: '测试4'},
 ],
 buttons: [{
 title: '添加',
 class: 'btn-primary',
 handler: function() {
 alert('点击添加按钮');
 }
 }, {
 title: '修改',
 class: 'btn-default',
 handler: function() {
 alert('点击修改按钮');
 }
 }, {
 title: '删除',
 class: 'btn-default',
 handler: function() {
 alert('点击删除按钮');
 }
 }, ],
 products: [
 {
 name: '小米6S',
 price: 3999,
 count: 1,
 },
 {
 name: '锤子2',
 price: 4999,
 count: 1,
 },
 {
 name: '华为P20',
 price: 3599,
 count: 1,
 },
 {
 name: 'OPPO R15',
 price: 2999,
 count: 1,
 },
 {
 name: 'OPPO R11',
 price: 1999,
 count: 1,
 },
 ],
 },
 methods: {
 // 用户点击加减数量时调用
 changeCount: function(prod, num) {
 if(num < 0) {
 if(prod.count > 0) {
 prod.count += num;
 }
 }
 else {
 prod.count += num;
 }
 },
 // 获取总金额
 getTotalMoney: function() {
 var totalMoney = 0.0;

 for(var i = 0; i < this.products.length; ++i) {
 totalMoney += parseFloat(this.products[i].price * this.products[i].count);
 }

 return totalMoney;
 }
 }
 });
 </script>
 </body>
 </html>

效果图

使用webpack构建前端工程化

webpack介绍

webpack是一个前端项目构建工具。使用webpack可以把前端当成一个工程来开发。而且能够很好地把前端的各类资源统一管理、编译、打包。

它是一个“编译器”，可以通过各种插件将基于node.js、sass、less编写代码编译成能够运行在前端浏览器的javascript、和css

它是一个打包工具，可以将所有前端的资源打包到一个bundle.js中

有了webpack，我们可以像开发后端应用一样开发前端。

总体结构图

webpack是基于node.js开发的一款应用，其实webpack就是一个node.js的模块。

安装webpack

创建一个空的文件夹

使用npm init创建package.json

安装cnpm淘宝镜像

使用cnpm install vue-cli -g全局安装vue-cli模块

使用vue init webpack cart创建基于webpack购物车项目

使用cnpm install bootstrap --save安装bootstrap模块

具体步骤请参考：https://www.webpackjs.com/guides/installation/

使用webpack重构购物车程序

使用vue-cli生成项目脚手架如下图：

将原来编写的btn-grp组件单独编写到BtnGrp.vue文件中

可以看到现在代码清晰了很多，template标签部分编写模板，script标签部分编写组件的交互代码，编写方式和原先写在HTML的代码一致

现在整个前端应用都是基于组件化的，代码变得更加清晰了

<template>
 <div class="btn-group" role="group">
 <button :key="btn.title"
 type="button" @click="btn.handler"
 v-for="btn in buttons"
 :class="'btn ' + (btn.class == null || btn.class == '' ? 'btn-outline-secondary':btn.class)">
 {{btn.title}}
 </button>
 </div>
 </template>

 <script>
 export default {
 props: ['buttons']
 }
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 </style>

将原来写在HTML中的代码重构到App.vue中

此处因为需要用到BtnGrp组件，所以需要先import 组件，然后在components中引用该组件

<template>
 <div id="app" class="container">
 <h1>WEBPACK + VUE 实现购物车</h1>
 <BtnGrp :buttons="buttons"></BtnGrp>
 <br/>
 <br/>
 <table class="table table-bordered table-striped table-hover">
 <tr>
 <th>ID</th>
 <th>商品名称</th>
 <th>商品价格</th>
 <th>商品数量</th>
 <th>商品总价</th>
 </tr>
 <tr :key="index+1" v-for="(prod, index) in products">
 <td>{{index+1}}</td>
 <td>{{prod.name}}</td>
 <td>{{prod.price}}</td>
 <td>
 <button class="btn btn-outline-info btn-sm" @click="changeCount(prod, -1)">-</button>
 <input style="width:50px" type="text" v-model="prod.count">
 button class="btn btn-outline-info btn-sm" @click="changeCount(prod, 1)">+</button>
 </td>
 <td>{{prod.price * prod.count}}</td>
 </tr>
 <tr>
 <td colspan="4" class="text-right">总价:</td>
 <td class="text-primary">{{getTotalMoney()}}</td>
 </tr>
 </table>
 </div>
 </template>

 <script>
 /* eslint-disable no-new */
 import 'bootstrap/dist/css/bootstrap.min.css'
 import BtnGrp from './components/BtnGrp'

 export default {
 name: 'App',
 components: {BtnGrp},
 data () {
 return {
 products: [
 {
 name: '小米6S',
 price: 3999,
 count: 1,
 },
 {
 name: '锤子2',
 price: 4999,
 count: 1,
 },
 {
 name: '华为P20',
 price: 3599,
 count: 1,
 },
 {
 name: 'OPPO R15',
 price: 2999,
 count: 1,
 },
 {
 name: 'OPPO R11',
 price: 1999,
 count: 1,
 },
 ],
 buttons: [{
 title: '添加',
 class: 'btn-outline-primary',
 handler: function() {
 alert('点击添加按钮');
 }
 }, {
 title: '修改',
 class: 'btn-outline-primary',
 handler: function() {
 alert('点击修改按钮');
 }
 }, {
 title: '删除',
 class: 'btn-outline-danger',
 handler: function() {
 alert('点击删除按钮');
 }
 }, ],
 changeCount: function(prod, num) {
 if(num < 0) {
 if(prod.count > 0) {
 prod.count += num;
 }
 }
 else {
 prod.count += num;
 }
 },
 getTotalMoney: function() {
 var totalMoney = 0.0;

 for(var i = 0; i < this.products.length; ++i) {
 totalMoney += parseFloat(this.products[i].price * this.products[i].count);
 }
 ?
 return totalMoney;
 }
 }
 }
 }
 </script>
 <style>
 #app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
 }
 </style>

因为npm安装的bootstrap是bootstrap4，所以稍微对原先的样式调整了下。最终的效果图如下：

总结

到此这篇关于webpack+vue.js构建前端工程化的文章就介绍到这了,更多相关webpack vuejs 前端工程化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

VueJs 将接口用webpack代理到本地的方法

上一篇博文,我们已经顺利的从cnodejs.org请求到了数据,但是大家可以注意到我们的/src/api/index.js的第一句就是: // 配置API接口地址 var root = 'https://cnodejs.org/api/v1' 这里我们的接口地址是写死的,这固然是一个问题,但是其实并不是最重要的,而是在cnodejs.org已经帮我们把接口处理的很好了,帮我们解决了跨域问题.而在实际开发中,很多项目接口是不允许我们跨域请求的. 而在第一章说到的前后端分离开发模式,前端开发前端,同
基于vuejs+webpack的日期选择插件

基于vuejs+webpack环境使用的日期选择插件,希望大家喜欢. 支持单选和多选日期支持限定开始和结束日期范围选择. 支持小时分钟需要引入fontawesome.io 的图标库. Options :show 是否显示 :type date|datetime :value 默认值 :begin 可选开始时间 :end 可选结束时间 :x 显示x坐标 :y 显示y坐标 :range 是否多选 test.vue <template> <input type="text&quo
Vuejs2 + Webpack框架里,模拟下载的实例讲解

在实际的开发工作中,难免要配合销售人员,提前做一些前端的 DEMO 出来.这个时候往往还没有连接后端 API.假如要演示一个下载连接,那么应该如何做呢? 我们希望能够达成以下两点: 1.在开发环境下,我们可以在 webpack-dev-server 开发服务器上点击下载连接,点击后浏览器就能不下载文件. 2.当演示的时候,代码编译后放到 nginx 中.用户可以点击下载链接.nginx存放的都是业务代码. 那么如何做到这两点呢?假如我们要模拟下载一个 test.docx 文件.我们可以利用 ur
webpack+vue.js构建前端工程化的详细教程

本篇主要介绍三块知识点: node.js ,vue.js,webpack前端工程化 ,希望对您能有所帮助. 本文来自于csdn,由火龙果软件Alice编辑推荐. node.js基本入门 node.js介绍 node.js可以让javascript程序在后端运行起来.我们之前所熟知的javascript都是运行在前端浏览器,我们编写好了javascript代码后,由浏览器解释执行.而node.js,可以让我们编写javascript,然后在后端运行起来.现在的javascript和java.pyt
Vue.js项目前端多语言方案的思路与实践

目录一.通常有哪些内容需要处理二.基本思路三.具体实践中的一些细节 1.获取当前应该采用何种语言的getLang模块的实现 2.Vux组件的多语言包的配置 3.vux-loader的配置 4.自定义组件内外文案的多语言化 5.vuex-i18n的实现 6.图片的多语言化 7.在当前页面通过按钮切换当前语言后,如何更新当前页面的内容? 8.Yaml中特殊字符的转义总结前端的国际化是一个比较常见的需求.但网上关于这一方面的直接可用的方案却不多.最近刚做了一版基于Vue.js的多语言实现,在
Vue.js 事件修饰符的使用教程

一.前言熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作. 仓储地址: https://github.com/Lanesra712/VueTrial/tree/master/Chapter01-Rookie/directives 二.干货合集
vue+koa2搭建mock数据环境的详细教程

前段时间写了一篇前端vue项目实现mock数据方式的文章,主要是在vue项目里使用mock数据,数据和项目耦合在一起,不太优雅,作为一个有追求的前端,怎么能容忍这种方法呢?特以此篇,记录利用koa2搭建服务端,提供mock数据的方法. 初始化vue项目这里以vue项目为主,当然别的类型项目依然可以使用这种mock数据的方式. vue create vue-koa2-demo 前提是安装了vue-cli的脚手架,我电脑安装的是vue-cli3的版本.按照要求一步一步选择后,记得选择安装vuex,
vue中使用vuex的超详细教程

目录一.适合初学者使用,保存数据以及获取数据二.模块化(适合有部分基础的人) vuex是使用vue中必不可少的一部分,基于父子.兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据. 那么,我们一起来看看vue项目怎么使用它吧.(如果你对vuex有一定了解,不是刚接触的小白,请忽略第一步,直接查看第二步) 一.适合初学者使用,保存数据以及获取数据 1.在sto
使用Node.js搭建静态资源服务详细教程

对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如果有使用express框架,用express.static一行代码就可以达到目的了: app.use(express.static('public')) 这里我们要实现的正是express.static背后所做工作的一部分,建议同步阅读该模块源码. 基本功能不急着写下第一行代码,而是先梳理一下就基
vue.js项目打包上线的图文教程

最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的.这里我简单的列出这个过程: 首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里
vue实现搜索关键词高亮的详细教程

目录正文解析正则api——exec reg.exec执行接下来看看执行具体的执行结果提取关键字并分组完整vue代码正文废话少说先上效果(左侧代码,右侧效果) 第一组第二组第三组看到什么规律了吗? 没错!!这份代码就是依靠正则表达式来做出高亮效果,你负责传入str与reg,而函数则负责实现代码的高亮解析结构部分如下 <template> <div> <span :class="index%2!==0?'hightLight':''"
如何使用Vuex+Vue.js构建单页应用

前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和自定义功能,在这里和大家分享下学习心得. 在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex.我们将大概的过一遍什么是 Vuex.js,在项目中什么时候使用它,和如何构建我们的 Vue 应用. 这里放一张我们项目的预览图片: 项目源码:vuex-notes-app:有需要的同学可
webpack+vue.js实现组件化详解

简介在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |

webpack+vue.js构建前端工程化的详细教程

相关推荐

随机推荐