Vue开发过程中那些易混淆的知识点
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>