这篇文章介绍了在Vue.js项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Vue及Vue CLI工具、安装webpack模板、安装vue-router、创建Vue项目等步骤。这篇文章为读者提供了清晰的指南，帮助他们快速搭建Vue.js开发环境，为后续的项目开发奠定基础。
这几天整理了一下vue的几种使用方式，对比之后发现有很多相似之处，那么是不是可以混合使用呢？比如这样：
学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Page Application（单页应用程序）。它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。
jQuery的使用非常方便，用 script 引入 js文件即可，然后找到DOM即可开始操作。 而 Vue3 也支持直接用 script 引入的方式，然后使用插值的方式绑定数据，我们来看一下使用方法：
2019年10月5日，vue 团队发布了 Vue3.0 预览版源码，预计到 2020 年第一季度将发布 3.0 正式版。3.0 包涵了许多激动人心的新特性。
注意：属性名必须以VUE_APP_开头，比如VUE_APP_URL VUE_APP_XXX
背景 前段时间做了一个 COVID-19 的疫情数据每日邮箱推送平台(https://ncov.ouorz.com)，本着给自己用的小工具顺便练手的精神，尝试接触了一些新的关于 JavaScript 的技术栈。包括 Vue-Cli、Node.js、MongoDB 等，好不一番爽快的开发体验。顺便一提，这个疫情数据订阅平台我拿着去填写在了 Github Trending 爆火的 wuhan2020 项目(https://github.com/wuhan2020/wuhan2020)举办的「黑客马拉松」报名表里
在之前学习 Vue 基础知识点的文章中，我们还是采用传统的方式，通过在 html 页面上引用 vue.js 这个文件，从而将 Vue 引入到我们的项目开发中。伴随着 Node.js 的出现，以及 React、Angular、Vue 这类的前端 MVVM 框架的发展，前端越来越像后端靠拢，前端工程化的思想开始出现。现在的前端开发，已经不再只是一个 html 页面，上面引用各种 js、css 文件就可以完成开发的了。
之前用 vuecli做了个博客，是一个单页面项目，大概有十个路由 直接 npm run build打包出来，有一个 1M的巨大 js文件
作者：夜行风 链接：https://segmentfault.com/a/1190000019499007
no-clean表示打包时不删除build文件夹（https://cli.vuejs.org/zh/config/#outputdir） 作用就是为了后边的按需打包，下表。
前端模块化开发模式已成主流，但随着前端项目规模的不断扩大，开发者可能会遇到以下一些问题：
chrome63 版本后支持动态import 加载js https://developers.google.com/web/updates/2017/12/nic63#dynamic
基于Vuecli搭建的vue项目简单快捷，易于开发。在node.js的加持下你可以更快的引入万千JavaScript开发库，仅仅依靠前端就可以实现以前使用后端才能实现的功能，如通过axios便可以快捷的与后端进行数据交互等。
webpack ensure 有人称它为异步加载，也有人称为代码切割，他其实就是将 js 模块给独立导出一个.js 文件，然后使用这个模块的时候，再创建一个 script 对象，加入到 document.head 对象中，浏览器会自动帮我们发起请求，去请求这个 js 文件，然后写个回调函数，让请求到的 js 文件做一些业务操作。
1、vue.js：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。 2、vue-router：vue官方推荐使用的路由框架。 3、vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。 4、axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。 5、vux等：一个专为vue设计的移动端UI组件库。 6、创建一个emit.js文件，用于vue事件机制的管理。 7、webpack：模块加载和vue-cli工程打包器。
在上一章中，我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板，就像我们 .NET 程序员在使用 asp.net core 时一样，我们更多的会在框架基础上按照自己的开发习惯进行调整。因此在后面几章的学习中，我将会在整个项目基础上，按照自己的需求进行修改设定。
此时浏览器会访问 http://localhost:8080/ ，看到 Welcome to Your Vue.js App 的界面就算成功了。
在现在的前端开发中，前后分离、模块化、版本控制、文件合并与压缩、mock数据等，是在大前端开发避不开的概念。在开发的时候，以组件的方式分别开发，在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中，这样的模块化方案一直是前端架构师在解决和优化的焦点之一。
npm run build 的原理是利用 Vue CLI 的构建工具，根据项目中配置的各种规则，将源代码转换成可在浏览器中运行的静态文件。 npm run build 主要做了以下几个操作：
在大多数项目中都会遇到在线预览PDF文件，项目使用的是element ui，使用vue-pdf实现。
vue init webpack prjectName 与 vue create projectName 有什么区别呢？
感觉vue3的新特性很舒服，这样才是写软件的感觉嘛。打算用Vue实现自己的一些想法。
在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
参考博客： --- Install Node.js --- Node.js 安装配置
今天我们看看VUE怎么开发单页面应用，VUE提供了脚手架vue-cli，通过这个可以很轻松的创建VUE单页面应用，
步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）
本人也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可以给我留言指正。希望和大家共同进步，共建和谐学习环境。
随着Vue.js越来越热门，被很多开发人员采用，因此其生态也越来越完善，相关的工具和库也很丰富。这主要得益于：Vue的学习曲线，清晰的设计结构和使用文档，让有经验的开发人员从其他框架（React和Angular）很方便的入手。
目前的前端领域，单页面应用（SPA）大行其道。而随着时间的推移以及应用功能的丰富，这些应用变得越来越庞大也越来越难以维护。于是“微前端”这一概念应运而生。
先来看看Vue CLI关于模式和环境变量的说明，我们看到有这么一段话：想要了解解析环境文件规则的细节，请参考 dotenv。我们也使用 dotenv-expand 来实现变量扩展 (Vue CLI 3.5+ 支持)。我们先用Vue Cli来创建一个Vue项目。
使用过vue的程序员一般这样评价它，“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM（Model-View-ViewModel）库，用于渐近式构建用户界面。它以数据驱动和组件化思想构建，采用自底向上增量开发的设计思想。相比Angular.js，Vue.js API更加简洁；相比 React + Redux 复杂的架构，Vue.js 上手更加容易。
vue-loader 是一个用于将 Vue 单文件组件（.vue 文件）转换为 JavaScript 模块的 webpack 加载器（loader）。是 Vue.js 生态系统中的一部分，用于在开发过程中编译和处理 Vue 组件。
vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,分为vue init webpack-simple项目和vue init webpack项目两种.当然首先要安装vue,node等一些必要的环境.
2、 修改build/webpack.base.conf.js文件，通过externals选项加载外部扩展，引入依赖库，不需要webpack处理
element：饿了么出品的Vue2的web UI工具套件 Vux：基于Vue和WeUI的组件库 mint-ui：Vue 2的移动UI元素 iview：基于 Vuejs 的开源 UI 组件库 Keen-UI：轻量级的基本UI组件合集 vue-material：通过Vue Material和Vue 2建立精美的app应用 muse-ui：三端样式一致的响应式 UI 库 vuetify：为移动而生的Vue JS 2组件框架 vonic：快速构建移动端单页应用 eme：优雅的Markdown编辑器 vue-multiselect：Vue.js选择框解决方案 vue-table：简化数据表格 VueCircleMenu：漂亮的vue圆环菜单 vue-chat：vuejs和vuex及webpack的聊天示例 radon-ui：快速开发产品的Vue组件库 vue-waterfall：Vue.js的瀑布布局组件 vue-carbon：基于 vue 开发MD风格的移动端 vue-beauty：由vue和ant design创建的优美UI组件 vue-blu：帮助你轻松创建web应用 vueAdmin：基于vuejs2和element的简单的管理员模板 vue-syntax-highlight：Sublime Text语法高亮 vue-infinite-scroll：VueJS的无限滚动指令 Vue.Draggable：实现拖放和视图模型数组同步 vue-awesome-swiper：vue.js触摸滑动组件 vue-calendar：日期选择插件 bootstrap-vue：应用于Vuejs2的Twitter的Bootstrap 4组件 vue-swipe：VueJS触摸滑块 vue-amap：基于Vue 2和高德地图的地图组件 vue-chartjs：vue中的Chartjs的封装 vue-datepicker：日历和日期选择组件 markcook：好看的markdown编辑器 vue-google-maps：带有双向数据绑定Google地图组件 vue-progressbar：vue轻量级进度条 vue-picture-input：移动友好的图片文件输入组件 vue-infinite-loading：VueJS的无限滚动插件 vue-upload-component：Vuejs文件上传组件 vue-datetime-picker：日期时间选择控件 vue-scroller：Vonic UI的功能性组件 vue2-calendar：支持lunar和日期事件的日期选择器 vue-video-player：VueJS视频及直播播放器 vue-fullcalendar：基于vue.js的全日历组件 rubik：基于Vuejs2的开源 UI 组件库 VueStar：带星星动画的vue点赞按钮 vue-mugen-scroll：无限滚动组件 mint-loadmore：VueJS的双向下拉刷新组件 vue-tables-2：显示数据的bootstrap样式网格 vue-virtual-scroller：带任意数目数据的顺畅的滚动 DataVisualization：数据可视化 vue-quill-editor：基于Quill适用于Vue2的富文本编辑器 Vueditor：所见即所得的编辑器 vue-html5-editor：html5所见即所得编辑器 vue-msgbox：vuejs的消息框 vue-slider：vue 滑动组件 vue-core-image-upload：轻量级的vue上传插件 vue-slide：vue轻量级滑动组件 vue-lazyload-img：移动优化的vue图片懒加载插件 vue-drag-and-drop-list：创建排序列表的Vue指令 vue-progressive-image：Vue的渐进图像加载插件 vuwe：基于微信WeUI所开发的专用于Vue2的组件库 vue-dropzone：用于文件上传的Vue组件 vue-charts：轻松渲染一个图表 vue-swiper：易于使用的滑块组件 vue-images：显示一组图片的lightbox组件 vue-carousel-3d：VueJS的3D轮播组件 vue-region-picker：选择中国的省份市和地区 vue-typer：模拟用户输入选择和删除文本的Vue组件 vue-impression：移动Vuejs2 UI元素 vue-datatable：使用Vuejs创建的DataTableView vue-instant：轻松创建自动提示的自定义搜索控件 vue-dragging：使元素可以拖拽 vue-sli
协作翻译 原文：How to build your first Vue.js component 链接：https://medium.freecodecamp.org/build-your-first-vue-js-component-2dc204bca514 译者：凉凉_ 记得当那天使用 CakePHP 开发的时候，我很喜欢它简易入门的特性。其文档不仅结构严密，详尽，而且对用户友好。多年以后，我在 Vue.js 上找到了同样的感觉。然而，与 Cake 相比，Vue 文档还有一个缺点：（缺乏）真实的项目
我当时学习开发 Chrome 插件的时候，还不会 Vue，更别说 Webpack 了，所以使用的都是原生的 html 开发，效率就不提了，而这次就准备使用 vue-cli 来进行编写一个某 B 站获取视频信息,评论的功能（原本是打算做自动回复的），顺便巩固下 chrome 开发（快一年没碰脚本类相关技术了），顺便写套模板供自己后续编写 Chrome 插件做铺垫。
1 能够说出Vue全家桶的各个组件(Vue-CLI、Vue-Router、Vuex、Axios)的概念、功能和使用场景
在本篇博客中，我们将带您逐步了解Vue.js，从入门到进阶，全面掌握这个现代JavaScript框架的核心概念和高级特性。我们将从Vue.js的基础安装和"Hello World"开始，逐步深入到模板语法、数据绑定、组件化开发、常用指令与事件、路由管理、状态管理、Composition API等高级主题。最后，我们还将分享性能优化的技巧和Vue开发的最佳实践，以及回答一些初学者常见的问题，并为您推荐一些优质的学习资源。让我们一起开始Vue.js的学习之旅吧！
众所周知，Vue目前越来越热门，被很多开发人员采用，因此其生态也越来越完善，相关的工具和库也很丰富。这主要得益于：Vue的学习曲线，清晰的设计结构和使用文档，让有经验的开发人员从其他框架（React和Angular）很方便的入手。今天的这篇文章笔者从这些工具的实用性、有效性、独特性选了这十款工具和库，而不是依据Github受欢迎程度或星级，有些你已经很熟悉了并在使用，有些还比较陌生，好了，让我来一起看下这十款热门的工具和库。
安装webpack-bundle-analyzer这个插件,然后使用npm run build --report输出项目打包情况,直观的比较哪个bundle文件的大小,有针对性的进行模块化拆分
vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的。
SSR大家肯定都不陌生，通过服务端渲染，可以优化SEO抓取，提升首页加载速度等，我在学习SSR的时候，看过很多文章，有些对我有很大的启发作用，有些就只是照搬官网文档。通过几天的学习，我对SSR有了一些了解，也从头开始完整的配置出了SSR的开发环境，所以想通过这篇文章，总结一些经验，同时希望能够对学习SSR的朋友起到一点帮助。
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
前后端分离项目如果做成 SPA（单页面）的形式，就必然面临一个首屏加载的问题，因为默认情况下首页文件比较大，可能超过 1 MB，进而带来首页加载很慢的问题。所以我们要通过优化，来提高首页的加载速度。
一、背景 Vue作者尤雨溪在今年4月提出了一个由Vue3搭载的前端开发工具Vite。Vite主要提供了前端开发服务器的功能以及生产环境打包的功能，而其主要突破则是在前端开发服务器这一方面，提供了一种基于ES Module的快速的本地开发服务器。 二、Vite简介 2.1 什么是Vite 在本文编辑时，Vite版本仍处于1.0.0-rc.9，尚未正式发布，并且Vite目前主要支持Vue3项目，尚不识别Vue2语法。下面是引用尤雨溪在微博上对Vite的介绍。 Vite，一个基于浏览器原生 ES imports
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
