cnpm install -g vue-cli

cnpm update vue-cli

vue -V

cnpm view vue-cli

vue init webpack <Project Name>

'use strict'require('./check-versions')() //調用版本檢查process.env.NODE_ENV = 'production' //將環境配置為生產環境const ora = require('ora') //npm包 loading插件const rm = require('rimraf') //npm包 用于刪除文件const path = require('path')//npm包 文件路徑工具const chalk = require('chalk')//npm包 在終端輸出帶顏色的文字const webpack = require('webpack')//引入webpack.jsconst config = require('../config')//引入配置文件const webpackConfig = require('./webpack.prod.conf')//引入生產環境配置文件// 在終端顯示loading效果，并輸出提示const spinner = ora('building for production...')spinner.start()//先遞歸刪除dist文件再生成新文件，避免冗余rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err webpack(webpackConfig, (err, stats) => {  spinner.stop()  if (err) throw err  process.stdout.write(stats.toString({   colors: true,   modules: false,   children: false,    chunks: false,   chunkModules: false  }) + '/n/n')  if (stats.hasErrors()) {   console.log(chalk.red(' Build failed with errors./n'))   process.exit(1)  }  console.log(chalk.cyan(' Build complete./n'))  console.log(chalk.yellow(   ' Tip: built files are meant to be served over an HTTP server./n' +   ' Opening index.html over file:// won/'t work./n'  )) })})

'use strict'const chalk = require('chalk')const semver = require('semver')//檢查版本const packageConfig = require('../package.json')const shell = require('shelljs')//shelljs 模塊重新包裝了 child_process，調用系統命令更加方便function exec (cmd) {//返回通過child_process模塊的新建子進程，執行 Unix 系統命令后轉成沒有空格的字符串 return require('child_process').execSync(cmd).toString().trim()}const versionRequirements = [ {  name: 'node',  currentVersion: semver.clean(process.version),//使用semver格式化版本  versionRequirement: packageConfig.engines.node //獲取package.json中設置的node版本 }]if (shell.which('npm')) { versionRequirements.push({  name: 'npm',  currentVersion: exec('npm --version'),// 自動調用npm --version命令，并且把參數返回給exec函數，從而獲取純凈的版本號  versionRequirement: packageConfig.engines.npm })}module.exports = function () { const warnings = [] for (let i = 0; i < versionRequirements.length; i++) {  const mod = versionRequirements[i]  //若版本號不符合package.json文件中指定的版本號，就報錯  if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {   warnings.push(mod.name + ': ' +    chalk.red(mod.currentVersion) + ' should be ' +    chalk.green(mod.versionRequirement)   )  } } if (warnings.length) {  console.log('')  console.log(chalk.yellow('To use this template, you must update following to modules:'))  console.log()  for (let i = 0; i < warnings.length; i++) {   const warning = warnings[i]   console.log(' ' + warning)  }  console.log()  process.exit(1) }}

var path = require('path')// node自帶的文件路徑工具var config = require('../config')// 配置文件var ExtractTextPlugin = require('extract-text-webpack-plugin')// 提取css的插件/** @method assertsPath 生成靜態資源的路徑(判斷開發環境和生產環境,為config文件中index.js文件中定義assetsSubDirectory) * @param {String}  _path 相對于靜態資源文件夾的文件路徑 * @return {String}     靜態資源完整路徑 */exports.assetsPath = function (_path) { var assetsSubDirectory = process.env.NODE_ENV === 'production'  ? config.build.assetsSubDirectory  : config.dev.assetsSubDirectory //nodeJs path提供用于處理文件路徑的工具;path.posix提供對路徑方法的POSIX(可移植性操作系統接口)特定實現的訪問(可跨平臺); path.posix.join與path.join一樣，不過總是以 posix 兼容的方式交互 return path.posix.join(assetsSubDirectory, _path)}/**@method cssLoaders 生成處理css的loaders配置,使用css-loader和postcssLoader,通過options.usePostCSS屬性來判斷是否使用postcssLoader中壓縮等方法 * @param {Object} option = {sourceMap: true,// 是否開啟 sourceMapextract: true // 是否提取css}生成配置 * @return {Object} 處理css的loaders配置對象 */exports.cssLoaders = function (options) { options = options || {} var cssLoader = {  loader: 'css-loader',  options: {   minimize: process.env.NODE_ENV === 'production',   sourceMap: options.sourceMap  } } /**@method generateLoaders 生成 ExtractTextPlugin對象或loader字符串  * @param {Array}    loaders loader名稱數組  * @return {String|Object}    ExtractTextPlugin對象或loader字符串  */ function generateLoaders (loader, loaderOptions) {  var loaders = [cssLoader]  if (loader) {   loaders.push({      loader: loader + '-loader',    options: Object.assign({}, loaderOptions, {     sourceMap: options.sourceMap    })   })  }  // ExtractTextPlugin提取css(當上面的loaders未能正確引入時,使用vue-style-loader)  if (options.extract) {// 生產環境中，默認為true   return ExtractTextPlugin.extract({    use: loaders,    fallback: 'vue-style-loader'   })  } else {//返回vue-style-loader連接loaders的最終值   return ['vue-style-loader'].concat(loaders)  } } return {  css: generateLoaders(),//需要css-loader 和 vue-style-loader  postcss: generateLoaders(),//需要css-loader、postcssLoader 和 vue-style-loader  less: generateLoaders('less'),//需要less-loader 和 vue-style-loader  sass: generateLoaders('sass', { indentedSyntax: true }),//需要sass-loader 和 vue-style-loader  scss: generateLoaders('sass'),//需要sass-loader 和 vue-style-loader  stylus: generateLoaders('stylus'),//需要stylus-loader 和 vue-style-loader  styl: generateLoaders('stylus')//需要stylus-loader 和 vue-style-loader }} /**@method styleLoaders 生成 style-loader的配置 * @param {Object}   options 生成配置 * @return {Array}   style-loader的配置 */exports.styleLoaders = function (options) { var output = [] var loaders = exports.cssLoaders(options) //將各種css,less,sass等綜合在一起得出結果輸出output for (var extension in loaders) {  var loader = loaders[extension]  output.push({   test: new RegExp('//.' + extension + '$'),   use: loader  }) } return output}

'use strict'const utils = require('./utils')const config = require('../config')const isProduction = process.env.NODE_ENV === 'production'//生產環境,提取css樣式到單獨文件const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMapmodule.exports = { loaders: utils.cssLoaders({  sourceMap: sourceMapEnabled,  extract: isProduction }), cssSourceMap: sourceMapEnabled, cacheBusting: config.dev.cacheBusting, //編譯時將“引入路徑”轉換為require調用,使其可由webpack處理 transformToRequire: {  video: ['src', 'poster'],  source: 'src',  img: 'src',  image: 'xlink:href' }}

'use strict'const path = require('path')// node自帶的文件路徑工具const utils = require('./utils')// 工具函數集合const config = require('../config')// 配置文件const vueLoaderConfig = require('./vue-loader.conf')// 工具函數集合/** * 獲取"絕對路徑" * @method resolve * @param {String} dir 相對于本文件的路徑 * @return {String}   絕對路徑 */function resolve(dir) { return path.join(__dirname, '..', dir)}module.exports = { context: path.resolve(__dirname, '../'), //入口js文件(默認為單頁面所以只有app一個入口) entry: {  app: './src/main.js' }, //配置出口 output: {  path: config.build.assetsRoot,//打包編譯的根路徑(dist)  filename: '[name].js',  publicPath: process.env.NODE_ENV === 'production'   ? config.build.assetsPublicPath   : config.dev.assetsPublicPath//發布路徑 }, resolve: {  extensions: ['.js', '.vue', '.json'],// 自動補全的擴展名  //別名配置  alias: {   'vue$': 'vue/dist/vue.esm.js',   '@': resolve('src'),// eg:"src/components" => "@/components"  } }, module: {  rules: [   //使用vue-loader將vue文件編譯轉換為js   {    test: //.vue$/,    loader: 'vue-loader',    options: vueLoaderConfig   },   //通過babel-loader將ES6編譯壓縮成ES5   {    test: //.js$/,    loader: 'babel-loader',    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]   },   //使用url-loader處理(圖片、音像、字體)，超過10000編譯成base64   {    test: //.(png|jpe?g|gif|svg)(/?.*)?$/,    loader: 'url-loader',    options: {     limit: 10000,     name: utils.assetsPath('img/[name].[hash:7].[ext]')    }   },   {    test: //.(mp4|webm|ogg|mp3|wav|flac|aac)(/?.*)?$/,    loader: 'url-loader',    options: {     limit: 10000,     name: utils.assetsPath('media/[name].[hash:7].[ext]')    }   },   {    test: //.(woff2?|eot|ttf|otf)(/?.*)?$/,    loader: 'url-loader',    options: {     limit: 10000,     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')    }   }  ] }, //nodeJs全局變量/模塊，防止webpack注入一些nodeJs的東西到vue中 node: {  setImmediate: false,  dgram: 'empty',  fs: 'empty',  net: 'empty',  tls: 'empty',  child_process: 'empty' }}

'use strict'const utils = require('./utils')const webpack = require('webpack')const config = require('../config')const merge = require('webpack-merge')//webpack-merge實現合并const path = require('path')const baseWebpackConfig = require('./webpack.base.conf')const CopyWebpackPlugin = require('copy-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')//webpack的提示錯誤和日志信息的插件const portfinder = require('portfinder')// 查看空閑端口位置，默認情況下搜索8000這個端口const HOST = process.env.HOSTconst PORT = process.env.PORT && Number(process.env.PORT)const devWebpackConfig = merge(baseWebpackConfig, { module: {  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, devtool: config.dev.devtool,//調試模式 devServer: {  clientLogLevel: 'warning',  historyApiFallback: {//使用 HTML5 History API 時， 404 響應替代為 index.html   rewrites: [    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },   ],  },  hot: true,//熱重載  contentBase: false, // 提供靜態文件訪問  compress: true,//壓縮  host: HOST || config.dev.host,  port: PORT || config.dev.port,  open: config.dev.autoOpenBrowser,//npm run dev 時自動打開瀏覽器  overlay: config.dev.errorOverlay   ? { warnings: false, errors: true }   : false,// 顯示warning 和 error 信息  publicPath: config.dev.assetsPublicPath,  proxy: config.dev.proxyTable,//api代理  quiet: true, //控制臺打印警告和錯誤(用FriendlyErrorsPlugin 為 true)  watchOptions: {// 檢測文件改動   poll: config.dev.poll,  } }, plugins: [  new webpack.DefinePlugin({   'process.env': require('../config/dev.env')  }),  new webpack.HotModuleReplacementPlugin(),//模塊熱替換插件，修改模塊時不需要刷新頁面  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.  new webpack.NoEmitOnErrorsPlugin(),//webpack編譯錯誤的時候，中斷打包進程，防止錯誤代碼打包到文件中  // 將打包編譯好的代碼插入index.html  new HtmlWebpackPlugin({   filename: 'index.html',   template: 'index.html',   inject: true  }),  // 提取static assets 中css 復制到dist/static文件  new CopyWebpackPlugin([   {    from: path.resolve(__dirname, '../static'),    to: config.dev.assetsSubDirectory,    ignore: ['.*']//忽略.*的文件   }  ]) ]})module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port portfinder.getPort((err, port) => { //查找端口號  if (err) {   reject(err)  } else {   //端口被占用時就重新設置evn和devServer的端口   process.env.PORT = port   devWebpackConfig.devServer.port = port   // npm run dev成功的友情提示   devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({    compilationSuccessInfo: {     messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],    },    onErrors: config.dev.notifyOnErrors    ? utils.createNotifierCallback()    : undefined   }))   resolve(devWebpackConfig)  } })})

'use strict'const path = require('path')const utils = require('./utils')const webpack = require('webpack')const config = require('../config')const merge = require('webpack-merge')const baseWebpackConfig = require('./webpack.base.conf')const CopyWebpackPlugin = require('copy-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const ExtractTextPlugin = require('extract-text-webpack-plugin')const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const env = require('../config/prod.env')const webpackConfig = merge(baseWebpackConfig, { module: {  rules: utils.styleLoaders({   sourceMap: config.build.productionSourceMap,   extract: true,   usePostCSS: true  }) }, devtool: config.build.productionSourceMap ? config.build.devtool : false,//是否開啟調試模式 output: {  path: config.build.assetsRoot,  filename: utils.assetsPath('js/[name].[chunkhash].js'),  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, plugins: [  new webpack.DefinePlugin({   'process.env': env  }),  new UglifyJsPlugin({//壓縮js   uglifyOptions: {    compress: {     warnings: false    }   },   sourceMap: config.build.productionSourceMap,   parallel: true  }),  new ExtractTextPlugin({//提取靜態文件，減少請求   filename: utils.assetsPath('css/[name].[contenthash].css'),   allChunks: true,  }),  new OptimizeCSSPlugin({//提取優化壓縮后(刪除來自不同組件的冗余代碼)的css   cssProcessorOptions: config.build.productionSourceMap    ? { safe: true, map: { inline: false } }    : { safe: true }  }),  new HtmlWebpackPlugin({ //html打包壓縮到index.html   filename: config.build.index,   template: 'index.html',   inject: true,   minify: {    removeComments: true,//刪除注釋    collapseWhitespace: true,//刪除空格    removeAttributeQuotes: true//刪除屬性的引號   },   chunksSortMode: 'dependency'//模塊排序，按照我們需要的順序排序  }),  new webpack.HashedModuleIdsPlugin(),  new webpack.optimize.ModuleConcatenationPlugin(),  new webpack.optimize.CommonsChunkPlugin({  // node_modules中的任何所需模塊都提取到vendor   name: 'vendor',   minChunks (module) {    return (     module.resource &&     //.js$/.test(module.resource) &&     module.resource.indexOf(      path.join(__dirname, '../node_modules')     ) === 0    )   }  }),  new webpack.optimize.CommonsChunkPlugin({   name: 'manifest',   minChunks: Infinity  }),  new webpack.optimize.CommonsChunkPlugin({   name: 'app',   async: 'vendor-async',   children: true,   minChunks: 3  }),  new CopyWebpackPlugin([//復制static中的靜態資源（默認到dist里面）   {    from: path.resolve(__dirname, '../static'),    to: config.build.assetsSubDirectory,    ignore: ['.*']   }  ]) ]})if (config.build.productionGzip) { const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push(  new CompressionWebpackPlugin({   asset: '[path].gz[query]',   algorithm: 'gzip',   test: new RegExp(    '//.(' +    config.build.productionGzipExtensions.join('|') +    ')$'   ),   threshold: 10240,   minRatio: 0.8  }) )}if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin())}module.exports = webpackConfig

'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, { NODE_ENV: '"development"'})

'use strict'module.exports = { NODE_ENV: '"production"'}

process.env.屬性名

'use strict';const path = require('path');module.exports = { // ===================開發環境配置 dev: {  assetsSubDirectory: 'static',//靜態資源文件夾(一般存放css、js、image等文件)  assetsPublicPath: '/',//根目錄  proxyTable: {},//配置API代理，可利用該屬性解決跨域的問題  host: 'localhost', // 可以被 process.env.HOST 覆蓋  port: 3030, // 可以被 process.env.PORT 覆蓋  autoOpenBrowser: true,//編譯后自動打開瀏覽器頁面 http://localhost:3030/("port + host",默認"false"),設置路由重定向自動打開您的默認頁面  errorOverlay: true,//瀏覽器錯誤提示  notifyOnErrors: true,//跨平臺錯誤提示  poll: false, //webpack提供的使用文件系統(file system)獲取文件改動的通知devServer.watchOptions(監控文件改動)  devtool: 'cheap-module-eval-source-map',//webpack提供的用來調試的模式，有多個不同值代表不同的調試模式  cacheBusting: true,// 配合devtool的配置，當給文件名插入新的hash導致清除緩存時是否生成source-map  cssSourceMap: true //記錄代碼壓縮前的位置信息,當產生錯誤時直接定位到未壓縮前的位置,方便調試 },// ========================生產環境配置 build: {  index: path.resolve(__dirname, '../dist/index.html'),//編譯后"首頁面"生成的絕對路徑和名字  assetsRoot: path.resolve(__dirname, '../dist'),//打包編譯的根路徑(默認dist，存放打包壓縮后的代碼)  assetsSubDirectory: 'static',//靜態資源文件夾(一般存放css、js、image等文件)  assetsPublicPath: '/',//發布的根目錄(dist文件夾所在路徑)  productionSourceMap: true,//是否開啟source-map  devtool: '#source-map',//(詳細參見：https://webpack.docschina.org/configuration/devtool)  productionGzip: false,//是否壓縮  productionGzipExtensions: ['js', 'css'],//unit的gzip命令用來壓縮文件（gzip模式下需要壓縮的文件的擴展名有js和css）  bundleAnalyzerReport: process.env.npm_config_report //是否開啟打包后的分析報告 }};