Ⅰ 如何通過 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……