前言通过@vue/cli搭建交互式项目脚手架。使用@vue/cli+@vue/cli-service-global快速开始零配置原型设计。运行时依赖项（@vue/cli-service）是：可升级；建立在具有合理默认值的webpack之上；可通过项目内配置文件进行配置；可通过插件扩展。丰富的官方插件集合，集成了前端生态系统中最好的工具。用于创建和管理Vue.js项目的全图形用户界面。VueCLI致力于标准化Vue生态系统中的工具基础。它确保各种构建工具可以基于智能默认配置顺利连接，让您可以专注于编写应用程序，而不是花费数天时间为配置问题而苦苦挣扎。同时也为每个工具提供了在不弹出的情况下调整配置的灵活性。快速创建项目安装vue-cli3；注意vue-cli3需要node版本8以上，（推荐8.10.0+）安装命令npminstall–g@vue/cli或cnpminstall–g@vue/cli或yarnglobaladd@vue/cli检测是否安装成功创建项目：vuecreatehello-world第一次创建时要跟最后两个选项，defalut是默认的，包括babel和eslint；Manuallyselectfeatures可以手动选择需要的插件；而demo是作者之前配置好的配置，预留的配置；按上下键选择配置，空格键选择，选择完成后按回车键继续，会查询你选择的插件的配置，vue-为css预处理router选择模式使用的语言，我选择sass；对于选择的代码风格和格式校验代码校验方式，我选择的是保存校验，添加提交时也可以校验；wheretosave配置这些插件的配置，我选择的是是否将独立文件保存为预设，以后可以重复使用；选择好后开始安装插件：查看安装的项目目录安装完成后，cdhello-world，进入文件文件夹，npmrunserve启动项目；也可以使用图形界面通过vueui命令用图形界面创建和管理项目：无重点讲解；看。因为vue-cli3的项目初始化已经帮助开发者解决了80%，甚至大部分情况下的webpack配置。但是在开发过程中，难免会遇到一些需要开发者配置的东西。我们如何配置它？为此，我们需要在项目的根目录下手动新建一个vue.config.js。这是我提供的其中一个项目中的常用模板；给出以下选项的一般解释；constpath=require('path')constwebpack=require('webpack')module.exports={//修改output.pathoutputDir:'dist',//修改output.publishPathbaseUrl:'./',chainWebpack:config=>{//添加全局scss文件consttypes=['vue-modules','vue','normal-modules','normal']types.forEach(type=>{config.module.rule('scss').oneOf(type).use('style-resource').loader('style-resources-loader').options({模式：[path.resolve(__dirname,'src/css/base.scss')]})})//删除预取插件//预加载config.plugins.delete('prefetch')//importconstchunkFolder=process.env.NODE_ENV!=='生产'?'debug':'dist'config.plugin('dll-reference-plugin').use(webpack.DllReferencePlugin).tap(options=>{options[0]={context:__dirname,manifest:require(path.join(__dirname,`./src/common_chunk/${chunkFolder}/manifest.json`))}返回选项})config.plugin('add-asset-html-webpack-plugin').use('add-asset-html-webpack-plugin').tap(options=>{options[0]={filepath:path.resolve(__dirname,`./src/common_chunk/${chunkFolder}/lib_*.js`)}returnoptions})}}baseUrl:从VueCLI3.3开始弃用，请使用publicPathpublicPathType:stringDefault:'/'部署应用包时的基本URL用法与webpack本身的output.publicPath一致，但是VueCLI在其他一些地方也需要这个值，所以请始终使用publicPath，而不是直接修改webpack的output.publicPath。默认情况下，VueCLI会假定您的应用程序部署在域名的根目录下，例如http://shop.ktvsky.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在http://shop.ktvsky.com/vue/，请将publicPath设置为/vue/。也可以使用相对路径'./'，这样打出来的包可以部署到任意路径。打包后的相对路径的绝对路径outputDirType:stringDefault:'dist'运行vue-cli-servicebuild时生成的生成环境构建文件的目录。请注意，目标目录在构建之前已清理（通过--no-clean以在构建时关闭此行为）。chainWebpack我们将在下一篇文章https://segmentfault.com/a/11…中详细介绍chainWebpack的使用；官方文档https://cli.vuejs.org/zh/guid...
