1. 基於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
2. 國內哪些網站用vue開發的
現在有很多是用vue開發的，最典型的就是vue官網。
判斷一個網站是不是vue開發的，可以直接看有沒有載入vue.js。