Vue开发过程中那些易混淆的知识点 vue-cli & webpack

这篇具有很好参考价值的文章主要介绍了Vue开发过程中那些易混淆的知识点 vue-cli & webpack。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue & vue cli

  • Vue CLI = Vue + 一堆的js插件
  • Vue CLI是基于 Node.js 开发出来的工具,它是一个官方发布 vue.js 项目脚手架,可以快速搭建 Vue 开发环境以及对应的 webpack 配置,单独编译,单独部署。可以再集成各种第三方插件,扩展出更多的功能
  • Vue是渐近式框架,你可以用它一个功能,也可以用全家桶。比如你可以在老的jsp或thymeleaf项目里,引入vue.js,只用它核心的数据绑定功能
  • 版本号对应:
    Vue CLI 4.5以下,对应的是Vue2
    Vue CLI 4.5及以上,对应的是Vue3,当然,创建项目的时候可以选择Vue2

vue-cli & webpack

vue-cli是基于nodejs+webpack封装的命令行工具。你可以理解为汇集了各种命令的 bash,或者bat。用vue-cli执行npm run build,实际上是通过webpack做的。原本需要自己配置webpack的相关配置,被cli简化了。并且按照vue的用户习惯整理了一套构建和目录规范。

WebPack核心功能就是项目打包:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
 

webpack & babel

  • babel是js编译工具,能将es6或者一些特殊语法做一些转换
  • webpack 能做的事情比较多,它可以加载很多的loader处理js,css,img,ts,vue等文件,最终输出js文件。

注意:在项目中webpack在进行打包时都会结合babel使用

vue-cli & vite

  • Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链,是目前整个前端使用最多的构建工具,它现在处于维护模式
  • Vite 官方的定位:下一代前端开发与构建工具,是一个轻量级的、速度极快的构建工具

创建vue项目脚手架方式

  • 使用vuecli: vue create projectname
    • vue create 是vue-cli3.x的初始化方式
  • npm init vue@latest
    • 这个方法创建的是最新版vue,创建项目命令后面跟的是项目名称,但是我们需要注意的是,项目名中不能有大写字母。
  • npm init vite huangxiaomi3 -- --template vue
    • 通过vite作为构建项目工具

注意:vue init 是vue-cli2.x的初始化方式

vue & js & html

Vue开发过程中那些易混淆的知识点
vue-cli & webpack
多页面开发模式下的某功能前端页面目录

在前后端分离的多页面开发模式下,我们常常对每个功能页面创建一个main.js入口文件和一个index.html文件以及App.vue单文件入口组件。

  • index.html作用  :作为模板对象
  • main.js作用:实例化vue(以及其他额外初始化的功能,比如国际化),并对App.vue组件进行注册;
  • App.vue组件:功能模块的实现(通常为了复用以及方便维护,注册其他功能组件)

通过npm run build命令将项目打包后,最终会将vue转换为js,我们在后台各个功能模块下的html中引入这些js即可,最终和后台代码一起部署到远程服务器即可。文章来源地址https://www.toymoban.com/news/detail-422282.html

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<!-- 可以單獨重新設置頁面標題 -->
	<title>XXX</title>
	<!-- 可以單獨重新設置頁面描述 -->
	<meta name="description" content="测试管理" />
	<!-- 可以于此處添加其他樣式和腳本  -->
	<script th:inline="javascript">
	//将权限变量挂载到window上,以供vue上使用
	window.permissionHandle = /*[[${field}]]*/ false;
	</script>
    <script defer="defer" type="module" th:src="@{/assets/module-js/js/test.js}"></script>
    <link th:href="@{/assets/module-js/css/test.css}" rel="stylesheet">
    <script defer="defer" th:src="@{/assets/module-js/js/test.js}" nomodule></script>
</head>
<body>
    <!-- 請將自定義的頁面內容放置于此處 -->
    <div id="app">
    </div>
</body>
</html>

到了这里,关于Vue开发过程中那些易混淆的知识点 vue-cli & webpack的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于前端的那些知识点

    2024年04月22日
    浏览(37)
  • 5步带你玩转SpringBoot自定义自动配置那些知识点

    目前SpringBoot框架真的深受广大开发者喜爱,毕竟它最大的特点就是: 快速构建基于Spring的应用程序的框架,而且它提供了各种默认的功能和配置,可以让开发者快速搭建应用程序的基础结构。 但是,当我们需要自定义一些配置时,我们就需要使用自定义自动配置。 今天一定

    2024年02月09日
    浏览(37)
  • Eplan使用过程中的知识点1

    一、新建时的几种标准模板 EPLAN中的符号库符合国际标准,分为单线图和原理图符号库。 符号库符合GB(国标)、IEC(国际标准)、NFPA(美国标准)和GOST(俄罗斯标准)4大标准。对应的4大标准的符号库分别为GB_symbol、IEC_symbol、NFPA_symbol、GOST_symbol。 二、EPLAN的系统主数据包

    2024年02月12日
    浏览(34)
  • [Lua][Love] 打砖块游戏实现过程与知识点

    本文旨在根据LOVE2D官方文档和教程实现打砖块的游戏,记录部分实现过程和重要知识点 目标摧毁所有砖块 玩家控制球拍左右滑动反弹小球 小球摧毁砖块 小球保持在屏幕内 小球碰到屏幕底部,GAME OVER 在加载引擎的时候回调该函数修改引擎基本参数,默认参数可看Config Files

    2024年02月11日
    浏览(39)
  • 【课程复习-01】国科大-随机过程知识点精简版

    孙老师的随机过程课太硬了,期末6道题没一道简单的,就前面3道会一点,博主耗尽毕生所学尽力了,希望老师别挂我。 常见分布的概率密度和分布 0-1分布 二项分布 泊松分布 几何分布 均匀分布 指数分布 概率密度函数: 称X服从参数为θ的指数分布 分布函数: 均值: E (

    2024年01月18日
    浏览(39)
  • [Lua][Love Engine] 打砖块游戏实现过程与知识点

    本文旨在根据LOVE2D官方文档和教程实现打砖块的游戏,记录部分实现过程和重要知识点 目标摧毁所有砖块 玩家控制球拍左右滑动反弹小球 小球摧毁砖块 小球保持在屏幕内 小球碰到屏幕底部,GAME OVER 在加载引擎的时候回调该函数修改引擎基本参数,默认参数可看Config Files

    2024年02月12日
    浏览(33)
  • 微机原理 || 8253接口芯片知识点+4道经典例题+手写解题过程

      【例1】 :  设825 3 端口地址为3 00H~303H, 要求计数器2工作在方式5,二进制计数, CLK2=2MHz , OUT2=1KHz。 试按上述要求完成825 3 的 初始化 。   【例2】: 选择计数器 0 工作于方式 3 ,计数初值为 1234 ,十进制计数方式;计数器 2 工作于方式 2 ,计数初值为 61H ,采用二进制

    2024年02月10日
    浏览(49)
  • 【OpenCV+Tkinter项目】同学,你要的OpenCV图像处理小系统已安排,终于有人把OpenCV那些必备的知识点讲透彻了~(太厉害了,已跪)

    OpenCV – 开源计算机视觉 。它是计算机视觉和图像处理任务中使用最广泛的工具之一。它被 用于各种应用,如面部检测、视频捕捉、跟踪移动物体、对象公开。如今应用在 Covid 中,如 口罩检测、社交距离等等。 今天让我们从零开始学习 OpenCV的入门小知识吧!🙌 粉丝白嫖源

    2024年02月01日
    浏览(34)
  • vue面试知识点

    Unsplash class 和 style 使用动态属性,使用驼峰式写法 v-if 和 v-show v-if 不渲染不满足判断条件的模块, v-show 渲染但不显示,使用场景:是否多次切换或频繁更新条件状态 keep-alive 缓存组件,使用场景:频繁切换,不需要重复渲染 v-for 中添加唯一的 key 为了高效的更新虚拟 DOM,

    2024年02月11日
    浏览(42)
  • vue知识点

    vue是什么 用于构建用户界面的渐进式开源JS框架,是创建单页应用的Web框架 核心特征: 数据驱动mvvm 组件化 指令系统 SPA与MPA SPA 单页应用: 动态重写当前页面数据用以用户交互 MPA: 多页应用,每一个页面都是主页面 SPA首加载慢: 原因:网络延时,资源体积太大 解决办法

    2024年02月11日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包