├── static └── .gitkeep ├── README.md ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ └── logo.png ├── components │ ├── About.vue │ ├── Hello.vue │ └── Home.vue ├── main.js ├── router │ └── index.js └── App.vue ├── .babelrc ├── .editorconfig ├── index.html └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-vuerouter-demo -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fozero/vue-vuerouter-demo/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-vuerouter-demo 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/About.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' //这里引入的是router目录，会默认识别里面的index.js文件（不能是其他名字） 4 | 5 | // 引入并使用vue-resource网络请求模块 6 | import VueResource from 'vue-resource' 7 | Vue.use(VueResource) 8 | 9 | 10 | 11 | 12 | 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', //这里绑定的是index.html中的id为app的div元素 16 | router, 17 | render: h => h(App) 18 | 19 | // 这里的render: h => h(App)是es6的写法 20 | // 转换过来就是： 暂且可理解为是渲染App组件 21 | // render:(function(h){ 22 | // return h(App); 23 | // }); 24 | 25 | }) 26 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // 这里面负责写路由映射，便于管理 4 | 5 | 6 | // 引入路由模块并使用它 7 | import Vue from 'vue' 8 | import VueRouter from 'vue-router' 9 | Vue.use(VueRouter) 10 | 11 | 12 | 13 | // 创建路由实例并配置路由映射 14 | // path:'*',redirect:'/home' 重定向到path是/home的映射 15 | const router = new VueRouter({ 16 | routes:[{ 17 | path: '/home', component: require('../components/Home.vue') 18 | },{ 19 | path: '/about', component: require('../components/About.vue') 20 | },{ 21 | path:'*',redirect:'/home' 22 | }] 23 | }) 24 | 25 | 26 | // 输出router 27 | export default router; 28 | 29 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | 38 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 30 | 31 | 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vuerouter-demo", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "wujian", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.0", 13 | "vue-resource": "^1.0.3", 14 | "vue-router": "^2.1.1" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^6.4.0", 18 | "babel-core": "^6.0.0", 19 | "babel-loader": "^6.0.0", 20 | "babel-plugin-transform-runtime": "^6.0.0", 21 | "babel-preset-es2015": "^6.0.0", 22 | "babel-preset-stage-2": "^6.0.0", 23 | "babel-register": "^6.0.0", 24 | "chalk": "^1.1.3", 25 | "connect-history-api-fallback": "^1.1.0", 26 | "css-loader": "^0.25.0", 27 | "eventsource-polyfill": "^0.9.6", 28 | "express": "^4.13.3", 29 | "extract-text-webpack-plugin": "^1.0.1", 30 | "file-loader": "^0.9.0", 31 | "function-bind": "^1.0.2", 32 | "html-webpack-plugin": "^2.8.1", 33 | "http-proxy-middleware": "^0.17.2", 34 | "json-loader": "^0.5.4", 35 | "semver": "^5.3.0", 36 | "opn": "^4.0.2", 37 | "ora": "^0.3.0", 38 | "shelljs": "^0.7.4", 39 | "url-loader": "^0.5.7", 40 | "vue-loader": "^10.0.0", 41 | "vue-style-loader": "^1.0.0", 42 | "vue-template-compiler": "^2.1.0", 43 | "webpack": "^1.13.2", 44 | "webpack-dev-middleware": "^1.8.3", 45 | "webpack-hot-middleware": "^2.12.2", 46 | "webpack-merge": "^0.14.1" 47 | }, 48 | "engines": { 49 | "node": ">= 4.0.0", 50 | "npm": ">= 3.0.0" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 49 | 50 | 51 | 73 | --------------------------------------------------------------------------------