Ⅰ web前端框架有哪些
什麼是Web前端開發？
前端開發是創建web頁面或app等前端界面呈現給用戶的過程。通過html、css、js以及衍生出來的各種技術、框架、解決方案來實現互聯網產品的用戶交互界面。
Web前端框架有：Bootstrap 框架、React 框架、Vue 框架、Angular 框架、Foundation 框架、TypeScript 框架。
1、Bootstrap 框架
Bootstrap 是當今可用的前端框架中最受歡迎的，它具有直觀，時尚的界面而且功能強大可以更快更輕松地實現 web 開發而且不需要捆綁。附件就可以使用許多第三方插件，大多數瀏覽器都支持它，而且它提供了比其他前端框架更多的組合資源。
2、React 框架
React 框架引入了許多自定義的（在創建時）前端 Web 開發的方法。要使用 React，首先需要掌握組件的體系結構，JSX 和單向數據流等，React 框架的出現促使開發了大量額外工具用來實現高度靈活性。雖然靈活性是其主要優勢，但 React 因其靈活性也存在一些問題。比如在使用 React 時會面臨選擇的問題，而且它沒有可靠的開發工作流程。我們必須使用 React 構建自己的工作流程。這比使用其他 JS 框架更困難，因為構建到框架中需要大量的開發工具。
3、Vue 框架
Vue 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
4、Angular 框架
Angular.js 通常被稱為 MVW（模型 – 視圖 – 隨意）框架，其中包括：快速代碼生成，輕松測試任何應用程序部分和雙向數據綁定（後端的更改會立即反映在 UI 上）。自發布以來，它成為開發的最常用的 JS 框架。對於基於企業的應用程序或具有高標准代碼可讀性的嚴格編程環境，Angular-s 都是更好的選擇。
5、Foundation 框架
Foundation 是由網頁設計公司 Zurb 創建的，是一個非常先進的企業級前端框架，非常適合開發靈活，響應迅速的網站。但是使用它也相當復雜，所以不適合剛入門的學習者，這個功能豐富的框架支持 GPU 加速，可實現流暢，閃電般快速的動畫，Fastclick.js 可在移動設備上快速渲染。它在 Sass 預處理器上運行，並包含 Foundation 開發的數據交換屬性，該屬性允許您為移動設備載入輕量級 HTML 部分，為較大屏幕載入「較重」HTML 部分。
6、TypeScript 框架
TypeScript 是由微軟開發的自由和開源的編程語言，JavaScript 類型的超集，它可以編譯成純 JavaScript。TypeScript 可以在任何瀏覽器、任何計算機和任何操作系統上運行，並且是開源的。
Ⅱ 基於webpack 和 vue的單頁面網站有哪些
1. 定義我們demo的基本目錄
├── README.md
├── index.html // 項目入口文件
├── package.json // 項目配置文件
├── src // 生產目錄
│ ├── vue // 組件
│ | ├──home.vue
│ | ├──blog.vue
│ | ├──about.vue
│ | ├──topic.vue
│ ├── components // 各種組件
│ ├── views // css文件
│ ├── scss //scss文件
│ └── main.js // Webpack 預編譯入口
└── webpack.js // Webpack 配置文件
2. 配置一下我們的webpack.js文件
在介紹怎麼配置之前你需要掌握一個命令 npm install <模塊> --save-dev這個命令的意思是這個命名的意思是我們安裝了這個包並且把它的基本信息寫入目錄的package.json文件。還有一個命令是我們直接運行cnpm install會自動下載package.json裡面寫入的包.
在webpack的配置文件我們需要用到四個npm的模塊分別是：path，webpack，extract-text-webpack-plugin,vue-loader記得先下載包在用require命令引入進來
//node的路徑模塊
var path=require('path');
//我們是webpack當然要引入這個
var webpack = require('webpack');
//這個是構建頁面資源的插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//因為我們是vue.js的應用，把各個組件當做一個頁面.vue後綴，所以引入這個可以編譯這些文件
var vue = require("vue-loader");
好了，我們已經把需要的模塊引入進來了，接下來我們定義一些接下來要用到的一些文件夾路徑
//__dirname是node裡面的一個變數，指向的是當前文件夾目錄
var ROOT_PATH = path.resolve(__dirname);
//這個我們的文件入口，等下我們就會從main.js這個文件作為入口
var APP_PATH = path.resolve(ROOT_PATH, 'src/main.js');
//這個是文件打包出來的輸出路徑
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
基本的文件路徑我們已經定義好了，接下來我們要用到extract-text-webpack-plugin這個插件了
var plugins = [
//提公用js到common.js文件中
new webpack.optimize.CommonsChunkPlugin('common.js'),
//將樣式統一發布到style.css中
new ExtractTextPlugin("style.css"),
// 使用 ProvidePlugin 載入使用率高的依賴庫
new webpack.ProvidePlugin({
$: 'webpack-zepto'
})
];
接下來是webpack的重點了loader，webpack的思想是把每個靜態資源文件當做一個模塊載入，我們需要做一些配置，在這里我們需要用到編譯css，sass模塊，多以我們還需要安裝'css-loader','style-loader','node-sass','md5'
mole.exports = {
//文件的入口，還可以寫成多數組的形式，具體自己擴展
entry:[APP_PATH],
//輸出
output:{
//輸出路徑
path: BUILD_PATH，
//打包的js命名
filename：build.js'
// 指向非同步載入的路徑
publicPath : __dirname + '/build/',
// 非主文件的命名規則，加緩存用到md5
chunkFilename: '[id].build.js?[chunkhash]'
},
mole: {
loaders: [
{
test: /\.vue$/,
loader: 'vue',
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", 'css-loader')
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.(png|jpg)$/,
loader: 'url?limit=40000'
}
]
},
//這個特別說明下，vue提倡把一個組件當做一個頁面，所以可能在一個頁面寫html，style，javascript，也可以引入和寫scss文件
vue: {
css: ExtractTextPlugin.extract("css"),
sass: ExtractTextPlugin.extract("css!sass-loader")
},
plugins: plugins
}
3. 配置我們的入口文件main.js
這里我們需要三個npm模塊，vue，vue-router，vue-resource三個模塊，我們依次安裝然後在引入
//vue的應用當然要引，等下要用它來注冊
var Vue = require('vue')
//這個是路由，spa應用必要哦
var VueRouter = require('vue-router');
//這個是類似ajax請求,肯定要拉去數據啦，所以也下載吧
var VueResource = require('vue-resource');
在vue裡面聲明並注冊個空組件
Vue.use(VueRouter);
Vue.use(VueResource);
var app = Vue.extend({});
實例化VueRounter
var router = new VueRouter({
// 當hashbang的值為true時，所有的路徑都會被格式化已#!開頭，
hashbang: true,
history: false,
saveScrollPosition: true,
transitionOnLoad: true
Ⅲ 國內哪些網站用vue開發的
現在有很多是用vue開發的，最典型的就是vue官網。
判斷一個網站是不是vue開發的，可以直接看有沒有載入vue.js。