vue - 前置工做 - 目錄功能介紹

一個DEMOS的完整目錄（因爲GWF問題，我就不一一打開網站一個個去搜索而且解釋了）能夠去關注：https://www.cnblogs.com/ye-hcj

 

build

　　build.js（本文來自http://www.javashuo.com/article/p-rynrbddk-dc.html）

1. 這個配置文件是命令npm run build 的入口配置文件，主要用於生產環境
2. 因爲這是一個系統的配置文件，將涉及不少的模塊和插件，因此這部份內容我將分多個文章講解，請關注我博客的其餘文章

 1 // npm和node版本檢查，請看個人check-versions配置文件解釋文章require('./check-versions')()
 2 
 3 // 設置環境變量爲production
 4 process.env.NODE_ENV = 'production'
 5 
 6 // ora是一個命令行轉圈圈動畫插件，好看用的
 7 var ora = require('ora')  8 // rimraf插件是用來執行UNIX命令rm和-rf的用來刪除文件夾和文件，清空舊的文件
 9 var rm = require('rimraf') 10 // node.js路徑模塊
11 var path = require('path') 12 // chalk插件，用來在命令行中輸入不一樣顏色的文字
13 var chalk = require('chalk') 14 // 引入webpack模塊使用內置插件和webpack方法
15 var webpack = require('webpack') 16 // 引入config下的index.js配置文件，此配置文件我以前介紹了請自行查閱，主要配置的是一些通用的選項
17 var config = require('../config') 18 // 下面是生產模式的webpack配置文件，請看個人webpack.prod.conf解釋文章
19 var webpackConfig = require('./webpack.prod.conf') 20 
21 // 開啓轉圈圈動畫
22 var spinner = ora('building for production...') 23 spinner.start() 24 
25 // 調用rm方法，第一個參數的結果就是 dist/static，表示刪除這個路徑下面的全部文件
26 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 27   // 若是刪除的過程當中出現錯誤，就拋出這個錯誤，同時程序終止
28   if (err) throw err 29   // 沒有錯誤，就執行webpack編譯
30   webpack(webpackConfig, function (err, stats) { 31     // 這個回調函數是webpack編譯過程當中執行
32     spinner.stop() // 中止轉圈圈動畫
33     if (err) throw err // 若是有錯誤就拋出錯誤
34     // 沒有錯誤就執行下面的代碼，process.stdout.write和console.log相似，輸出對象
35  process.stdout.write(stats.toString({ 36       // stats對象中保存着編譯過程當中的各類消息
37       colors: true, // 增長控制檯顏色開關
38       modules: false, // 不增長內置模塊信息
39       children: false, // 不增長子級信息
40       chunks: false, // 容許較少的輸出
41       chunkModules: false // 不將內置模塊的信息加到包信息
42     }) + '\n\n') 43     // 以上就是在編譯過程當中，持續打印消息
44     // 下面是編譯成功的消息
45     console.log(chalk.cyan('  Build complete.\n')) 46  console.log(chalk.yellow( 47       '  Tip: built files are meant to be served over an HTTP server.\n' +
48       '  Opening index.html over file:// won\'t work.\n'
49  )) 50  }) 51 })

 webpack官方文檔：https://webpack.js.org/concepts/

 

　　check-versions.js（本文來自http://www.javashuo.com/article/p-rynrbddk-dc.html）

 1 / 下面的插件是chalk插件，他的做用是在控制檯中輸出不一樣的顏色的字，大體這樣用chalk.blue('Hello world')，這款插件只能改變命令行中的字體顏色  2 var chalk = require('chalk')  3 // 下面這個是semver插件，是用來對特定的版本號作判斷的，好比
 4 // semver.gt('1.2.3','9.8.7') false 1.2.3版本比9.8.7版本低
 5 // semver.satisfies('1.2.3','1.x || >=2.5.0 || 5.0.0 - 7.2.3') true 1.2.3的版本符合後面的規則
 6 var semver = require('semver')  7 // 下面是導入package.json文件,要使用裏面的engines選項，要注意require是直接能夠導入json文件的，而且requrie返回的就是json對象
 8 var packageConfig = require('../package.json')  9 // 下面這個插件是shelljs，做用是用來執行Unix系統命令
10 var shell = require('shelljs') 11 // 下面涉及了不少Unix命令，這裏可能解釋的不夠詳細，第一時間精力有限，第二能力有限。。。
12 function exec (cmd) { 13   //腳本能夠經過 child_process 模塊新建子進程，從而執行 Unix 系統命令
14   //下面這段代碼實際就是把cmd這個參數傳遞的值轉化成先後沒有空格的字符串，也就是版本號
15   return require('child_process').execSync(cmd).toString().trim() 16 } 17 
18 var versionRequirements = [ 19  { 20     name: 'node', // node版本的信息
21     currentVersion: semver.clean(process.version), // 使用semver插件吧版本信息轉化成規定格式，也就是 ' =v1.2.3 ' -> '1.2.3' 這種功能
22     versionRequirement: packageConfig.engines.node // 這是規定的pakage.json中engines選項的node版本信息 "node":">= 4.0.0"
23  }, 24 ] 25 
26 if (shell.which('npm')) { 27  versionRequirements.push({ 28     name: 'npm', 29     currentVersion: exec('npm --version'), // 自動調用npm --version命令，而且把參數返回給exec函數，從而獲取純淨的版本號
30     versionRequirement: packageConfig.engines.npm // 這是規定的pakage.json中engines選項的node版本信息 "npm": ">= 3.0.0"
31  }) 32 } 33 
34 module.exports = function () { 35   var warnings = [] 36   for (var i = 0; i < versionRequirements.length; i++) { 37     var mod = versionRequirements[i] 38     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 39         //上面這個判斷就是若是版本號不符合package.json文件中指定的版本號，就執行下面的代碼
40       warnings.push(mod.name + ': ' +
41         chalk.red(mod.currentVersion) + ' should be ' +
42  chalk.green(mod.versionRequirement) 43         // 大體意思就是 把當前版本號用紅色字體 符合要求的版本號用綠色字體 給用戶提示具體合適的版本
44  ) 45  } 46  } 47 
48   if (warnings.length) { 49     console.log('') 50     console.log(chalk.yellow('To use this template, you must update following to modules:')) 51  console.log() 52     for (var i = 0; i < warnings.length; i++) { 53       var warning = warnings[i] 54       console.log('  ' + warning) 55  } 56  console.log() 57     process.exit(1) 58     // 提示用戶更新版本，具體不解釋了，應該能看懂
59  } 60 }

　　

　　vue-loader.conf.js（本博客）

 1 'use strict'
 2 const utils = require('./utils')  3 const config = require('../config')  4 const isProduction = process.env.NODE_ENV === 'production'
 5 const sourceMapEnabled = isProduction ?
 6  config.build.productionSourceMap :  7  config.dev.cssSourceMap  8 
 9 module.exports = { 10     // css加載器
11  loaders: utils.cssLoaders({ 12  sourceMap: sourceMapEnabled, 13  extract: isProduction 14  }), 15  cssSourceMap: sourceMapEnabled, 16  cacheBusting: config.dev.cacheBusting, 17     //css編譯之類
18  transformToRequire: { 19         video: ['src', 'poster'], 20         source: 'src', 21         img: 'src', 22         image: 'xlink:href'
23  } 24 }

 

 詳細使用，就很少說了，已經有一個示例了！ 

　　webpack.base.conf.js

 1 'use strict'
 2 const path = require('path')
 3 const utils = require('./utils')
 4 const config = require('../config')
 5 const vueLoaderConfig = require('./vue-loader.conf')
 6 
 7 function resolve(dir) {
 8     return path.join(__dirname, '..', dir)
 9 }
10 
11 
12 // 控制生成以及src目錄
13 
14 // 詳細webpack配置，請看官方文檔
15 module.exports = {
16     context: path.resolve(__dirname, '../'),
17     // 入口
18     entry: {
19         app: './src/main.js'
20     },
21     // 出口
22     output: {
23         path: config.build.assetsRoot,
24         filename: '[name].js',
25         publicPath: process.env.NODE_ENV === 'production' ?
26             config.build.assetsPublicPath : config.dev.assetsPublicPath
27     },
28     resolve: {
29         extensions: ['.js', '.vue', '.json'],
30         alias: {
31             'vue$': 'vue/dist/vue.esm.js',
32             '@': resolve('src'),
33         }
34     },
35     module: {
36         // 各類模塊加載(vue,js,png等)
37         rules: [{
38                 test: /\.vue$/,
39                 loader: 'vue-loader',
40                 options: vueLoaderConfig
41             },
42             {
43                 test: /\.js$/,
44                 loader: 'babel-loader',
45                 include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
46             },
47             {
48                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
49                 loader: 'url-loader',
50                 options: {
51                     limit: 10000,
52                     name: utils.assetsPath('img/[name].[hash:7].[ext]')
53                 }
54             },
55             {
56                 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
57                 loader: 'url-loader',
58                 options: {
59                     limit: 10000,
60                     name: utils.assetsPath('media/[name].[hash:7].[ext]')
61                 }
62             },
63             {
64                 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
65                 loader: 'url-loader',
66                 options: {
67                     limit: 10000,
68                     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
69                 }
70             }
71         ]
72     },
73     node: {
74         // prevent webpack from injecting useless setImmediate polyfill because Vue
75         // source contains it (although only uses it if it's native).
76         setImmediate: false,
77         // prevent webpack from injecting mocks to Node native modules
78         // that does not make sense for the client
79         dgram: 'empty',
80         fs: 'empty',
81         net: 'empty',
82         tls: 'empty',
83         child_process: 'empty'
84     }
85 }

　　webpack.dev.conf.js

 1 'use strict'
 2 const utils = require('./utils')
 3 const webpack = require('webpack')
 4 const config = require('../config')
 5     // 一個能夠合併數組和對象的插件
 6 const merge = require('webpack-merge')
 7 const path = require('path')
 8 const baseWebpackConfig = require('./webpack.base.conf')
 9 const CopyWebpackPlugin = require('copy-webpack-plugin')
10     // 一個用於生成HTML文件並自動注入依賴文件（link/script）的webpack插件
11 const HtmlWebpackPlugin = require('html-webpack-plugin')
12     // 用於更友好地輸出webpack的警告、錯誤等信息
13 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
14 const portfinder = require('portfinder')
15 
16 const HOST = process.env.HOST
17 const PORT = process.env.PORT && Number(process.env.PORT)
18     // 合併基礎的webpack配置
19 const devWebpackConfig = merge(baseWebpackConfig, {
20     module: {
21         rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
22     },
23     // cheap-module-eval-source-map is faster for development
24     // 配置Source Maps。在開發中使用cheap-module-eval-source-map更快
25     devtool: config.dev.devtool,
26 
27     // 這些devServer選項應該在/config/index.js中定製
28     devServer: {
29         clientLogLevel: 'warning',
30         historyApiFallback: {
31             rewrites: [
32                 { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
33             ],
34         },
35         hot: true,
36         contentBase: false, // 由於咱們使用CopyWebpackPlugin必需
37         compress: true,
38         host: HOST || config.dev.host,
39         port: PORT || config.dev.port,
40         open: config.dev.autoOpenBrowser,
41         overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
42         publicPath: config.dev.assetsPublicPath,
43         proxy: config.dev.proxyTable,
44         quiet: true, // FriendlyErrorsPlugin必需
45         watchOptions: {
46             poll: config.dev.poll,
47         }
48     },
49     plugins: [
50         new webpack.DefinePlugin({
51             'process.env': require('../config/dev.env')
52         }),
53         new webpack.HotModuleReplacementPlugin(),
54         new webpack.NamedModulesPlugin(), // HMR在更新控制檯上顯示正確的文件名.
55         new webpack.NoEmitOnErrorsPlugin(),
56         // https://github.com/ampedandwired/html-webpack-plugin
57         new HtmlWebpackPlugin({
58             filename: 'index.html',
59             template: 'index.html',
60             inject: true
61         }),
62         // 複製自定義靜態assets
63         new CopyWebpackPlugin([{
64             from: path.resolve(__dirname, '../static'),
65             to: config.dev.assetsSubDirectory,
66             ignore: ['.*']
67         }])
68     ]
69 })
70 
71 module.exports = new Promise((resolve, reject) => {
72     portfinder.basePort = process.env.PORT || config.dev.port
73     portfinder.getPort((err, port) => {
74         if (err) {
75             reject(err)
76         } else {
77             // 發佈e2e測試所需的新端口
78             process.env.PORT = port
79                 // 添加端口配置服務
80             devWebpackConfig.devServer.port = port
81 
82             // 添加友好錯誤的插件
83             devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84                 compilationSuccessInfo: {
85                     messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86                 },
87                 onErrors: config.dev.notifyOnErrors ?
88                     utils.createNotifierCallback() : undefined
89             }))
90 
91             resolve(devWebpackConfig)
92         }
93     })
94 })

　　wepack.prod.conf.js

  1 // 引入依賴模塊
  2 var path = require('path')
  3 var utils = require('./utils')
  4 var webpack = require('webpack')
  5     // 引入基本配置
  6 var config = require('../config')
  7 var merge = require('webpack-merge')
  8 var baseWebpackConfig = require('./webpack.base.conf')
  9 var HtmlWebpackPlugin = require('html-webpack-plugin')
 10 
 11 // 用於從webpack生成的bundle中提取文本到特定文件中的插件
 12 // 能夠抽取出css，js文件將其與webpack輸出的bundle分離
 13 
 14 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 15 
 16 var env = process.env.NODE_ENV === 'testing' ?
 17     require('../config/test.env') :
 18     config.build.env
 19 
 20 // 合併基礎的webpack配置
 21 var webpackConfig = merge(baseWebpackConfig, {
 22     module: {
 23         rules: utils.styleLoaders({
 24             sourceMap: config.build.productionSourceMap,
 25             extract: true
 26         })
 27     },
 28 
 29     devtool: config.build.productionSourceMap ? '#source-map' : false,
 30     // 配置webpack的輸出
 31     output: {
 32         // 編譯輸出目錄
 33         path: config.build.assetsRoot,
 34         // 編譯輸出文件名格式
 35         filename: utils.assetsPath('js/[name].[chunkhash].js'),
 36         // 沒有指定輸出名的文件輸出的文件名格式
 37         chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 38     },
 39 
 40     // 配置webpack插件
 41 
 42     plugins: [
 43         // http://vuejs.github.io/vue-loader/en/workflow/production.html
 44         new webpack.DefinePlugin({
 45             'process.env': env
 46         }),
 47 
 48         // 醜化壓縮代碼
 49         new webpack.optimize.UglifyJsPlugin({
 50             compress: {
 51                 warnings: false
 52             },
 53             sourceMap: true
 54         }),
 55 
 56 
 57 
 58         // 抽離css文件
 59         new ExtractTextPlugin({
 60             filename: utils.assetsPath('css/[name].[contenthash].css')
 61         }),
 62 
 63 
 64 
 65         // generate dist index.html with correct asset hash for caching.
 66         // you can customize output by editing /index.html
 67         // see https://github.com/ampedandwired/html-webpack-plugin
 68         new HtmlWebpackPlugin({
 69             filename: process.env.NODE_ENV === 'testing'
 70 
 71                 ?
 72                 'index.html' :
 73                 config.build.index,
 74             template: 'index.html',
 75             inject: true,
 76             minify: {
 77                 removeComments: true,
 78                 collapseWhitespace: true,
 79                 removeAttributeQuotes: true
 80                     // more options:
 81                     // https://github.com/kangax/html-minifier#options-quick-reference
 82             },
 83 
 84             // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 85             chunksSortMode: 'dependency'
 86         }),
 87 
 88         // split vendor js into its own file
 89         new webpack.optimize.CommonsChunkPlugin({
 90             name: 'vendor',
 91             minChunks: function(module, count) {
 92                 // any required modules inside node_modules are extracted to vendor
 93 
 94                 return (
 95                     module.resource &&
 96                     /\.js$/.test(module.resource) &&
 97                     module.resource.indexOf(
 98                         path.join(__dirname, '../node_modules')
 99                     ) === 0
100                 )
101             }
102         }),
103         // extract webpack runtime and module manifest to its own file in order to
104         // prevent vendor hash from being updated whenever app bundle is updated
105 
106         new webpack.optimize.CommonsChunkPlugin({
107             name: 'manifest',
108             chunks: ['vendor']
109         })
110     ]
111 })
112 
113 // gzip模式下須要引入compression插件進行壓縮
114 if (config.build.productionGzip) {
115     var CompressionWebpackPlugin = require('compression-webpack-plugin')
116     webpackConfig.plugins.push(
117         new CompressionWebpackPlugin({
118             asset: '[path].gz[query]',
119             algorithm: 'gzip',
120             test: new RegExp(
121                 '\\.(' +
122                 config.build.productionGzipExtensions.join('|') +
123                 ')$'
124             ),
125 
126             threshold: 10240,
127             minRatio: 0.8
128         })
129     )
130 }
131 
132 if (config.build.bundleAnalyzerReport) {
133     var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
134     webpackConfig.plugins.push(new BundleAnalyzerPlugin())
135 }
136 
137 module.exports = webpackConfig

 　　config/dev.env.js

 1 'use strict'
 2 
 3 
 4 const merge = require('webpack-merge')
 5 const prodEnv = require('./prod.env')
 6 
 7 // webpack-merge合併模塊的做用
 8 module.exports = merge(prodEnv, {
 9     NODE_ENV: '"development"'
10 })

　　config/index.js

 1 'use strict'
 2 // Template version: 1.3.1
 3 // see http://vuejs-templates.github.io/webpack for documentation.
 4 
 5 const path = require('path')
 6 
 7 module.exports = {
 8     dev: {
 9 
10         // 路徑
11         assetsSubDirectory: 'static',
12         assetsPublicPath: '/',
13         proxyTable: {},
14 
15         // 各類Dev服務器設置
16         host: 'localhost', //能夠被process.env.HOST覆蓋
17         port: 8080, // 能夠被process.env.PORT覆蓋，若是端口正在使用，則會肯定一個空閒的
18         autoOpenBrowser: false,
19         errorOverlay: true,
20         notifyOnErrors: true,
21         poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 
23 
24         /**
25          * Source Maps
26          */
27 
28         // https://webpack.js.org/configuration/devtool/#development
29         devtool: 'cheap-module-eval-source-map',
30 
31         // 若是您在devtools中調試vue-files時遇到問題，
32         // 設置爲false - 它可能會有幫助
33         // https://vue-loader.vuejs.org/en/options.html#cachebusting
34         cacheBusting: true,
35 
36         cssSourceMap: true
37     },
38 
39     build: {
40         // index.html 模板
41         index: path.resolve(__dirname, '../dist/index.html'),
42 
43         // 路徑
44         assetsRoot: path.resolve(__dirname, '../dist'),
45         assetsSubDirectory: 'static',
46         assetsPublicPath: '/',
47 
48         /**
49          * Source Maps
50          */
51 
52         productionSourceMap: true,
53         // https://webpack.js.org/configuration/devtool/#production
54         devtool: '#source-map',
55 
56         // Gzip off by default as many popular static hosts such as
57         // Surge or Netlify already gzip all static assets for you.
58         // Before setting to `true`, make sure to:
59         // npm install --save-dev compression-webpack-plugin
60 
61         // 生成環境Gzip
62         productionGzip: false,
63         // 生成環境Gzip壓縮擴展
64         productionGzipExtensions: ['js', 'css'],
65 
66         // Run the build command with an extra argument to
67         // View the bundle analyzer report after build finishes:
68         // `npm run build --report`
69         // Set to `true` or `false` to always turn it on or off
70         bundleAnalyzerReport: process.env.npm_config_report
71     }
72 }

　　config/prod.env.js

1 'use strict'
2 module.exports = {
3   NODE_ENV: '"production"'
4 }

　　config/test.env.js

1 'use strict'
2 //合併模塊
3 const merge = require('webpack-merge')
4 const devEnv = require('./dev.env')
5 
6 module.exports = merge(devEnv, {
7   NODE_ENV: '"testing"'
8 })

 

　　src/assets(資源路徑)

　　src/component(組件)

　　src/index.js(配置子組件路由,也稱子路由)

　　App.vue(單文件組件)

　　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   components: { App },
14   template: '<App/>'
15 })

　　static/.gitkeep(.gitkeep和.gitignore同樣，都是配置不git上傳的)

 

　　test

　　.babelrc(es6或es7轉es5所配置)

　　.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

　　.postcssrc.js(css文件之類的配置)

 1 // https://github.com/michael-ciniawsky/postcss-load-config
 2 
 3 module.exports = {
 4     "plugins": {
 5         "postcss-import": {},
 6         "postcss-url": {},
 7         // 編輯目標瀏覽器：使用package.json中的「browserslist」字段
 8         "autoprefixer": {}
 9     }
10 }

　　index.html(主頁)

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>demos</title>
 7   </head>
 8   <body>
 9     <div id="app"></div>
10     <!-- built files will be auto injected -->
11   </body>
12 </html>

　　package.json(配置包與包，以及node_modules之間的關係，版本以及啓動的一系列)

 1 {
 2   "name": "demos",
 3   "version": "1.0.0",
 4   "description": "A Vue.js project",
 5   "author": "",
 6   "private": true,
 7   "scripts": {
 8     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9     "start": "npm run dev",
10     "unit": "jest --config test/unit/jest.conf.js --coverage",
11     "e2e": "node test/e2e/runner.js",
12     "test": "npm run unit && npm run e2e",
13     "build": "node build/build.js"
14   },
15   "dependencies": {
16     "vue": "^2.5.2",
17     "vue-router": "^3.0.1"
18   },
19   "devDependencies": {
20     "autoprefixer": "^7.1.2",
21     "babel-core": "^6.22.1",
22     "babel-helper-vue-jsx-merge-props": "^2.0.3",
23     "babel-jest": "^21.0.2",
24     "babel-loader": "^7.1.1",
25     "babel-plugin-dynamic-import-node": "^1.2.0",
26     "babel-plugin-syntax-jsx": "^6.18.0",
27     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
28     "babel-plugin-transform-runtime": "^6.22.0",
29     "babel-plugin-transform-vue-jsx": "^3.5.0",
30     "babel-preset-env": "^1.3.2",
31     "babel-preset-stage-2": "^6.22.0",
32     "babel-register": "^6.22.0",
33     "chalk": "^2.0.1",
34     "chromedriver": "^2.27.2",
35     "copy-webpack-plugin": "^4.0.1",
36     "cross-spawn": "^5.0.1",
37     "css-loader": "^0.28.0",
38     "extract-text-webpack-plugin": "^3.0.0",
39     "file-loader": "^1.1.4",
40     "friendly-errors-webpack-plugin": "^1.6.1",
41     "html-webpack-plugin": "^2.30.1",
42     "jest": "^22.0.4",
43     "jest-serializer-vue": "^0.3.0",
44     "nightwatch": "^0.9.12",
45     "node-notifier": "^5.1.2",
46     "optimize-css-assets-webpack-plugin": "^3.2.0",
47     "ora": "^1.2.0",
48     "portfinder": "^1.0.13",
49     "postcss-import": "^11.0.0",
50     "postcss-loader": "^2.0.8",
51     "postcss-url": "^7.2.1",
52     "rimraf": "^2.6.0",
53     "selenium-server": "^3.0.1",
54     "semver": "^5.3.0",
55     "shelljs": "^0.7.6",
56     "uglifyjs-webpack-plugin": "^1.1.1",
57     "url-loader": "^0.5.8",
58     "vue-jest": "^1.0.2",
59     "vue-loader": "^13.3.0",
60     "vue-style-loader": "^3.0.1",
61     "vue-template-compiler": "^2.5.2",
62     "webpack": "^3.6.0",
63     "webpack-bundle-analyzer": "^2.9.0",
64     "webpack-dev-server": "^2.9.1",
65     "webpack-merge": "^4.1.0"
66   },
67   "engines": {
68     "node": ">= 6.0.0",
69     "npm": ">= 3.0.0"
70   },
71   "browserslist": [
72     "> 1%",
73     "last 2 versions",
74     "not ie <= 8"
75   ]
76 }

　　README.md(說明以及使用)

# demos

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

 

Now，如今你們有什麼疑惑直接（chrome）CTRL+F，而後搜索本網頁字段 有什麼不足之間你們能夠提出，不足之處能夠得以完善！