主要功能：目录结构、本地调试、代码部署、热加载、单元测试在前端技术飞速发展的今天，angular.js、vue.js而react.js作为前端框架，呈现了三国并立的局面。作为中国人，不懂vue，小生说无可厚非。如果你是一个不懂vue的中国前端猿，小生表示遗憾。而vue-cli是官方推荐的快速搭建vue项目的脚手架，大家应该学会使用。本文将介绍如何使用vue-cli。在使用vue-cli之前，希望你具备以下条件：扎实的JavaScript/HTML/CSS基本功通读官方教程（guide）的基础知识这里不再赘述什么是Vue.js，请前往：vuejs。org／中文文档GitHub查看相关资源信息。安装检查是否安装了node.js，如果没有，请根据自己的系统安装node-vv8.00vue-clinpminstall-gvue-clivue-cli命令行命令：init从模板创建项目列表到listall官方模板构建构建项目帮助[cmd]显示[cmd]命令的帮助信息使用vuelist查看所有模板.★browserify-simple-用于快速构建的简单Browserify+vueify配置。★pwa-基于webpack的PWA模板。★simple-最简单的基于单个html文件的vue配置模板。★webpack-功能齐全的Webpack+vue-loader配置，具有热重载、linting、测试和css提取。★webpack-simple-用于快速构建的简单webpack+vue-loader配置。使用vueinit基于webpack模板创建项目（目前使用最多）vueinitwebpack*Projectname(demo)项目名称，不能大写或中文，直接回车，使用默认名称*项目描述（一个Vue.js项目）项目描述，也可以直接回车，使用默认值*Author项目作者，使用默认名称*Installvue-router?(Y/n)是否安装vue-router，这是官方路线，大多数情况下都使用*使用ESLint来lint你的代码？(Y/n)是否使用ESLint来管理代码，ESLint是一个代码风格管理工具，用于统一代码风格，不会影响整体运行。这也是为了团队发展。一般项目都会用*PickanESLintpreset选择一个ESLint预设，写vue项目的代码风格，选择默认Standard*SetupunittestswithKarma+Mocha?(Y/n)是否安装单元测试，选择安装*Setupe2etestswithNightwatch?(Y/n)是否安装e2e测试，选择安装项目结构，cd到demo目录下，找到如下项目结构文件说明--build目录包含构建脚本（包括构建webpack配置时使用的构建脚本)--config配置脚本（Vue项目启动时需要的配置，开发模式和生产模式）--通过npminstall安装的node_modules项目依赖--src项目源码目录--assets项目模块资源文件包括：Images,css(会被webpack处理)--components项目相关的Vue组件，方便复用--router项目路由定义App.vue页面入口文件main.js项目的入口文件，挂在vue实例上，加载路由、中间件等公共组件--static页面需要引入的外部纯静态资源（会直接复制到dist/static/)--测试项目test--模拟用户行为的e2e测试--unitunittest.babelrcES6语法编译配置，通过它把我们的ES2105代码编译成ES5的.editorconfig编辑器配置，定义代码格式.eslintignore忽略语法检查目录文件配置.eslintrc.jseslint配置文件。gitignore配置Git仓库的忽略项。postcssrc.jspostcss配置index.html项目入口模板文件package.json项目基本信息、运行脚本及相关依赖README.md项目介绍及开发指南项目搭建首先，安装依赖npminstall开发方式。npmrundev服务开启成功后，浏览器打开：http://localhost:8080（默认服务启动在8080端口，如果想启动其他端口，可以修改config/index.js文件端口）生产环境首先需要用npmrunbuild打包。打包完成后，项目下会生成一个dist文件夹。我们只需要将这个文件夹部署到web服务器即可。如果你坚持到这一步，恭喜你，你至少没有放弃。虽然一口气完成了整个项目，但涉及到的技术点还有待探讨。革命还没有成功，同志们还需要努力。
