HI ,zihe ,let me help you

.babelrc

@@ -1,5 +1,10 @@
 {
- "presets": ["es2015", "stage-2"],
- "plugins": ["transform-runtime"],
+ "presets": [
+ "es2015",
+ "stage-2"
+ ],
+ "plugins": [
+ "transform-runtime"
+ ],
  "comments": false
 }

.gitignore

@@ -2,3 +2,5 @@
 node_modules/
 npm-debug.log
 .editorconfig
+dist/
+.idea/

README.md

@@ -1,5 +1,32 @@
 # vueAdmin
-a simple admin template based on [vuejs2](https://vuejs.org/) and [element](https://element.eleme.io/#/).
+full stack template/example for Vue2 using OpenId Connect Authorization& Authentication
+based on [vuejs2](https://vuejs.org/) and [element](https://element.eleme.io/#/).
+
+### front stack:
+``` js
+"dependencies": {
+ "axios": "^0.15.3",
+ "echarts": "^3.3.2",
+ "flex.css": "^1.1.6",
+ "nprogress": "^0.2.0",
+ "oidc-token-manager": "^1.2.0",//OpenId Connect Token Manager
+ "vue": "^2.0.7",
+ "vuex": "^2.0.0-rc.6",
+ "vuex-router-sync": "^4.1.1",
+ "element-ui": "^1.0.5"
+ }
+```
+### End stack:
+``` csharp
+ authorization using IdentityServer3
+ api using servicstack
+ DTO design model,DTO repository
+ DTO <=> Entity details:
+ 1: object transfer using ValueInject (your can use autoMapper or whatever else)
+ 2: Expression/sqlExpression using expression tree re-construction
+ Entities Repository,i.e,Orm using servicetack.ormlite
+
+```
 
 ### Usage
 

build/build.js

@@ -1,6 +1,7 @@
 // https://github.com/shelljs/shelljs
 require('./check-versions')()
 require('shelljs/global')
+console.log('!-----因为是入口文件,所以未初始化------!',env.NODE_ENV,'在产品模式下,env=process.env?',env===process.env)
 env.NODE_ENV = 'production'
 
 var path = require('path')

build/dev-server.js

@@ -1,6 +1,12 @@
 require('./check-versions')()
 var config = require('../config')
-if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
+if (!process.env.NODE_ENV) {
+ console.log('执行奇异的赋值,因为环境变量赋值setter会改变对象!')
+ process.env.NODE_ENV = config.dev.env
+}
+console.log('--env只在产品模式下赋值, 那么开发环境下的process.env.NODE_ENV是[object Object]其值:---',
+ config.dev.env,',检查config.dev.env==process.env.NODE_ENV?',process.env.NODE_ENV === config.dev.env);//并不相等
+
 var path = require('path')
 var express = require('express')
 var webpack = require('webpack')

build/webpack.base.conf.js

@@ -3,16 +3,24 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 
-var env = process.env.NODE_ENV
-// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
+var runType = process.env.NODE_ENV;
+console.log('---webpack.base.conf.js.运行类型为',runType)
+// check env & config/index.js to decide whether to enable CSS source maps for the
 // various preprocessor loaders added to vue-loader at the end of this file
-var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
-var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
+var cssSourceMapDev = (runType === 'development' && config.dev.cssSourceMap)
+var cssSourceMapProd = (runType === 'production' && config.build.productionSourceMap)
 var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
 
+//callback: './src/callback.js',
+//silentfreshframe: './src/silentrefreshframe.js',
+//vendor:['',''] 在vendor中定义的公共库,不同于node-modules在CommonsChunkPlugin插件中定义的vendor,这里主要用于代码分割
+
+
 module.exports = {
  entry: {
- app: './src/main.js'
+ app: './src/main.js',
+ posthandler: './src/posthandler.js',
+ elm: './src/elm-main.js',
  },
  output: {
  path: config.build.assetsRoot,
@@ -67,7 +75,7 @@ module.exports = {
  ]
  },
  vue: {
- loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
+ loaders: utils.cssLoaders({sourceMap: useCssSourceMap}),
  postcss: [
  require('autoprefixer')({
  browsers: ['last 2 versions']

build/webpack.dev.conf.js

@@ -12,7 +12,7 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 
 module.exports = merge(baseWebpackConfig, {
  module: {
- loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+ loaders: utils.styleLoaders({sourceMap: config.dev.cssSourceMap})
  },
  // eval-source-map is faster for development
  devtool: '#eval-source-map',
@@ -21,13 +21,25 @@ module.exports = merge(baseWebpackConfig, {
  'process.env': config.dev.env
  }),
  // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
- new webpack.optimize.OccurenceOrderPlugin(),
+ new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
- // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
+ chunks: ['app'],
+ inject: true
+ }),
+ new HtmlWebpackPlugin({
+ filename: 'posthandler.html',
+ template: 'posthandler.html',
+ chunks: ['posthandler'],
+ inject: true
+ }),
+ new HtmlWebpackPlugin({
+ filename: 'elm.html',
+ template: 'elm.html',
+ chunks: ['elm'],
  inject: true
  })
  ]

build/webpack.prod.conf.js

@@ -8,15 +8,20 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var env = config.build.env
 
+
+function getBuildPath(htmlname) {
+ return path.resolve(__dirname, '../dist/'+htmlname)
+}
+
 var webpackConfig = merge(baseWebpackConfig, {
  module: {
- loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
+ loaders: utils.styleLoaders({sourceMap: config.build.productionSourceMap, extract: true})
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
  path: config.build.assetsRoot,
- filename: utils.assetsPath('js/[name].[chunkhash].js'),
- chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+ filename: utils.assetsPath('js/[name].[chunk].js'),
+ chunkFilename: utils.assetsPath('js/[id].chunk.js')
  },
  vue: {
  loaders: utils.cssLoaders({
@@ -29,34 +34,43 @@ var webpackConfig = merge(baseWebpackConfig, {
  new webpack.DefinePlugin({
  'process.env': env
  }),
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false
- }
- }),
- new webpack.optimize.OccurenceOrderPlugin(),
+ // new webpack.optimize.UglifyJsPlugin({
+ //  compress: {
+ //  warnings: false
+ //  }
+ // }),
+ new webpack.optimize.OccurrenceOrderPlugin(),
  // extract css into its own file
  new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
  // generate dist index.html with correct asset hash for caching.
  // you can customize output by editing /index.html
  // see https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
- filename: config.build.index,
+ filename: getBuildPath('index.html'),
  template: 'index.html',
  inject: true,
- minify: {
-  removeComments: true,
-  collapseWhitespace: true,
-  removeAttributeQuotes: true
-  // more options:
-  // https://github.com/kangax/html-minifier#options-quick-reference
- },
- // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+ chunks: ['app','manifest','vendor'],
+ chunksSortMode: 'dependency'
+ }),
+ new HtmlWebpackPlugin({
+ filename: getBuildPath('elm.html'),
+ template: 'elm.html',
+ inject: true,
+ chunks: ['elm','manifest','vendor'],
  chunksSortMode: 'dependency'
  }),
+ new HtmlWebpackPlugin({
+ filename: getBuildPath('posthandler.html'),
+ template: 'posthandler.html',
+ inject: true,
+ chunks: ['posthandler','manifest','vendor'],
+ chunksSortMode: 'dependency'
+ }
+ ),
  // split vendor js into its own file
  new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
+ //如果模块属于node-modules那么,压缩成minChunks,否则会杂交代码
  minChunks: function (module, count) {
  // any required modules inside node_modules are extracted to vendor
  return (
@@ -79,7 +93,6 @@ var webpackConfig = merge(baseWebpackConfig, {
 
 if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')
-
  webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
  asset: '[path].gz[query]',

config/index.js

@@ -1,13 +1,16 @@
 // see https://vuejs-templates.github.io/webpack for documentation.
 var path = require('path')
-
+console.log('shit...........!',path.resolve(__dirname, '../dist/index.html'))
 module.exports = {
  build: {
  env: require('./prod.env'),
- index: path.resolve(__dirname, '../dist/index.html'),
+ //应该把这个放入webpack.config.prod下面
+ // index: path.resolve(__dirname, '../dist/index.html'),
+ // callback: path.resolve(__dirname, '../dist/callback.html'),
+ // silentfreshframe: path.resolve(__dirname, '../dist/silentrefreshframe.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
- assetsPublicPath: '/vueAdmin/dist/',
+ assetsPublicPath: '/',
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
@@ -18,7 +21,7 @@ module.exports = {
  },
  dev: {
  env: require('./dev.env'),
- port: 8081,
+ port: 8080,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {},

config/prod.env.js

@@ -1,3 +1 @@
-module.exports = {
- NODE_ENV: '"production"'
-}
+module.exports = { NODE_ENV: '"production"', API_LOCATION: '"https://example.com/api/v1"',};

debug.log

@@ -0,0 +1 @@
+[0122/213651:ERROR:http_transport_win.cc(50)] WinHttpSendRequest: ������ʱ (0x2EE2)

dist/callback.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8" /></head><body> <h1>callback;</h1><script type="text/javascript" src="/static/js/manifest.[chunk].js"></script><script type="text/javascript" src="/static/js/vendor.[chunk].js"></script><script type="text/javascript" src="/static/js/callback.[chunk].js"></script></body></html><!--<script src="https://unpkg.com/[email protected]/dist/oidc-token-manager.min.js"></script>-->

dist/index.html

@@ -1 +1,14 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>vue element admin</title><link href=/vueAdmin/dist/static/css/app.2dd68a1fba9a742724952e11e550b5f8.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/vueAdmin/dist/static/js/manifest.7805c6cc4b4220502177.js></script><script type=text/javascript src=/vueAdmin/dist/static/js/vendor.26a7220dc2fbfce51280.js></script><script type=text/javascript src=/vueAdmin/dist/static/js/app.f8f8264aa6341fd7bdb9.js></script></body></html>
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>vue element admin</title>
+ <link href="static/favicon.ico" rel="shortcut icon" type="image/x-icon" />
+ <link href="/static/css/app.b5d087b39b7f98cacb21d201b6cfcdcd.css" rel="stylesheet"></head>
+ <body style="background-color: #fff;">
+ <div id="app">
+
+ </div>
+ <!-- built files will be auto injected -->
+ <script type="text/javascript" src="/static/js/manifest.[chunk].js"></script><script type="text/javascript" src="/static/js/vendor.[chunk].js"></script><script type="text/javascript" src="/static/js/app.[chunk].js"></script></body>
+</html>