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单文件入口组件。文章来源:https://www.toymoban.com/news/detail-422282.html
- 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模板网!