web前端开发期末作业vue 如何通过 Vue+Webpack 来做通用的前端组件化架构设计

今天，我爱编程网小编为关注前端开发的同学们准备了web前端开发期末作业vue 如何通过 Vue+Webpack 来做通用的前端组件化架构设计，下面一起来看一下吧。

WEB前端目前的主要学习内容是什么？

这里根据行业变化和企业用人需求整理了一份web前端学习路线，主要学习以下内容，希望可以帮到你~

第一阶段：专业核心基础

阶段目标：

1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2. 熟练运用HTML+CSS特性完成页面布局。

4. 熟练应用CSS3技术，动画、弹性盒模型设计。

5. 熟练完成移动端页面的设计。

6. 熟练运用所学知识仿制任意Web网站。

7. 能综合运用所学知识完成网页设计实战。

知识点：

1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。 我爱编程网

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

第二阶段：Web后台技术

阶段目标:

1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2. 熟练掌握JavaScript的基本数据类型和变量的概念。

3. 熟练掌握JavaScript中的运算符使用。

4. 深入理解分之结构语句和循环语句。

5. 熟练使用数组来完成各种练习。

6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7.DOM和BOM实战练习和H5新特性和协议的学习。

知识点：

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

第三阶段：数据库和框架实战

阶段目标：

1. 综合运用Web前端技术进行页面布局与美化。

2. 综合运用Web前端开发框架进行Web系统开发。

3. 熟练掌握Mysql、Mongodb数据库的发开。

4. 熟练掌握vue.js、webpack、elementui等前端框技术。

5. 熟练运用Node.js开发后台应用程序。

6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

知识点：

1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。

2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

第四阶段：移动端和微信实战

阶段目标：

1.熟练掌握React.js框架，熟练使用React.js完成开发。

2.掌握移动端开发原理，理解原生开发和混合开发。

3.熟练使用react-native和Flutter框架完成移动端开发。

4.掌握微信小程序以及了解支付宝小程序的开发。

5.完成大型电商项目开发。

知识点：

1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Redux基本概念。练使用react完成项目开发、掌握Redux中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。

如何通过 Vue+Webpack 来做通用的前端组件化架构设计

angular:

我觉得angularjs的学习上手周期比较长，可能遇到问题，都无法立刻解决，而且编码的质量明显的很差，如果团队没有制定规范，那写出来的代码就没法看。对于一个选用angularjs的团队来说，我认为编码规范是很重要的，否则对编码能力是没有提升的。

avalon:

avalonjs文档资料没有那么全，我感觉一些开源支持的力量不够多。不过，如果有项目需求，需要去做IE浏览器的支持话，我建议选择avalonjs

vue：

vuejs 文档比较齐全，vue吸取了angularjs
的一些优点，规避了一些缺点，至少编码规范上有了一个质的飞跃，学习上手的周期比较短。vue起初只是一个轻量级的类库，用来做类似于react的事情，
同时vue也是可以拿来做前端架构设计的，比如：vueify + vue-router （spa框架）。

vue学习地址：

以上说了那么多没用的，下面就来点干活了！

我的前端组件化架构设计，目录如下：

项目架构用到的知识点，还是挺多的，知识清单如下：

［1］: gulp + webpack 构建打包工具， 使用了一系列的loader，比如：vue-loader, sass-loader, babel-loader , 以及 postcss，postcss-custom-properties，等等

[2] : postcss-custom-properties : 用来做样式全局化, 只需要通过变量去维护，通过编译变量既可以换肤。

[3] : vue-loader （vue文件组件化）:用来去编译处理 *.vue 的文件，一个vue 文件就是一个单独的组件，vue组件开发具有高独立且易维护。组件的划分可大可小，一个页面也可以看作成由多个vue 组件构成的，一个页面也可以是一个vue组件, vue 文件结构如下：

[4] ： babel-loader ：实现对vue文件中 es6 语法的编译解析

[5] ： vue-router ：用来做路由分发，而且文档非常的齐全（学习地址: -router/zh-cn/index.html ）。

[6] ： vue （插件式方式）：vue本身提供了一个install 方式用来注入，我们可以注入一些全局的(属性、方法、以及通用的ui组件)。

下面说说文件夹的含义：

common 文件夹: 是用来存一些通用的东西，比如样式，以及全局的js等等

components 文件夹：用来放独立的组件，我打算后期做细分，ui 组件，以及page 组件等等，这里面就是团队的心血，以后就能做成独立的组件库了。

filters 文件夹：用来放通用的过滤器操作。

plugins 文件夹：用来放 Vue.use 注入到Vue全局的插件库，比如：请求加载、弹框、分页、ui组件 等等。plugins 只是把 componets 组件暴露给 Vue全局。

views 文件夹: 用来存放页面模块

app.vue 文件：第一次启动的主程序模块

app.js 文件：启动前的加载，注入，实例化

router.config.js 文件：路由模块

目前该架构在前后台的SPA架构都适用，可能还是有很多不完善，不过我还很年轻，vue也还狠年轻，望各位道友多给我们年轻人一些机会。

web前端vue实现插值文本和输出原始html

Vue.js
使用了基于
HTML
的模板语法，允许开发者声明式地将
DOM
绑定至底层
Vue
实例的数据。所有
Vue.js
的模板都是合法的
HTML
，所以能被遵循规范的浏览器和
HTML
解析器解析。
在vue里最常见的数据绑定是使用“Mustache”语法
(双大括号)
的文本插值：
<span>Message:
{{
value
}}</span>
//
插值文本
无论何时，绑定的数据对象上
value
属性发生了改变，页面上都会响应的做出重新渲染。
或者有时候只是想更新一次，不想每次都更新数据了页面也重新渲染，可以通过
v-once指令也能实现一次性的更新：
<span
v-once>这个将不会改变:
{{
value
}}</span>
//
value的值改变了一次后，第二次改变时就不会再重新渲染页面
有时候你插入的不是单单一个文本时，比如一个富文本的值时，它包含了各种文本值和各种原始的html的标签，要完整的显示到页面上，就得使用v-html的指令：
<template>
<div
v-html="htmlvalue"></div>
//
调用显示富文本，将会按照原始的html显示
</template>
<script>
export
default
{
data(){
return{
htmlvalue:
'<span
>the
should
be
red</span>'
//
比如：这是一个富文本的值
}
}
}
</script>
注意：你的站点上动态渲染的任意
HTML
可能会非常危险，因为它很容易导致XSS
攻击。请只对可信内容使用
HTML
插值，
绝不要
对用户提供的内容使用插值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue模板语法-插值详解

以上就是我爱编程网小编为大家带来的web前端开发期末作业vue 如何通过 Vue+Webpack 来做通用的前端组件化架构设计，希望对大家有帮助，了解更多相关资讯请关注我爱编程网。