├── static └── .gitkeep ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ ├── logo.png │ └── css │ │ └── public.css ├── views │ ├── index │ │ └── index.vue │ └── manage │ │ └── index.vue ├── main.js ├── router │ └── index.js ├── App.vue └── components │ ├── footer.vue │ └── Hello.vue ├── .editorconfig ├── .postcssrc.js ├── .babelrc ├── index.html ├── README.md └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yicenburan/vuedemo/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/assets/css/public.css: -------------------------------------------------------------------------------- 1 | *{padding:0; margin:0;} 2 | ul li{list-style:none;} 3 | a{text-decoration:none; color:#000;} 4 | 5 | .fixed{position: fixed;} 6 | .tc{text-align:center;} -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "presets": ["env", "stage-2"], 11 | "plugins": [ "istanbul" ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | manage 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/views/index/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | router, 13 | template: '', 14 | components: { App } 15 | }) 16 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Hello from '@/components/Hello' 4 | import Index from '../views/index/index' 5 | import Manage from '../views/manage/index' 6 | 7 | Vue.use(Router) 8 | 9 | export default new Router({ 10 | routes: [ 11 | { 12 | path: '/', 13 | name: 'Index', 14 | component: Index 15 | }, 16 | { 17 | path: '/manage', 18 | name: 'Manage', 19 | component: Manage 20 | } 21 | ] 22 | }) 23 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuedemo 2 | a simple vue-cli demo about manage
3 | vue-cli入门小demo，包含两个模块：首页以及管理页
4 | 管理页只有简单的增删改功能
5 | 下载后需安装依赖（npm install）再运行（npm run dev） 6 | ## Build Setup 7 | 8 | ``` bash 9 | # install dependencies 10 | npm install 11 | 12 | # serve with hot reload at localhost:8080 13 | npm run dev 14 | 15 | # build for production with minification 16 | npm run build 17 | 18 | # build for production and view the bundle analyzer report 19 | npm run build --report 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 23 | -------------------------------------------------------------------------------- /src/components/footer.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 33 | 34 | 35 | 54 | -------------------------------------------------------------------------------- /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 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "manage", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "yicenburan", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.2.6", 14 | "vue-router": "^2.3.1" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^6.7.2", 18 | "babel-core": "^6.22.1", 19 | "babel-loader": "^6.2.10", 20 | "babel-plugin-transform-runtime": "^6.22.0", 21 | "babel-preset-env": "^1.3.2", 22 | "babel-preset-stage-2": "^6.22.0", 23 | "babel-register": "^6.22.0", 24 | "chalk": "^1.1.3", 25 | "connect-history-api-fallback": "^1.3.0", 26 | "copy-webpack-plugin": "^4.0.1", 27 | "css-loader": "^0.28.0", 28 | "eventsource-polyfill": "^0.9.6", 29 | "express": "^4.14.1", 30 | "extract-text-webpack-plugin": "^2.0.0", 31 | "file-loader": "^0.11.1", 32 | "friendly-errors-webpack-plugin": "^1.1.3", 33 | "html-webpack-plugin": "^2.28.0", 34 | "http-proxy-middleware": "^0.17.3", 35 | "webpack-bundle-analyzer": "^2.2.1", 36 | "semver": "^5.3.0", 37 | "shelljs": "^0.7.6", 38 | "opn": "^4.0.2", 39 | "optimize-css-assets-webpack-plugin": "^1.3.0", 40 | "ora": "^1.2.0", 41 | "rimraf": "^2.6.0", 42 | "url-loader": "^0.5.8", 43 | "vue-loader": "^11.3.4", 44 | "vue-style-loader": "^2.0.5", 45 | "vue-template-compiler": "^2.2.6", 46 | "webpack": "^2.3.3", 47 | "webpack-dev-middleware": "^1.10.0", 48 | "webpack-hot-middleware": "^2.18.0", 49 | "webpack-merge": "^4.1.0" 50 | }, 51 | "engines": { 52 | "node": ">= 4.0.0", 53 | "npm": ">= 3.0.0" 54 | }, 55 | "browserslist": [ 56 | "> 1%", 57 | "last 2 versions", 58 | "not ie <= 8" 59 | ] 60 | } 61 | -------------------------------------------------------------------------------- /src/views/manage/index.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 44 | 45 | 101 | --------------------------------------------------------------------------------