在前面的篇章中，已经说明了 webpack4 的基本使用，那么本章节开始在 webpack4 中构建vue项目，同时对比看看这种构建方式，与在网页script导入 vue.js 中的区别。
在 Vue.js 中，路由是一个重要的部分，它允许我们在不同的组件之间导航。Vue2 和 Vue3 的路由配置有一些不同，本文将详细介绍如何在这两个版本中配置路由，并解释每段代码的作用。
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。
Vite是什么就不用笔者多说了，用过Vue的朋友肯定都知道，本文会通过手写一个非常简单的乞丐版Vite来了解一下Vite的基本实现原理，参考的是Vite最早的版本（vite-1.0.0-rc.5版本，Vue版本为3.0.0-rc.10）实现的，现在已经是3.x的版本了，为什么不直接参考最新的版本呢，因为一上来就看这种比较完善的工具源码比较难看懂，反正笔者不行，所以我们可以先从最早的版本来窥探一下原理，能力强的朋友可以忽略~
我在Stanley Black & Decker的工业4.0团队工作。我们的团队最近为Stanley制造工厂创建了相当于App Store的产品。工厂可以访问市场并根据他们在该位置生产的产品选择他们需要的应用程序。这将构建一个自定义构建，将所有这些应用程序捆绑在一起，以便工厂运行。由于捆绑了如此众多的应用程序，我们的vue生产构建时，导致多个大小过度的警告。
html文件中，通过script src = 'xxx'标签引入js文件。 而vue中，通过import xxx from xxx路径 的方式导入文件，不光可以导入js文件。 “xxx”指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。 “xxx路径”指的是文件的相对路径.
Vue建议捆版bundles不超过244KiB。我们只有14个资源，每个资源都超过这个规模。此外，我们有四个入口点也高于建议的大小。以下是我将构建的大小减半的方法。
注意：不能使用npm下载，需要从 github 上下载现成的包并解压，然后拷贝到项目中使用
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
虽然现在网络环境和电子设备变得越来越好，但是保持应用程序快速加载变得越来越困难。在本系列中，我将深入研究我们在实践中使用的Vue性能优化技术，并且您可以在Vue.js应用程序中使用它们，使应用程序快速加载并顺利执行。我的目标是让这个系列成为关于Vue应用程序性能的全面而完整的指南。
随着项目越来越大，业务需要越来越多，我们项目的目录层级也是非常的多。如果还是通过import分别引入文件，那是非常的不科学的。
Vue.use和Vue.prototype这两种方式引入包。那这两种方式有什么区别，既然困惑，那就本着刨根问底的心态，去了解下这两种方式的不同。
在最基本的层次上，使用Vite进行开发与使用静态文件服务器没有太大区别。但是，Vite对本机ESM导入提供了许多增强功能，以支持通常在基于捆绑程序的设置中常见的各种功能。
推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.
小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.
接下来依次打包了四种类型的产物，方法都是同一个compileModule，这个方法后面会详细分析。
前面的篇章基本已经说明在webpack中如何构建vue框架的时候。除了这些基础框架的要素，为了快速开发app应用。还要借助于更多的开源组件。
之前已经创建了vue项目，并且将基本的配置都配置了，比如路由，跨域都配置好了，现在就开始开发组件了。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
从字面意思就可以看出初始化项目过程中，选第一行的话生成的vue项目就是带编译器的，选第二句的话就是不带编译器的，同时它们都是选择的运行时版本。
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0
尤雨溪说Vite很快，我一开始是不相信的。直到我亲自使用过后，我被Vite的速度震惊到了。
Getting Started | BootstrapVueGet started with BootstrapVue, based on the world’s most popular framework – Bootstrap v4, for building responsive, mobile-first sites using Vue.js
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的
实现步骤： A.生成打包报告，根据报告优化项目 B.第三方库启用CDN C.Element-UI组件按需加载 D.路由懒加载 E.首页内容定制
近些年前端开发快速发展，现在学习前端已经不像以前那样仅仅学习一个语法就可以了，它已经是一门编程技术了，它们有自己独立的类似Main函数的入口，有像MVC一样规范好的层次结构，有自己的开发工具可以发布打包程序，甚至还可以独立连接数据库，当然了，优点与缺点共存，不能向其他语言那样断点调试导致了，它的脉络更难被捕捉，犹如远古时代的代码开发一样，但它还是已经可以称为一门编程技术了，所以学习一门前端开发，已经是一件非常有意义的事儿了。
1. 在 webpack 中配置 .vue 组件页面的解析 运行cnpm i vue -S将 vue 安装为运行依赖； 运行cnpm i vue-loader vue-template-compiler -D将解析转换 vue 的包安装为开发依赖； 运行cnpm i style-loader css-loader -D将解析转换 CSS 的包安装为开发依赖，因为 .vue 文件中会写 CSS 样式； 在webpack.config.js中，添加如下module规则： module: { rules
uniapp 内置了 vuex，不需像 vue 脚手架那样里通过 npm 安装了，我们只需要引用就行了
在 Vue.js 中，插件（Plugins）是一种能为 Vue.js 添加全局功能的工具代码。Vue.js 3 插件没有严格定义的使用范围，但是插件的应用场景主要包括以下几种。
配置文档：https://cn.vitejs.dev/config/，基于ESM；
在 Vue CLI 项目中，路由的配置通常使用 Vue Router 来实现。 以下是在 Vue CLI 项目中配置路由的一般步骤：
Vue脚手架可以快速生成Vue项目基础的架构。 1. 安装3.x版本的Vue脚手架： npm install -g @vue/cli 2. 基于3.x版本的脚手架创建Vue项目： 1. 使用命令创建Vue项目 命令：vue create my-project 选择Manually select features(选择特性以创建项目) 勾选特性可以用空格进行勾选。 是否选用历史模式的路由：n ESLint选择：ESLint + Standard config 何时进行ESLint语法校验：Lint on save babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置) 是否保存为模板：n 使用哪个工具安装包：npm 2. 基于ui界面创建Vue项目 命令：vue ui 在自动打开的创建项目网页中配置项目信息。 3. 基于2.x的旧模板，创建Vue项目 npm install -g @vue/cli-init vue init webpack my-project
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：
官方的说法是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
如果要导入一个没有名称的 export，可以使用 import 语句，但是可以省略导入的变量名。
用于开发调试Vue.js的一个必备插件。可以在Chrome中的扩展程序中直接安装，也可以本地文件的方式安装。
由于公司的前端开始转向 VueJS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。
<script>的type属性缺失或者包含一个javascript内容类型（如，text/javascript）时作为脚本加载；type属性值为“module”时支持模块加载（如果浏览器不支持，会自动向后兼容）。
松哥最近正在录制 TienChin 项目视频～采用 Spring Boot+Vue3 技术栈，里边会涉及到各种好玩的技术，小伙伴们来和松哥一起做一个完成率超 90% 的项目，戳戳戳这里-->TienChin 项目配套视频来啦。 ---- 小伙伴们知道 TienChin 项目前端用的是 Vue3，当我们把 Vue3 官网刷了一遍之后回来看 TienChin 项目的前端，发现还是有很多不太一样的地方，今天松哥就来和大家捋一捋 Vue3 中几个好玩的插件和配置，学完之后，相信大家对 TienChin 项目前端的很
在Vue.js中的延迟加载和代码拆分文章中，我们了解了代码拆分是什么，它如何与Webpack一起工作以及如何在Vue应用程序中使用延迟加载来使用它。
Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文章的补充,本文来总结一下如何搭建基于vue的组件库.
vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个 appname 项目
我们每天写vue3项目的时候都会使用setup语法糖，但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components 选项来显式注册组件？
前端模块化开发模式已成主流，但随着前端项目规模的不断扩大，开发者可能会遇到以下一些问题：
模块化开发使用前端路由也是遵照上一篇文章的步骤，只是形式上有些变化。先利用Vue CLI创建一个Vue3.0的脚手架项目，项目名为myroute,直接选择Default(Vue 3 Preview)([Vue 3] babel,eslint),开始项目创建。项目创建成功后启动VSCode打开项目所在文件夹，接下来按照以下步骤开始前端路由的配置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
