vue & vue cli
- Vue CLI = Vue + 一堆的js插件
- Vue CLI是基于 Node.js 開發(fā)出來的工具，它是一個官方發(fā)布 vue.js 項目腳手架，可以快速搭建 Vue 開發(fā)環(huán)境以及對應(yīng)的 webpack 配置，單獨編譯，單獨部署?？梢栽偌筛鞣N第三方插件，擴展出更多的功能
- Vue是漸近式框架，你可以用它一個功能，也可以用全家桶。比如你可以在老的jsp或thymeleaf項目里，引入vue.js，只用它核心的數(shù)據(jù)綁定功能
- 版本號對應(yīng)：
Vue CLI 4.5以下，對應(yīng)的是Vue2
Vue CLI 4.5及以上，對應(yīng)的是Vue3，當然，創(chuàng)建項目的時候可以選擇Vue2
vue-cli & webpack
vue-cli是基于nodejs+webpack封裝的命令行工具。你可以理解為匯集了各種命令的 bash，或者bat。用vue-cli執(zhí)行npm run build，實際上是通過webpack做的。原本需要自己配置webpack的相關(guān)配置，被cli簡化了。并且按照vue的用戶習(xí)慣整理了一套構(gòu)建和目錄規(guī)范。
WebPack核心功能就是項目打包：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
?
webpack & babel
- babel是js編譯工具，能將es6或者一些特殊語法做一些轉(zhuǎn)換
- webpack 能做的事情比較多，它可以加載很多的loader處理js，css，img，ts，vue等文件，最終輸出js文件。
注意：在項目中webpack在進行打包時都會結(jié)合babel使用
vue-cli & vite
- Vue CLI 是官方提供的基于 Webpack 的 Vue 工具鏈，是目前整個前端使用最多的構(gòu)建工具,它現(xiàn)在處于維護模式
- Vite 官方的定位：下一代前端開發(fā)與構(gòu)建工具，是一個輕量級的、速度極快的構(gòu)建工具
創(chuàng)建vue項目腳手架方式
- 使用vuecli： vue create projectname
- vue create 是vue-cli3.x的初始化方式
- npm init vue@latest
- 這個方法創(chuàng)建的是最新版vue,創(chuàng)建項目命令后面跟的是項目名稱,但是我們需要注意的是,項目名中不能有大寫字母。
- npm init vite huangxiaomi3 -- --template vue
- 通過vite作為構(gòu)建項目工具
注意：vue init 是vue-cli2.x的初始化方式
vue & js & html
在前后端分離的多頁面開發(fā)模式下，我們常常對每個功能頁面創(chuàng)建一個main.js入口文件和一個index.html文件以及App.vue單文件入口組件。文章來源：http://www.zghlxwxcb.cn/news/detail-422282.html
- index.html作用? ：作為模板對象
- main.js作用：實例化vue(以及其他額外初始化的功能，比如國際化)，并對App.vue組件進行注冊；
- App.vue組件：功能模塊的實現(xiàn)(通常為了復(fù)用以及方便維護,注冊其他功能組件)
通過npm run build命令將項目打包后,最終會將vue轉(zhuǎn)換為js,我們在后臺各個功能模塊下的html中引入這些js即可，最終和后臺代碼一起部署到遠程服務(wù)器即可。文章來源地址http://www.zghlxwxcb.cn/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>
<!-- 可以單獨重新設(shè)置頁面標題 -->
<title>XXX</title>
<!-- 可以單獨重新設(shè)置頁面描述 -->
<meta name="description" content="測試管理" />
<!-- 可以于此處添加其他樣式和腳本 -->
<script th:inline="javascript">
//將權(quán)限變量掛載到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>
<!-- 請將自定義的頁面內(nèi)容放置于此處 -->
<div id="app">
</div>
</body>
</html>到了這里，關(guān)于Vue開發(fā)過程中那些易混淆的知識點 vue-cli & webpack的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
