❶ 基于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 框架开发的开源门票及活动管理应用