Vue CLI

2020年的年终岁尾，我们一起解读一下整个2020年的前端技术的8个技术， 并深度分析 2021年大前端领域又有哪些顶级技术趋势，你不容错过。 2020年注定是不平凡的一年，相信因为疫情很多程序员的工作和生活都受到了一定影响，其实现在前端的技术已经到了深水区，工程师主要分为前面架构师和前端图形学工程师，那么2021年整个前端技术又有哪些新的趋势？ 01 第一个就是 TypeScript，TypeScript 整个呈现出爆发性的增长，在NPM它的下载量达到了四； 02 第二个就是 React 下载量达到了第一，但是Vue的star增长最多。很多人经常问我到底是深入React 还是深入Vue ，我建议你深入React，别问我为什么，你懂的～ 03 第三个就是 WebAssembly 已经逐渐崭露头角，其实我们浏览器这样的桌面应用化的趋势会越来越明显，在前端去增强web应用，WebAssembly 在整个下一年会有更加强劲的趋势 04 第四个就是no-code、low-code、pro-code在今年随着产业互联网的提出，整个行业进入了to b的转型期，未来的低代码会越来越受到大厂的重视，那么这个时候大家一定要去努力奔大厂。 05 第五个就是我们的Devops到NoOps的转换路径之一。变成目前大家都在尝试Serverless，所以在你的简历里如果没有Serverless，一定要尽量尝试

在上篇文章 《2021新年 Vue3.0 + Element UI 尝鲜小记》 里，我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目，而 Vue CLI 实际上为我们生成了一个我们熟悉的 Webpack 工程项目。 Webpack 无需过多介绍，一个十分强大的打包工具。但 Webpack 也有不足的地方，比如第一次打包需要很长时间，修改代码之后的热更新速度较慢。 随着 Vue 3 一起推出的还有一个强大的新一代打包工具 Vite, 一个面向现代浏览器，基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具，恰恰就解决了上述 Webpack 的痛点。Vite 主要的优势有三点： 快速冷启动服务器 即时热模块更换（HMR） 真正的按需编译 听上去就很不错，立刻上手尝试一下。 初始化 Vite 项目 使用 npm init @vitejs/app my-vue-app --template vue 命令快速生成一个使用 Vite 构建的 Vue 3 项目模版。 运行 npm run dev 即可把项目跑起来，进入开发模式。项目冷启动速度非常快，不到 1 秒钟，浏览器里就已经出现项目预览了。项目冷启动只用了 382ms ，真香。 引入 Element Plus UI 组件库 开发项目，首先要挑选一个 UI 组件库。目前市面上支持 Vue

前戏 在之前我们使用webpack进行打包的时候，webpack.config.js配置都是我们自己手写的。而Vue-CLI是官方提供的，用来搭建项目脚手架的工具，它是vue.js开发的标准工具，它已经集成了webpack，内置好了很多常用配置，使得我们在使用vue开发项目时更加的标准化。 官方文档：https://cli.vuejs.org/zh/ 安装 Vue-CLI需要node.js 8.9以上的版本 全局安装 Vue-CLI npm install -g @vue/cli 安装成功后，在命令行可以使用 vue 命令，比如查看当前安装的版本： vue -- version # 或者 大写V vue -V 如果执行上面后，命令行提示 'vue' 不是内部或外部命令 解决方法：配置环境变量 1. 查看全局安装目录 nmp root -g 2. 在 我的电脑 进入全局安装目录下，找到 vue.cmd 3. 右键计算机，属性—》高级系统设置—》环境变量，将 vue.cmd 所在的路径加入环境变量，点击“确定” 使用Vue-CLI创建项目 运行 vue create 命令来创建一个新项目，在哪个目录下执行就会生成在哪个目录下 vue create 项目名称 执行后会让你选择，第一个是默认项目，第二个是自定义项目 创建默认项目 会提示选择默认（ default ）还是手动（

Vue3 正式发布已经有一段时间了，前段时间写了一篇文章（ 《Vue 模板编译原理》 ）分析 Vue 的模板编译原理。今天的文章打算学习下 Vue3 下的模板编译与 Vue2 下的差异，以及 VDOM 下 Diff 算法的优化。 编译入口 了解过 Vue3 的同学肯定知道 Vue3 引入了新的组合 Api，在组件 mount 阶段会调用 setup 方法，之后会判断 render 方法是否存在，如果不存在会调用 compile 方法将 template 转化为 render 。 // packages/runtime-core/src/renderer.ts const mountComponent = ( initialVNode, container ) => { const instance = ( initialVNode.component = createComponentInstance( // ...params ) ) // 调用 setup setupComponent(instance) } // packages/runtime-core/src/component.ts let compile export function registerRuntimeCompiler ( _compile ) { compile = _compile } export

前言 vue-cli 都到 3.0.3 了，所以是时候玩转一下 vue-cli 3 的新特性了。 1. vue-cli 3.0.3 以下的安装都是在 macOS 的环境下进行的，当然在 windows 和 linus 下也同理。 1.1 安装 vue cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 可以使用下列任一命令安装这个新 vue-cli 3.0.3 的包： npm install -g @vue/cli # OR yarn global add @vue/cli 你还可以用这个命令来检查其版本是否正确 (3.x)： vue --version 或者： vue -V 1.2使用图形化界面 你也可以通过 vue ui 命令以图形化界面创建和管理项目： vue ui 上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。 1.3 创建项目 1.3.1 默认型 新建文件夹，在该文件夹下打开命令窗口，输入以下命令进行新建项目，当然我起的项目名字叫 vue-webpack-demo vue create vue-webpack-demo 会让你选择默认

解决vue-cli3不停请求 /sockjs-node/info?t= 问题 参考文章： （1）解决vue-cli3不停请求 /sockjs-node/info?t= 问题 （2）https://www.cnblogs.com/dxy9527/p/11647701.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/3797416/blog/4874012

vue-cli3 + element 图片上传，图片上传前验证格式，自定义上传; el-upload组件 <el-upload class="upload-demo" action="/uploadImg" :file-list="bankImgList" list-type="picture" :http-request="uploadAccountBank" :before-upload="beforeUpload"> <el-button type="primary">点击上传</el-button> </el-upload> 验证图片格式 // 上传图片前的验证只能是jpg格式的图片 beforeUpload(file) { const isJpg = file.type === 'image/jpeg' ? true : file.type === 'image/jpg' ? true : false; if (!isJpg) { this.$message.error('请选择jpg或jpeg格式的文件!'); } return isJpg; }, 上传 async function uploadImage(a) { // 图片是否上传成功 let uploadSuccess = false; // 图片id let id = 0; let fromData = new

在 vue.config.js里面配置 devServer: { proxy: { '/': { // search为转发路径 target: 'http://www.baidu.com', // 目标地址 ws: true, // 是否代理websockets changeOrigin: true // 设置同源 默认false，是否需要改变原始主机头为目标URL, } } }, x 10 9 1 devServer : { 2 proxy : { 3 '/' : { // search为转发路径 4 target : 'http://www.baidu.com' , // 目标地址 5 ws : true , // 是否代理websockets 6 changeOrigin : true // 设置同源 默认false，是否需要改变原始主机头为目标URL, 7 } 8 } 9 }, 来自为知笔记(Wiz) 来源： oschina 链接： https://my.oschina.net/u/4363260/blog/3378618

vue-cli3以上框架解决跨域问题 参考文章： （1）vue-cli3以上框架解决跨域问题 （2）https://www.cnblogs.com/jiangshiguo/p/12122120.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4438370/blog/4882455

前后端分离作为Web开发的一种方式，现在应用越来越广泛。前端一般比较流行Vue.js框架，后端框架比较多，网上有很多Vue+SpringMVC前后端分离的demo，但是Vue+JFinal框架貌似没有搜到，本文基于Vue.js和JFinal框架，给出了搭建了一个前后端分离项目的简单例子。 第一步：maven搭建后端JFinal部分 1、用maven新建web项目，项目名vue-jfinal 2、添加JFinal框架和jetty容器等依赖 < dependency > < groupId > javax.servlet </ groupId > < artifactId > javax.servlet-api </ artifactId > < version > 4.0.1 </ version > < scope > provided </ scope > </ dependency > < dependency > < groupId > com.jfinal </ groupId > < artifactId > jfinal </ artifactId > < version > 3.3 </ version > </ dependency > < dependency > < groupId > com.jfinal </ groupId > < artifactId >