⑴ 前端開發工程師怎麼分等級 知乎
我在前端能有八年了，前端的等級七十就是 初級工程師 中級工程師 高級工程師，之後是架構師這些，主管
⑵ 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大家可以自行研究。效果是這樣的
⑶ 前端常用的框架有哪些
前端常用框架匯總：
react框架:
create-react-app+antd（antd PC，移動端都有）
umi+dva+antd ant design pro（管理系統）
ReactNative（app混合開發）
2.vue框架：
vue-cli+element-ui或iview（PC，移動端，小程序都有）
vue-element-admin（管理系統）
vue-cli3+cordova或者weex（app混合開發）
3.Flutter（app混合開發）
4.es6,webpack,gulp,node,包管理工具,esLint,echart,css預處理器,i18n等等
⑷ 前端開發工程師需要學習什麼知識
web前端開發工程師一般分為三種級別，一般分為初級工程師、中級工程師、高級工程師。
1.初級前端工程師：能熟練使用html、css、js，主要工作還是搭建靜態頁面。進階知識的話就是響應式這一塊了，一套代碼能適配pc+手機是初級前端工程師的進階。
2.中級前端工程師：作為一名中級前端工程師的話，除了上面的以外，還需要會使用一些框架之類的東西，像bootstrap、jquery之類的。進階的知識應該是ajax這一塊了，當然ajax並不是很難，了解怎麼與後台互動式學習ajax的關鍵點。
3.高級前端工程師：想成為高級前端工程師，首先要學習的就是前端工程化，進階框架angular、vue、react ，和jquery有著很大區別，vue是數據控制頁面渲染及狀態，而jquery是DOM節點控制渲染，vue渲染頁面更容易更優雅。vue能夠把前端項目徹底工程化，有配置文件、可以安裝第三方模塊、配合webpack打包、可以實現模塊化開發等等，當然簡單是它最大的優勢。進階就是要學習es6 7 語法、vuex、Element_ui （開發pc端框架）、vux（開發手機端框架）、Mint UI（開發手機端框架）、Nodejs（後端語言，js語法）。
⑸ 移動webapp前端ui用哪個框架好
WeUI
Web 開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
Frozen UI
一個開源的簡單易用，輕量快捷的移動端UI框架。基於手Q樣式規范，選取最常用的組件。
SUI Mobile
是一套基於 Framework7 開發的UI庫。並參考Ratchet、Fastclick開源庫。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，並且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開發跨平台Web App。
⑹ 探坑第一步，如何解決啟動vux項目報錯
公司最近需要做一個微信端的項目，技術選型用vue的移動端框架vux寫，按照官網的安裝步驟，啟動的時候屢次報錯，後來網路出以下解決步驟：
然後在文件底部加上：
否則會報originalConfig 找不到，
最後在resolve: {extensions: ['.js', '.vue', '.json','.less']里加入.less
⑺ 如何完成中國移動框架任務
一、移動APP開發框架1、vux。VUX-Vue移動端UI組件庫2、MintUI。MintUI-基於Vue.js的移動端組件庫3、vant。Vant-輕量、可靠的移動端Vue組件庫4、weex。Weex是一個使用Web開發體驗來開發高性能原生應用的框架。Weex致力於使開發者能基於當代先進的Web開發技術，使用同一套代碼來構建Android、iOS和Web應用。
ionic。ionic官方文檔-IonicPlatformDocumentatio。7、uni-app。uni-app官網8、MUI。MUI-最接近原生APP體驗的高性能前端框架9、flutter。Flutter谷歌的移動UI框架
⑻ 修改vux組件的css樣式
我們經常用vux的組件快速開發移動端的項目，比如常用的datetime組件，會遇到這樣的問題。
而我們的需求要求value值靠左而非靠右，但datetime沒有提供移動value值位置的屬性，那怎麼辦呢？
首先需要找到經過vue處理後的值，
一種方法我們可以在全局上修改，簡單粗暴。
vue也給我們提供了局部修改的方法：
這最終會被vue編譯成：
可以看到字體變成向左靠齊，當然，可以用這種方法，修改任一內置組件，其他ui框架的修改方法也類似。
⑼ 幾款實用的VUE移動端UI框架
文檔地址：https://doc.vux.li/zh-CN/
演示地址：https://vux.li/demos/v2/?x-page=v2-doc-home#/
基於webpack+vue-loader+vux可以快速開發移動端頁面，配合vux-loader方便你在WeUI的基礎上定製需要的樣式（下拉刷新上拉載入組件不再維護，其餘組件相對豐富）
文檔地址：https://wangdahoo.github.io/vonic-documents/#/
演示地址：https://wangdahoo.github.io/vonic/docs/#/home
一個基於 vue.js 和 ionic 樣式的 UI 框架，用於快速構建移動端單頁應用，很簡約
文檔地址：https://didi.github.io/cube-ui/#/zh-CN/docs/introction
演示地址：https://didi.github.io/cube-ui/#/zh-CN/example
滴滴 WebApp 團隊 實現的 基於 Vue.js 實現的精緻移動端組件庫；組件效果優；視覺效果很棒
文檔地址：http://mint-ui.github.io/docs/#/
演示地址：http://elemefe.github.io/mint-ui/#/
最接近原生APP體驗的高性能前端框架
文檔地址：https://youzan.github.io/vant/#/zh-CN/intro
演示地址：https://youzan.github.io/vant/mobile.html#/zh-CN/
有贊前端團隊基於有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件
文檔：http://nutui.jd.com/#/intro
演示地址：http://nutui.jd.com/demo.html#/index
一套京東風格的輕量級移動端Vue組件庫
特性
跨平台，自動轉微信小程序組件（稍後上線，敬請期待）
30+ 京東移動端項目正在使用
基於京東APP 7.0 視覺規范
支持按需載入
詳盡的文檔和示例
支持定製主題
支持多語言（國際化）
支持 TypeScript
支持服務端渲染（Vue SSR）
單元測試加持
配套有基於Webpack的構建工具，可快速創建已內置本組件庫的Vue工程
⑽ Vue UI 了解一下
前端框架百花齊放、爭奇斗艷，令人眼花繚亂。大神們一言不合就整一個框架出來，另小白們無所適從。下面羅列了一些比較優秀的UI框架，Star多的大都是老牌勁旅，Star少的許多是後起之秀。
（1）Element 餓了么 vue 2.0後台UI框架 (Star:18382)
https://github.com/ElemeFE/element
（2）iview組件庫 (Star:10186)
iView 主要服務於 PC 界面的中後台業務，很優秀的組件庫，可惜不適合移動端
https://github.com/iview/iview
https://iviewui.com/
（3）vux 基於Vue和WeUI的移動UI組件 (Star:9762)
Vux是基於WeUI和Vue(2.x)開發的移動端UI組件庫，主要服務於微信頁面。
https://github.com/airyland/vux
https://vux.li/
（4）Mint-UI 餓了么移動端組件庫 (Star:8062)
由餓了么前端團隊推出的 Mint UI 是一個基於 Vue.js 的移動端組件庫
https://github.com/ElemeFE/mint-ui
（5）vue-admin 管理面板UI框架 (Star:6289)
https://github.com/vue-bulma/vue-admin
（6）vue-material為 Vue.js 打造的 Material 風格的組件 (Star:4550)
https://github.com/vuematerial/vue-material
https://vuematerial.github.io/#/
（7）vue-strap基於 Vue.js 的 Bootstrap 組件 (Star:4400)
https://github.com/yuche/vue-strap
http://yuche.github.io/vue-strap/
（8）KeenUI 基於Material Design的UI (Star:3041)
https://josephuspaye.github.io/Keen-UI/
（9）vonic (Star:2276)
https://github.com/wangdahoo/vonic/
https://wangdahoo.github.io/vonic/docs/#/
（10）Radon-ui awe大神最近寫的一套UI (Star:791)
https://github.com/luojilab/radon-ui
（11）N3-components 基於N3ui (Star:781)
https://github.com/N3-components/N3-components
（12）vue-carbon (Star:739)
https://github.com/myronliu347/vue-carbon
上文轉自於 https://www.cnblogs.com/tkzc2013/p/8127294.html
更多 vue 框架參考 https://www.awesomes.cn/subject/vue# 應用-框架
優秀的 github demo 推薦 https://github.com/licang