❶ 基於Boostrap和Vue設計網頁
Boostrap:
Vue.js:
首先先對要畫的網頁進行一個原型設計，由於是公司的主頁，因此最主要的功能就是介紹這個公司的業務還有一些新聞，在初步設計後，我的原型圖大致為：
接著就可以開始嘗試用boostrap 教程 和Vue.js來實現。
1、首先我們在 <head> 中先引入boostrap和Vue
.js，其中順序不要變：
2、 頂端文字跑馬燈效果：
然後在CSS樣式中，設置 news 的 float 和 width :
最後在js中寫跑馬燈的實現，用定時器 timer 來計時滾動，判斷復制的信息是否到達 box 的最左邊來進行無限循環。
3、 導航欄
接著用boostrap來實現一個導航欄，導航欄一般放在頁面的頂部。
我們可以使用 navbar 類來創建一個標準的導航欄，後面緊跟: navbar-expand-xl|lg|md|sm 類來創建響應式的導航欄 (大屏幕水平鋪開，小屏幕垂直堆疊)。導航欄上的選項可以使用 <ul> 元素並添加 class= navbar-nav 類； 然後在 <li> 元素上添加 nav-item 類， <a> 元素上使用 nav-link 類；
導航欄可以用 bg-dark 和 navbar-dark 來設置導航的樣式：
其中， navbar-brand 類用於顯示品牌logo，如果使用圖片，可以使用 navbar-brand 類來設置圖片自適應導航欄:
效果如圖：
4、 輪播圖片 ：
查閱Boostrap教程，大概了解到有這幾個類：
實現效果如圖：
5、 網格
我們可以結合網格和 Bootstrap4 的 .card 與 .card-body 類來創建一個簡單的卡片：
實現效果如圖：
6、 折疊
實現效果如圖：
7、 鏈接列表組
實現效果如下：
8、最後再增加一個頁尾，然後完善下就完成了一個公司頁面：
頁尾效果如圖：
整個網頁最後的實現效果為：
[圖片上傳失敗...(image-6307a3-1628321072949)]
1、Boostrap和vue.js提供的組件很豐富而且實現起來很容易，值得深入學習。
2、vue.js還需要再深入學習下，在這里只用到了一點點。
❷ 基於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。
❹ vue 寫的網站有哪些
網頁鏈接 校園招聘首頁
網頁鏈接海外招聘全站
❺ Github上有什麼開源的vue+laravel網站代碼嗎
Laravel 5 Boilerplate —— 基於當前Laravel最新版本（Laravel 5.1.*）並集成Boilerplate的項目
Laravel 5 Angular Material Starter —— 這是一個Laravel 5.1和AngularJS的原型項目
Someline Starter —— 基於Laravel 5和Vue.js，用於快速構架RESTful API和Web應用的原型項目
CMS
Bootstrap CMS —— Laravel 5.1驅動的功能強大的CMS
October —— 基於Laravel 5，致力於讓開發工作變得簡單的CMS
PyroCMS —— MVC架構的PHP內容管理系統，3.0以前基於CodeIgniter，目前基於Laravel 5.1
LavaLite —— 基於Laravel 5.1 & Bootstrap 3的內容管理系統
TypiCMS —— 基於 Laravel 5 構建的、支持多語言的內容管理系統
Laravel and AngularJS CMS —— 基於Laravel 5.1和AngularJS的CMS
Microweber —— 基於 Laravel 拖拽式生成 CMS 及在線商店利器
AsgardCMS —— 基於 Laravel 構建的、支持模塊化和多語言的CMS
CRM
Flarepoint —— 基於Laravel構建的免費開源CRM平台
論壇
Laravel.io —— Laravel開發者社區
Flarum —— 免費的、開源的、專注於簡約的論壇系統，esoTalk和FluexBB的聯合繼承者
PHPHub —— 基於Laravel 4.2，積極向上的 PHP & Laravel 開發者社區
電商
Antvel —— 基於 Laravel 5.* www.lonwin.net開發的開源電子商務項目
項目管理
92five app —— 基於 Laravel框架 & Backbone JS 構建，是一個自託管的、基於web的項目管理應用
Scrumwala —— 基於Laravel5，項目管理應用
博客
Canvas —— 基於Laravel 5.2 開發的輕量級博客系統
Katana —— 靜態博客/站點生成器（支持Markdown和GitHub Pages）
Vuedo —— 基於 Laravel 和 Vue.js 構建的博客平台
Wardrobe —— 專注於寫作的最小化博客平台
後台模板
Laravel Angular Admin —— 基於 Laravel + Angularjs + Bootstrap + AdminLTE 實現的後台模板
其他
Laravel.com —— Laravel官網源碼
Laravel Tricks —— Laravel小技巧&小貼士
Invoice Ninja —— 基於Laravel構建的開源發票及時間跟蹤應用
Paperwork —— 基於Laravel 4.X的開源的筆記&歸檔工具
Cachet —— 基於Laravel 5的開源的狀態頁系統
StyleCI —— 由 PHP CS Fixer開發，提供PHP代碼風格持續集成服務
Podcastwala —— 基於Laravel 5，構建屬於你自己的播客網站
Deployer —— 基於Laravel 5.1的、免費的、開源的PHP應用部署工具
RSS Monster —— 基於 Lumen 開發的 RSS 聚合器和閱讀器
Koel —— 基於 Laravel 5.1 & Vue.js 開發的酷炫音樂流媒體應用
Attendize —— 基於 Laravel 框架開發的開源門票及活動管理應用