1. 首页
  2. IT资讯

「vue基础」Vue相关构建工具和基础插件简介

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fcab8046874ae4d1594d69558f1755249″ img_width=”1200″ img_height=”680″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E本系列上一篇文章u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714581642574299651u002F?group_id=6714581642574299651″ target=”_blank”u003E「vue基础」新手快速入门篇(一)u003Cu002Fau003E,我们通过引入JS的文件,快速的了解了Vue的基础语法和简单用法,本篇文章笔者将带着大家继续学习,如何使用工程化工具构建Vue项目。u003Cu002Fpu003Eu003Cpu003E像其他框架一样,Vue 的生态也有很多一系列的工具,通过工具,可以快速帮我们构建项目、发布项目、部署打包等,方便我们调试,避免不必要的Bug等。本篇文章我将重点介绍下构建工具和调试用的浏览器插件,这两款工具都有相关的官方工具,因此推荐大家进行使用。u003Cu002Fpu003Eu003Ch1u003E为什么使用构建工具u003Cu002Fh1u003Eu003Cpu003E虽然我们可以通过引入 CDN JS 的方式快速构建项目,这种方式只适合你刚接触 Vue ,方便你快速上手学习Vue而已。但是我们还是需要一款现代化、模块化、高效的工具在实际的项目的开发中帮助提高开发效率。u003Cu002Fpu003Eu003Cpu003E拥有良好的构建工具为我们的开发工作带来了便捷,不仅如此,它确保了过程的可靠性、避免了重复性、减少人为犯错的机会。接下来让我们一起简单的了解下构建工具的核心特点。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E使用 JavaScript 新特性u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E使用新的语法和功能(ES6+),让我们的代码更加简洁,可读性会更好,即使现代浏览器都支持ES2015,但是你的项目很有可能需要兼容低版本的浏览器,比如政府医院的项目,还有相当多的机器使用 windows XP。u003Cu002Fpu003Eu003Cpu003E通过添加 Babel 到我们的构建工具中,就能很轻松的将 ES6+ 这些语法编译成旧浏览器支持 JavaScript 语法。不仅如此,大家应该都比较清楚,ECMAScript 几乎每年都会发布新版本,估计现在都到10了,通过构建工具的引用,我们可以与时俱进的使用更多的新语法特性。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E保证代码质量u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EESLint 是一个可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够辅助你轻松写出高质量的 JavaScript 代码。甚至还有ESLint的官方Vue插件eslint-plugin-vue,它将帮助你生成符合最佳实践的高质量代码。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E组件单文件化u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E引入构建工具的好处就是,你可以在应用程序里使用单文件组件(Vue’s single-file components,简称SFC)。SFC 的好处就是将代码、样式、模板组合在一起进行集中编写。将逻辑和UI放在一起的好处,由于所有相关内容都集中放在一起,便于维护,由于每个组件又是独立的,因此重用性更好。如下段代码所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F2e269956a9554df2afdefef0a9368265″ img_width=”1884″ img_height=”2116″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E工具中的 vue-loader webpack 插件,将标签内的HTML代码编译成JavaScript代码,和组件内的JavaScript代码一起打包到应用程序中。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E压缩版本的JS,体积更小u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E经过构建工具压缩后,编译后的JS文件体积更小,这就意味着用户打开网站的速度会更快,用户的体验就会更好。u003Cu002Fpu003Eu003Ch1u003EVue CLIu003Cu002Fh1u003Eu003Cpu003EVue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E安装 CLIu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E安装 CLI 工具十分简单,但是安装的前提,你需要安装 Node 环境。接下来,我们通过以下命令全局安装 CLI:u003Cu002Fpu003Eu003Cpreu003Enpm install -g @vueu002Fcliu003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E创建一个新项目u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E启动控制终端,然后输入以下命令进行创建:u003Cu002Fpu003Eu003Cpreu003Evue create my-new-projectu003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E此命会在当前目录下,创建一个以项目名称命名的文件夹,然后通过交互输入的形式,进行配置项目选选项。如下图所示,我们选择默认方式:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F3a91efff763d42868ce04572c030dec9″ img_width=”1128″ img_height=”710″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E完成创建后,项目文件的目录结构如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fd05eea722d4c4c62b5290e805198ee83″ img_width=”722″ img_height=”856″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E切换到 package.json 你会看到项目的基础配置,如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F1ba6053514044415a88234d86a2d95ad” img_width=”1948″ img_height=”4060″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E这里有几个命令需要解释下:u003Cu002Fpu003Eu003Culu003Eu003Cliu003Eu003Cstrongu003Enpm run serve:u003Cu002Fstrongu003E 这将启动本地开发服务器进行编译项目,该过程将会监听项目中文件夹所有文件,任何改动都会导致导致重新编译。u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003Enpm run buildu003Cu002Fstrongu003E:主要用于项目打包发布,此命令将编译你的项目,创建优化的生产版本。u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003Enpm run lintu003Cu002Fstrongu003E:检查代码质量是否符合设定的规则。u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E接下来我们运行下 npm run serve 命令,效果如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fc751b7c7afa64a01ae39da7938df0821″ img_width=”1414″ img_height=”1148″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003EWebpack配置u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EVue CLI构建工具是基于webpack之上的,但是抽象了所有配置,以方便我们进行开发和使用。你可以通过运行命令随时查看webpack的配置。命令如下所示:u003Cu002Fpu003Eu003Cpreu003Evue inspectu003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E如果使用手工方式创建项目u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E上述流程是通过默认集成的方式进行创建项目,你也可以选择手工的方式的方式进行创建,如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F532326f0620047d79f36d51921484245″ img_width=”526″ img_height=”369″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E接下来我们来了解下这些插件:u003Cu002Fpu003Eu003Culu003Eu003Cliu003Eu003Cstrongu003EBabel:u003Cu002Fstrongu003E 项目预设默认选择这个方式,这个工具的主要作用就是方便你使用最新的JS语法编写项目,由它进行编译转换成低版本兼容的JS代码。u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003ETypeScript:u003Cu002Fstrongu003E 如果你使用 TypeScript 编写项目,你一定要选择这个,这样你的代码才能被编译器识别转换。u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003E渐进式Web应用程序(PWA)支持:u003Cu002Fstrongu003E 这个主要是为了方便你创建PWA应用,该插件默认提供 PWA 所需要的比如脱机、自定义相关的配置模板。u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003ERouter:u003Cu002Fstrongu003E 我们大部分项目都有多个页面,这时候,我们就需要用上这个路由插件。u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003EVuex:u003Cu002Fstrongu003E 类似 React 中的 Redux,官方提供的一个插件,方便我们集中管理复杂的 state 数据u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003ECSS Pre-processors:u003Cu002Fstrongu003E 如果你使用 SCSSu002FSass, LESS 编写CSS,建议你选择这个插件。u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003ELinter u002F Formatter:u003Cu002Fstrongu003E 通过此选项,你可以自行安装ESLint或者使用Airbnb配置,Standard配置或Prettier代码格这些选项。u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003E单元测试:u003Cu002Fstrongu003E 选择单元测试将为你提供安装Mocha、Chai或Jest作为测试工具的选项。u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003E端到端测试:u003Cu002Fstrongu003E 与单元测试类似,将会为你提供Cypress、Nightwatch 的安装选项。u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E如果你在创建项目时,错过了这些选项,你完全不用担心,你可以通过手工命令的形式自行安装,比如我们要安装 typescript 插件,命令如下:u003Cu002Fpu003Eu003Cpreu003Evue add @vueu002Fcli-plugin-typescriptu003Cbru003E# oru003Cbru003Evue add @vueu002Ftypescriptu003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E浏览器开发工具u003Cu002Fh1u003Eu003Cpu003EVue的浏览器工具集成在谷歌开发者工具上,方便你查看正在运行中Vue应用程序,你可以点击https:u002Fu002Fgithub.comu002Fvuejsu002Fvue-devtools#installation 这个官方地址去下载安装vue-devtools,安装成功后,运行你的Vue站点,打开浏览器开发者工具,你就会看到一个Vue的选项卡,点击进行切换,你就会看到如下图所示的内容:u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EComponents Tabu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F05249ad4cd594c049192c03109bced93″ img_width=”735″ img_height=”507″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E组件选项卡,将对于页面组件的结构进行了树形化,更加直观的展示了当前组件包含了哪些组件,组件里包含了哪些内容,比如props,data 等。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EVuex Tabu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F82975f39806845689f79e65ef758692e” img_width=”743″ img_height=”515″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E更加直观的展示了当前全局数据的存储状态,及相关 mutations 、getters 等内容。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EEvents Tabu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F6a3c64ef3ee646098935d0de06069305″ img_width=”743″ img_height=”515″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E你可以通过事件选项卡,定位事件来源于那个组件,点击对应的事件,你能看到和事件更多相关的信息。u003Cu002Fpu003Eu003Ch1u003E安装 VSCode 插件u003Cu002Fh1u003Eu003Cpu003E大部分前端开发者想必都喜欢用微软的 VSCode 开发工具,目前针对Vue来说,使用最广泛的要数 Vetur VSCode扩展插件,安装也十分简单:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E启动VSCode,并选择扩展选项卡菜单u003Cu002Fliu003Eu003Cliu003E在搜索栏搜索“vetur”u003Cu002Fliu003Eu003Cliu003E从结果中选择由Pine Wu 开发的 Vetur 插件,点击安装即可。如下图所示。u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F741863ecadf64c739a1d46d2bc168f87″ img_width=”1526″ img_height=”482″ alt=”「vue基础」Vue相关构建工具和基础插件简介” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E小节u003Cu002Fh1u003Eu003Cpu003E今天的内容就和大家聊到这里,我们一起学习了为什么要使用构建工具,如何来安装构建工具以及相关的浏览器、编辑器插件,下一篇文章我将和大家聊聊如何编写自定义组件。u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「vue基础」Vue相关构建工具和基础插件简介

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10694.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code