Vue开发过程中那些易混淆的知识点

最新推荐文章于 2024-05-28 12:55:22 发布

奉先节度使

最新推荐文章于 2024-05-28 12:55:22 发布

阅读量515

点赞数

分类专栏： # Vue 前端文章标签： vue 前端框架

本文链接：https://blog.csdn.net/qq_34020761/article/details/130284720

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

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

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

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

通过npm run build命令将项目打包后,最终会将vue转换为js,我们在后台各个功能模块下的html中引入这些js即可，最终和后台代码一起部署到远程服务器即可。

<!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>