Ⅰ 如何通过 Vue+Webpack 来做通用的前端组件化架构设计
angular:
我觉得angularjs的学习上手周期比较长，可能遇到问题，都无法立刻解决，而且编码的质量明显的很差，如果团队没有制定规范，那写出来的代码就没法看。对于一个选用angularjs的团队来说，我认为编码规范是很重要的，否则对编码能力是没有提升的。
avalon:
avalonjs文档资料没有那么全，我感觉一些开源支持的力量不够多。不过，如果有项目需求，需要去做IE浏览器的支持话，我建议选择avalonjs
vue：
vuejs 文档比较齐全，vue吸取了angularjs
的一些优点，规避了一些缺点，至少编码规范上有了一个质的飞跃，学习上手的周期比较短。vue起初只是一个轻量级的类库，用来做类似于react的事情，
同时vue也是可以拿来做前端架构设计的，比如：vueify + vue-router （spa框架）。
vue学习地址：http://cn.vuejs.org/
以上说了那么多没用的，下面就来点干活了！
我的前端组件化架构设计，目录如下：
项目架构用到的知识点，还是挺多的，知识清单如下：
［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 ：用来做路由分发，而且文档非常的齐全（学习地址:http://vuejs.github.io/vue-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也还狠年轻，望各位道友多给我们年轻人一些机会。
Ⅱ 基于Vue3+TS+ElementPlus+Qiankun构建微应用项目
Hello 大家好，这里是Anyin。
最近打算把一个小型项目（小程序点餐系统）重构为微服务+微应用模式，前端的技术栈打算使用Vue3 + TS + ElementPlus + Qiankun 。这里记录下我在构建基础微应用的过程。
重构后的项目相关地址：
•后端： Anyin Cloud [1]
•前端基座： Anyin Cloud Parent[2]
•前端微应用： Anyin Cloud Base[3]
好了，接下来，我们来看看如何基于 Vue3+TS+ElementPlus+Qiankun 构建我们的微应用项目。
另外说下，这正销猛里为什么不用 Vite 进行构建，原因是 Vite 目前结合 Qiankun 构建为应用还有点问题（采坑了），所以这里就放弃了。
首先，我们使用 vue-cli 创建一个parent项目:
接着，手动选择我们要添加的组件：
我们选择以下组件进行应用的构建，使用空格键进行多选，然后回车即可：
选择vue3.x版本
相关代码风格、路由模式都是使用默认，css编译我们使用less：
相关编码规范我们使用ESLint + Airbnb Config ：
最后，完整的选项如下：
当vue-cli帮我们创建好项目，我们进入项目查看下项目目录，如下：
首先，Qiankun的主应用是需要安装依赖的，微应用无需安装依赖，修改配置即可。这里我们先在主应用安装依赖
接着，进行相关微应用配置。我们新增一个 app.ts ，用于记录所有的微应用斗慧的入口：
然后，注册微应用，并导出start方法
导出 start 方法之后，需要在入口处执行该方法
对于整个界面，我们希望整体的布局是这个样子的：
所以，我们在安装 ElementPlus 之后，需要做这样子的布局。
首先，安装 ElementPlus
接着，在 main.ts 引入 ElementPlus 组件，如下:
然后，创建一个布局组件 Layout.vue ，如下：
最后，在App.vue注册该组件
运行起来呈现的效果如下：
微应用的初始化项目同主应用，这里就不详细说明。
微应用无需依赖 Qiankun ，这里我们做一些配置即可。
在 src 目录下新增一个 public-path.js 文件，内容如下：
在 main.ts 引入该文件
新增一个路由配置文件，这里我们创建对应的路由信息，并且兼容独立运行，内容如下：
接着，修改 main.ts 关于实例化的代码，如下：
这里主要是定义个渲染的方法，然后暴露举桥Vue实例，因为等下在微应用的生命周期的钩子会使用到。
对于微应用还需要暴露生命周期的钩子方法，这样子主应用才能够识别，在 main.ts 添加如下方法：
使用 vue 创建项目是没有 vue.config.js 文件的，这里我们手动创建一个，并且配置相关详细，代码如下：
•这里我们导入了 package.json 的 name 字段，因为这里需要和主应用配置的 app.ts 文件的 name 字段一致 • headers 添加跨域配置，因为主应用是通过 fetch 方法来获取微应用的资源的，而微应用是启动在另外一个端口，所以需要添加跨域配置 • output 配置了微应用的打包格式，主应用才能正确识别微应用的一些配置
还记得我们以下这个图不？
我认为 Header 应该是属于主应用，而下面的 Aside 和 Main 都是属于微应用， Aside 块一般都是用于展示菜单，个人认为各个微应用应该各自维护自己的菜单，而不是交由主应用维护。
所以，在微应用，我们还需要处理下左侧的菜单布局。
我们新增一个 Layout.vue 布局文件
至此，Vue3+TS+ElementPlus+Qiankun构建微应用项目的一个基本结构我们已经处理完成，整体运行看下效果：
首页
微应用
好了，基于 Vue3+TS+ElementPlus+Qiankun 的微应用项目基本框架我们已经搭建好了，后续就是慢慢填充一些工具和页面了。
相关源码地址：
•主应用： Anyin Cloud Parent
•微应用： Anyin Cloud Base
[1] Anyin Cloud : https://gitee.com/anyin/anyin-cloud
[2] Anyin Cloud Parent: https://gitee.com/anyin/anyin-cloud-parent
[3] Anyin Cloud Base: https://gitee.com/anyin/anyin-cloud-base
Ⅲ vue项目完整搭建步骤
为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。指档
下载并安装node
下载地址为：https://nodejs.org/en/
在 nodejs官网下载最新版稳定版的node.js安装，自带了npm工具 ,推荐下载左边的。
检查node是否安装成功
为了更快安装，可以使用淘宝的镜像：http://npm.taobao.org/
在终端输入以下命令：
检测cnpm是否安装成功
vue-cli是vue脚手架工具缓租，方便打包，部署，测试等。
进入你的项目目录，创建一个基于 webpack 模板的新扰逗兆项目: vue init webpack 项目名
进入项目
安装依赖
此时项目中会多了一个node_moles
启动成功
Ⅳ Github配合Jenkins，实现vue等前端项目的自动构建与发布
转原文： https://www.jianshu.com/p/4c4f92209dd1
因为它是依赖于 Java 环境的，所以必须先安装 java 环境，否则启动 Jenkins 服务的时候会报错哦。
执行以下命令安装JDK，一步到位。建议安装版本1.8以上的
我一般习惯使用 yum 安装软件。由于 yum 的 repo 中默认没有 Jenkins ，所以需要先将 Jenkins 库添加到 yum repos 中，依次执行下面的命令：
赋予 Jenkins 在网站根目录的读写权限，我这边网站的根目录为 /usr/share/nginx/hxkj
启动 Jenkins
因为 jenkins 默认使用 8080 端口，如果使用的是云服务器，还需要在安全组中开放 8080 端口（如果不想使用 8080 端口，或者端口被占用了，可以在 Jenkins 的配置文件里修改默认端口）
可以根据页面提示在服务器中找到该密码，输入如下命令：（ cat 命令后面的路径为页面上显示的标红文字，每个人的可能不一样）
这一步，啥都不用做，慢慢等吧。。。
接下来默认插件安装完成之后，创建一个管理员账户，完成配置后，就可以登录 Jenkins 了
打开 系统管理 => 管理插件 搜索 NodeJs 然后勾选安装
打开 系统管理 => 全局工具配置 拉到底部 配置 node 版本，如图：
所有命令
步骤分离之后，如下图
进入 github 设置页，选择 Developer settings
选择 Personal access tokens => Generate new Generate
勾选如下配置，然后点击 Generate Generate ，一定要保存好这个 token 哦，它只显示一次。
打开 系统管理 => 管理插件 搜索 Github Plugin 然后勾选安装
然后进入 系统管理 => 系统设置 => Github Server 添加信息
凭据 那里再点击 添加 添加如下信息
添加完毕之后记得选择我们刚刚添加的凭据信息
最后点击 连接测试 如果如下显示，说明配置是正确的
当完成 push 操作之后，回到 Jenkins 管理页面，就会看到在构建队列中，新增了一条记录。
而且，查看构建日志，也提示成功！！！
Ⅳ （一）基于 vue-element-admin 前端与后端框架搭建
通过 src/settings.js 进行全局配置：
get-page-title.js 在 src/permission.js 中被引用
修改 package.json
执行命令启动
中间件是一个函数，请求和响应周期中被顺序调用
写一个中间函数
调用中间件注意事项：
应用如何响应请求的一种规则
响应 / 路径的 get 请求
响应 / 路径的 post 请求
规则主要分两部分
通过自定义异常处理中间件处理请求中产生的异常
使用时需要注意两点：
浏览器输入 http://localhost:5000/user
安装 boom 依赖，最大的好处是可以快速的帮我们生成一些异常信息
app.js
创建 router 文件夹，创建 router/index.js
创建 router/user.js
创建 router 文件夹，创建 router/constant.js
启动，访问根路径 http://localhost:5000
这里指定的路由的前缀 /user 所有访问路径前要加 /user
访问 http://localhost:5000/user/info
访问一个不存在的路径
自定义路由异常处理中间件
注意两点:
访问一个不存在的路径时，会返回一个 json 的结果，方便前端做出处理
Ⅵ Vue3-前端构建工具(Vue-Cli和Vite) & 计算属性 & 侦听器
vue3使用环境：Vue CLI 4.x以上，Node.js版本 8.9以上。
main.js
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。使用 Vite 可以快速构建 Vue 项目。
Vite 需要 Node.js版本 12.0以上。
在Vue3中，定义计算属性，需要引入computed组合式API。computed()函数的参数是一个回调函数，回调函数的返回值，就是计算属性的返回值。
在Vue3中，定义侦听器，需要引入 watch组合式API 。
watch函数 有三个参数：① 侦听谁，② 回调函数，③ 配置对象(可以省略)。如果监听的是一个对象/对象里的某个属性，第一个参数就是一个函数，由该函数返回指定对象中监视的属性。
注意： watch监视对象，默认开始深度监视，并且无法关闭。所以直接监视整个对象不好。vue3建议我们，监视对象时，指定监视对象的属性。如果监视的对象属性也是一个对象，默认不开启深度监视，需要手动开启。
watchEffect()监视器： 只有一个回调函数参数，并且没有参数。特点：① 该回调函数一开始会执行一次；② 不需要明确的去监视谁，回调函数里面用到了谁，谁变了，就会重新执行回调函数。
在Vue2中可以定义过滤器，但是在Vue3中已经取消了过滤器。Vue3推荐我们使用方法 或 计算属性的方式，实现之前过滤器的效果。
在vue3的模板中，不再需要根标签，它内部有一个fragment的组件作为模板的根标签。
Ⅶ 前端项目开发<Vue>
说明： 在项目开发中，在一个js或css文件中如果导入其他目录下的相关文件，就需要通过如下方式,
示例：
但如果每次都导入同一目录下的文件，会比较麻烦，就可以通过设置简写路径达到同样的导入效果
配置方法如下，其中key值为自定义的简写名称（如stylePath），value值为配置的路径
示例：
在需要跳转的元素外包裹一层 <router-link></router-link> ，使用 to 语法即可跳转到指定的页面中
实际上，HTML会将 router-link 渲染成 <a> 标签
这就会导致被 router-link 包裹的元素中的文字显示成 <a> 默认的蓝色样式，可通过如下方式解决：
使用tag将 router-link 标记为 li 标签，这样既保证了 ul 中的子元素为 li ，又保证了html在渲染的时候，不会讲 router-link 渲染为 a 标签
如果某一页面多次被访问，并且其中的数据基本保持不变，则可以使用页面缓存的技术：
注： 当页面被缓存后，生命周期钩子 mounted 方法则只会在第一次进入的时候，执行一次，就不会再执行了。但生命周期钩子方法 activated 方法会每次调用
但如果页面的数据根据传过来的参数来判定是否需要缓存和刷新数据，则可以通过生命周期的钩子 activated 来实现数据的刷新
如果通过 keep-alive 进行页面的缓存，会将其包裹下的路由子页面都会被缓存，假如其中的某一子页面不需要被缓存，则可以通过 exclude 语法将不需要缓存的页面隔离出去，保证其每次都会重新加载请求：
注：
当在一个页面拖动到底部的某个位置的时候，再点击其中的一个元素进入到下一个页面，则进入的这个页面也会被拖到相同的位置，这就造成了多页面的拖动影响
在路由配置中，加入一项 scrollBescrollBehavior ，即每次进行路由切换的时候，让页面的初始位置为指定的x和y值
前端项目通过webpage 启动的，它不支持IP的形式进行页面访问，所以需要修改项目的默认配置项
在项目的根目录下的package.json文件中，进行如下配置：
注： 主页增加了 --host 0.0.0.0
在某些浏览器和手机上不支持一些es6和vue的新特性，就会出现兼容性的问题
通过使用第三方框架库 babel-polyfill 来解决兼容性问题
参考文章： https://blog.csdn.net/crazyfeeling/article/details/70241285
说明：
Ⅷ 5分钟看懂VUE项目
VUE是前端开发框架。诞生于2014年吧。
原始的前端开发框架需要工程师写html、写css、写javascript(js)。js是脚本语言，浏览器可以运行js来执行一些js支持的动作，例如点击反馈，下拉菜单、操作html的DOM元素之类。这样开放效率就很低了。
后来诞生了一些前端开发框架，VUE就是其中之一。目前在国内前端开发中，特别是手机app的h5页面的开发部分，被很多公司采用。
使用VUE开发的时候，不需要js直接操作html元素，只需要管理js的变量值，html会自动更新这些值。传统的html配合js能完成的功能，VUE都给出了实现方案，开发只写简单的html和js语句就可以实现。
VUE开发的工具一般是visio stdio code（vscode），稍微适应两天就可以熟练应用了。还是很强大的。
但是vscode本身只是编辑器，开发编译类语言需要自己配编译环境，具体我没配过。
前端开发不需要配编译环境了，只需要把需要的各种库、工具在命令行界面安装就行。具体过程网上搜“从零开始搭建vue项目”。
刚建立好的项目一定是下面这种目录结构（ranktable.vue是我后加的
这对于新手村的人会引起头晕呕吐，老子啥都没写就出来这么多文件，不但数量不少，文件种类还齐全。
学习VUE别想一下吃的太多，除非你本身前端经验丰富。否则先看懂红色箭头的几个文件吧，看懂这几个就算入门了。看的顺序严格按照下面这样。
index.html->main.js->App.vue->index.js->HelloWorld.vue
我将这几个文件大概讲一讲，你就能有个清晰的脉络了。
一、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tradedatapy</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
页面开发当然是要有html了，VUE开发也不例外。这个html就是整个项目的入口了。只不过是<body>里面过于简单。<div id="app"></div>表示本html绑定了一个id为app的VUE对象。
二、main.js
new Vue({ //new Vue语句就是定义了一个VUE对象
el: '#app', //vue对象的id是app
router,
components: { App }, //vue的组件名是APP
template: '<App/>' //template 名是APP
})
这就定义了一个app的VUE对象，index.html就可以找到它了。
三、App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App' //export 了名为App的组件，main.js就可以找到它了
}
</script>
上面的template都理解为html的一部分片断就行了，片断可以拼接到html对应的位置，构成一个有内容的完整的页面。<img src="./assets/logo.png">这句被我注释了，否则页面会显示这个图片的。下面的<route-view/>部分是路由，根据用户的url不同，会路由到不同的vue文件，进而展示不同的页面内容。
四、index.js
项目里有不只一个index.js，一定看准了，我要讲解的是router目录下的index.js.
//这里的配置决定了App.vue里<router-view/>位置会展示什么内容
export default new Router({
routes: [
{
path: '/', //当用户访问 http://localhost:8080/ 根目录也就是默认目录会被路由到HelloWorld组件，
//这个组件的所有内容会被在App.vue里<router-view/>显示出来
name: 'HelloWorld',
component: HelloWorld
},
{//当用户访问 http://localhost:8080/ranktable 会显示ranktable.vue内容
//ranktable.vue是我后加的
path: '/ranktable',
name: '/ranktable',
component: ranktable
}
]
})
五、HelloWorld.vue
最后看看这里有什么
<template>
<div>
原来的内容被我删除了，现在页面显示这句话。
</div>
</template>
<script>
</script>
vscode命令行执行npm run dev，看见下面说明成功了，将地址贴进浏览器
Compiled successfully in 983ms 15:43:26
I Your application is running here: http://localhost:8080
如果想要更复杂的功能，在helloworld.vue实现就行了，比如我要一个填表查询功能，里面改成
<template>
<div>
<group title="城市">
<selector placeholder="请选择城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"></selector>
</group>
<group title="街道">
<selector placeholder="请选择街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"></selector>
</group>
<group title="小区">
<selector placeholder="请选择小区" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"></selector>
</group>
<group title="日期">
<selector placeholder="请选择日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"></selector>
</group>
<group title="统计类型">
<selector placeholder="请选择统计类型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"></selector>
</group>
<div style="padding:15px;">
<x-button type="primary" @click.native="getValue('plainValueRef')">查询</x-button>
</div>
</div>
</template>
<script>
import { Selector, Group, Cell, CellBox, XButton } from 'vux'
此处省略很多东西
</script>
这个例子有点复杂，需要下面<script>里实现很多内容，引入vux的一些组件，vux大家可以自行研究。效果是这样的
Ⅸ 怎样从无到有地建立一个前端项目
年后入职新公司，面试时聊到公司的情况大致是这样的：团队里需要招一名前端（就此一人，其他都是后台开发的），项目是一个工具类的Pc端项目（我的理解就弊局姿是web应用！？），框架用的是vue，而且这个项目组是新成立的，也就是说前端的活儿需要我从零开始一步一步搭建。我本人之前的项目经验比较肤浅，没有过这种全权负责整个前端部分的经验，因此想问问各位大神，一般来说，应该怎样做准备工作？在搭建项目时，有没有什么提前需要注意的地方吗？
1. 通读文档、原型图，不懂、不明确的地方找产品确定，不要凭自己感觉猜测
2. 画流程图，考虑一些交互，不确定的技术方案可以试着写个简单 demo 跑跑
3. 拉上产品、设计、后端开个技术交互评审腊腊 4. 确定接口 5. 拿到设计稿，过一遍，看看有什么不合理遗漏的地方
6. 切图，根据接口文档写代码，期间遇见问题，及时和产品设计后端沟通
7. 参加测试人员的技术评审 8. 自测联调，发布测试版 9. 改 BUG 10. 发布预发版，外网测试（如果是对外项目）
11. 发布正式版
如果做后台页面，可能没有设计师，那么尽量保持各页面风格统一，可以考虑 Bootstrap、ElementUI。
排期有问题，也及时沟通，并说明理由。产品改需求，影响排期，需要说明。 我的经历大致就是这样。
仔细看一遍vue官方文档。
从框架api到编程风格指导，一条龙。
再搭配vue官方脚手架vue-cli，完美。
首先肯定了解清楚需求，是否前后端分离，是否需要ssr，是中后台项目还是纯展示项目。
既然框架选择vue，那么推荐使用vue-cli，是否需要引入vuex看项目需求。按照vue-cli推荐的目录划分项目文件，组织好基础的配置结构，便于之后接手项目的人。
提供好相应的初始化钩子，定好less颜色变数，路由集租绝中管理，bundle按路由拆分，纯组件和业务组件分开，全局的loading和错误处理，类似登陆注册基础的模块，前端错误收集，一些模块的二次封装，模块按需载入，tree shaking。一个好的项目模版甚至可以保留后，之后的业务基于项目模版开发。
做到新人针对某一个页面开发，加一个路由对全局不会造成太大的影响。 首先前端是你一个人，而且没有人提出让你用什么，要么用你会用的要么用你想用的。如果你用vue就更方便了。直接使用脚手架搭起来一个项目然后写东西就行了。不用考虑太多！
如果我是楼主目前的水平，我会撸起Jquery就是干，管它vue不vue，反正前端就一个，怕个 *** 朝天。
vue cli 自带的webpack模板 贼开心 1、 是否是前后端分离项目，使用vue进行开发是否使用脚手架工具vue-cli或者使用webpack自己搭建开发环境 2、 css的模块化设计，使用原生css，还是使用预编译器less或者sass 3、 框架的选择，web端的vue框架很多，例如：iview……