vue-cli是一个用于快速搭建vue项目的 脚手架。
二、vue-cli安装、更新
安装过nodeJs 、cnpm 后，全局安装vue-cli（以后其他项目可直接使用）：
cnpm install -g vue-cli
更新：
cnpm update vue-cli
查看安装成功否（有版本号就是成功,V大写）
vue -V
查看npm注册表里vue-cli版本号：
cnpm view vue-cli
三、vue-cli 使用
安装过webpack 、vue-cli后，可以开始搭建vue项目：
vue init webpack <Project Name>
eg：右击Git Base Here（如果你没有用git ，你也可以按住shift键右击选择“在此处打开命令窗口”，或者 cmd :cd \project/lfxProject），如图：
ps：ESLint(一个javascript代码检测工具)、unit tests(单元测试)、Nightwatch（一个e2e用户界面测试工具）。
四、项目完成
项目结构如下:
各文件作用解析，如下：
1、build文件夹：
build文件夹的结构：
（1）build.js
'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.js const 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' )) }) })
ps：require/export是一种nodeJs(commonJs规范)的依赖注入的方法，import/export是ES6语法，用于引入模块，在nodeJs中使用的ES6语法最终会使用babel工具（babel-loader）转化为ES5
（2）check-version.js：检测node和npm的版本，实现版本依赖
'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) } }
（3）utils.js：utils是工具的意思，是一个用来处理css的文件，这个文件包含了三个工具函数：
生成静态资源的路径
生成 ExtractTextPlugin对象或loader字符串
生成 style-loader的配置