diff --git a/router/.babelrc b/router/.babelrc new file mode 100644 index 00000000..6934f785 --- /dev/null +++ b/router/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": ["es2015"], + "plugins": ["transform-runtime"], + "comments": false +} diff --git a/router/app.vue b/router/app.vue new file mode 100644 index 00000000..d4453be0 --- /dev/null +++ b/router/app.vue @@ -0,0 +1,10 @@ + + \ No newline at end of file diff --git a/router/button.vue b/router/button.vue new file mode 100644 index 00000000..072b071c --- /dev/null +++ b/router/button.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file diff --git a/router/images/image.png b/router/images/image.png new file mode 100644 index 00000000..07cd1c48 Binary files /dev/null and b/router/images/image.png differ diff --git a/router/index.ejs b/router/index.ejs new file mode 100644 index 00000000..0ea37457 --- /dev/null +++ b/router/index.ejs @@ -0,0 +1,12 @@ + + + + + Webpack App + + + +
+ + + \ No newline at end of file diff --git a/router/index.html b/router/index.html new file mode 100644 index 00000000..acdfbfb4 --- /dev/null +++ b/router/index.html @@ -0,0 +1,14 @@ + + + + + Webpack App + + + +
+ +
+ + + \ No newline at end of file diff --git a/router/main.js b/router/main.js new file mode 100644 index 00000000..a4033ca9 --- /dev/null +++ b/router/main.js @@ -0,0 +1,57 @@ +import Vue from 'vue'; +import VueRouter from 'vue-router'; +import App from './app.vue'; + +Vue.use(VueRouter); + +// 路由配置 +const Routers = [ + { + path: '/index', + meta: { + title: '首页' + }, + component: (resolve) => require(['./views/index.vue'], resolve) + }, + { + path: '/about', + meta: { + title: '关于' + }, + component: (resolve) => require(['./views/about.vue'], resolve) + }, + { + path: '/user/:id', + meta: { + title: '个人主页' + }, + component: (resolve) => require(['./views/user.vue'], resolve) + }, + { + path: '*', + redirect: '/index' + } +]; +const RouterConfig = { + // 使用 HTML5 的 History 路由模式 + mode: 'history', + routes: Routers +}; +const router = new VueRouter(RouterConfig); + +router.beforeEach((to, from, next) => { + window.document.title = to.meta.title; + next(); +}); + +router.afterEach((to, from, next) => { + window.scrollTo(0, 0); +}); + +new Vue({ + el: '#app', + router: router, + render: h => { + return h(App) + } +}); \ No newline at end of file diff --git a/router/package.json b/router/package.json new file mode 100644 index 00000000..8fd9f89a --- /dev/null +++ b/router/package.json @@ -0,0 +1,38 @@ +{ + "name": "demo", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js", + "build": "webpack --progress --hide-modules --config webpack.prod.config.js" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "babel": "^6.23.0", + "babel-core": "^6.24.0", + "babel-loader": "^6.4.1", + "babel-plugin-transform-runtime": "^6.23.0", + "babel-preset-es2015": "^6.24.0", + "babel-runtime": "^6.23.0", + "css-loader": "^0.27.3", + "extract-text-webpack-plugin": "^2.1.0", + "file-loader": "^0.10.1", + "html-webpack-plugin": "^2.28.0", + "style-loader": "^0.16.1", + "url-loader": "^0.5.8", + "vue-hot-reload-api": "^2.0.11", + "vue-loader": "^11.3.4", + "vue-style-loader": "^2.0.5", + "vue-template-compiler": "^2.2.6", + "webpack": "^2.3.2", + "webpack-dev-server": "^2.4.2", + "webpack-merge": "^4.1.0" + }, + "dependencies": { + "vue": "^2.2.6", + "vue-router": "^2.3.1" + } +} diff --git a/router/style.css b/router/style.css new file mode 100644 index 00000000..84c1d864 --- /dev/null +++ b/router/style.css @@ -0,0 +1,5 @@ +/* style.css */ +#app{ + font-size: 24px; + color: #f50; +} \ No newline at end of file diff --git a/router/title.vue b/router/title.vue new file mode 100644 index 00000000..f026fdd8 --- /dev/null +++ b/router/title.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/router/views/about.vue b/router/views/about.vue new file mode 100644 index 00000000..c975dcfc --- /dev/null +++ b/router/views/about.vue @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/router/views/index.vue b/router/views/index.vue new file mode 100644 index 00000000..b1a05d6f --- /dev/null +++ b/router/views/index.vue @@ -0,0 +1,11 @@ + + \ No newline at end of file diff --git a/router/views/user.vue b/router/views/user.vue new file mode 100644 index 00000000..c2f9673d --- /dev/null +++ b/router/views/user.vue @@ -0,0 +1,10 @@ + + \ No newline at end of file diff --git a/router/webpack.config.js b/router/webpack.config.js new file mode 100644 index 00000000..d2e4ae88 --- /dev/null +++ b/router/webpack.config.js @@ -0,0 +1,53 @@ +var path = require('path'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); + +var config = { + entry: { + main: './main' + }, + output: { + path: path.join(__dirname, './dist'), + publicPath: '/dist/', + filename: 'main.js' + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + loaders: { + css: ExtractTextPlugin.extract({ + use: 'css-loader', + fallback: 'vue-style-loader' + }) + } + } + }, + { + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + }, + { + test: /\.css$/, + use: ExtractTextPlugin.extract({ + use: 'css-loader', + fallback: 'style-loader' + }) + }, + { + test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, + loader: 'url-loader?limit=1024' + } + ] + }, + plugins: [ + new ExtractTextPlugin({ + filename: '[name].css', + allChunks: true + }) + ] +}; + +module.exports = config; \ No newline at end of file diff --git a/router/webpack.prod.config.js b/router/webpack.prod.config.js new file mode 100644 index 00000000..8ebc385c --- /dev/null +++ b/router/webpack.prod.config.js @@ -0,0 +1,41 @@ +var webpack = require('webpack'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var merge = require('webpack-merge'); +var webpackBaseConfig = require('./webpack.config.js'); + +// 清空基本配置的插件列表 +webpackBaseConfig.plugins = []; + +module.exports = merge(webpackBaseConfig, { + output: { + publicPath: '/dist/', + // 将入口文件重命名为带有 20 位 hash 值的唯一文件 + filename: '[name].[hash].js' + }, + plugins: [ + new ExtractTextPlugin({ + // 提取 css，并重命名为带有 20 位 hash 值的唯一文件 + filename: '[name].[hash].css', + allChunks: true + }), + // 定义当前 node 环境为生产环境 + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: '"production"' + } + }), + // 压缩 js + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false + } + }), + // 提取模板，并保存入口 html 文件 + new HtmlWebpackPlugin({ + filename: '../index_prod.html', + template: './index.ejs', + inject: false + }) + ] +}); \ No newline at end of file