当前位置: 首页 > Web前端 > vue.js

vue-cli3知识点

时间:2023-03-31 19:49:55 vue.js

vue-cli介绍通过@vue/cli搭建交互式项目脚手架通过@vue/cli+@vue/cli-service-global快速启动零配置原型开发运行时依赖(@vue/cli-service)丰富的官方插件合集,集成了前端生态中最好的工具一套完整的用于创建和管理Vue.js项目的图形用户界面CLICLI(@vue/cli):一个全局安装的npm包(提供vue命令)vuecreate:为新项目快速创建脚手架vueserve:构建新想法的原型vueui:通过一组图形界面管理我们所有的项目CLI服务(@vue/cli-service):一个开发环境依赖(包括)用于加载其他CLI插件的核心服务在每个@vue/cli创建的项目中本地安装(包括)优化的n内部webpack配置基于webpack和webpack-dev-server(包括)vue-cli-service命令:提供服务逗号nd、build命令和inspect命令CLI插件:为Vue项目提供可选功能的npm包内置插件:@vue/cli-plugin-community插件:vue-cli-plugin-当vue-执行cli-service命令,package.json中列出的所有CLI插件将被自动解析和加载。先安装node,版本要求8.9以上。安装命令://本地安装npmi@vue/cliyarnadd@vue/cli//全局安装npmi-g@vue/cliyarnadd-g@vue/cli检查是否安装成功:vue--versionBasic构建快速项目构建命令vueserve和vuebuild(必须在@vue/cli-service-global全局依赖的前提下安装)npminstall-g@vue/cli-service-globalvueservecommandoptionsUsage:serve[options][entry]以开发环境模式为.js或.vue文件零配置启动服务器Options:-o,--open打开浏览器-c,--copy复制本地URL到剪贴板-h,--help输出用法informationvuebuildcommandoptionsUsage:serve[options][entry]在开发环境模式下以零配置启动.js或.vue文件的服务器Options:-t,--target//buildtarget(app|lib|wc|wc-async,defaultvalue:app)-n,--name//库的名称或WebComponents组件的名称(默认值:entryfilename)-d,--dest

//输出目录(默认:dist)-h,--help//输出使用信息快速创建项目命令vuecreatepluginandpreset插件注册和声明PresetAVueCLI预设是一个VueCLI预设,它包含创建一个新项目所需的预定义选项和插件的JSON对象,因此用户不需要在命令提示符中选择它们CLI服务vue-cli-service服务启动开发服务器开箱即用的模块热加载(开发服务器可以通过devServer配置)Usage:vue-cli-serviceserve[options][entry]Options:--openopenbrowseronserverstartup--copy复制URL到服务器启动时的剪贴板--mode指定环境模式(默认:development)--host指定主机(默认:0.0.0.0)--port指定端口(默认:8080)--https使用https(默认:false)vue-cli-servicebuild,在输出目录生成环境包,自动压缩代码,vendorchunksplitting,inlinechunkmanifestusageinHTML:vue-cli-servicebuild[options][entry|pattern]option:--mode指定环境模式(默认:production)--dest指定输出目录(默认:dist)--modernbuildappformodernbrowserswithautomaticfallback--targetapp|库|厕所|wc-async(default:app)--namelibraryornameinWebComponentsmode(default:"name"fieldinpackage.jsonorentryfilename)--no-clean在构建项目之前不清理目标目录--report生成report.html帮助分析包内容--report-json生成report.json帮助分析包内容--watch监控文件变化vue-cli-serviceinspect,查看vue-cli项目的webpack配置使用:vue-cli-serviceinspect[options][...paths]option:--mode//指定环境模式,默认值:development查看所有可用命令npxvue-cli-servicehelp缓存和并行处理cache-loader:默认启用Vue/Babel/TypeScript编译,文件缓存在node_modules/.cache中。开发浏览器兼容HTML和静态资源css相关webpack相关环境变量和patterns构建目标部署