Vue CLI

前段时间写了一篇 详解 webpack4 中易混淆知识点 的文章，没想到收获了近 600 个赞，在这里对各位老铁抱拳感谢。上篇文章我费了很多时间去构思 demo 和原创作图，就是想把一些概念彻底讲清楚，看评论区的反响我感觉还是做到了自己设定的目标。 如果大家看过一些 webpack4 优化的文章，一定会出现 dll 动态链接库。它以配置之复杂让众多初学者记忆犹新。今天我会以一个学习者的角度去一步一步探讨 webpack dll 的配置，最后得出一个完美的解决方案。 本文的内容和大部分讲解 webpack4 优化文章的观点不一样 ，如果有不同的见解，欢迎在评论区和我讨论。 友情提示：本文章不是入门教程，不会费大量笔墨去描写 webpack 的基础配置，请读者配合教程[源代码](https://github.com/skychx/webpack_learn/tree/master/optimization)食用。 1. 基础概念：dll 其实就是缓存 说实话我刚看见这个 dll 动态链接库 的时候，我真被镇住了：这是什么玩意？怎么根本没听说过？ 好学的我赶紧 Google 一下，在 维基百科 里找到了标准定义： 所谓动态链接，就是把一些经常会共享的代码制作成 DLL 档，当可执行文件调用到 DLL 档内的函数时，Windows 操作系统才会把 DLL 档加载存储器内，DLL

1、vuecli3.x or 4.x中：vue.config.js添加如下代码： dayjs是引入的时间插件，time即为当前项目打包的时间。 const Webpack = require("webpack"); const time = require("dayjs")().format("YYYY-M-D HH:mm:ss"); 2、在chainwebpack中配置插件： 第二个参数用的是Unicode编码，这里用FeHelper小工具做一个转义，再将 \u005c\u006e 替换成 \n chainWebpack: config => { // 给打包的文件添加版权注释 config .plugin("banner") .use(Webpack.BannerPlugin, [ `\u0020\u57fa\u4e8e\u0064\u0032\u0061\u0064\u006d\u0069\u006e\u6784\u5efa\u0020 \n \u0063\u006f\u0070\u0079\u0072\u0069\u0067\u0068\u0074\u003a\u0020\u0064\u006f\u006e\u0067\u0077\u0065\u006e\u006a\u0069\u0065\u0020\u0064\u006f\u006e\u0067\u0077\u0065

公司在项目重构时，遇到图标问题，然后把vue-awesome、iconfont、iconMoon都试了一遍，虽然最终使用了iconMoon但是也要把这两个过程记录一下。 github地址 1.首先安装vue-awesome依赖包 安装方法： 使用npm安装 npm install vue-awesome 使用bower安装 bower install vue-awesome 注意：安装之后打开node_modules文件夹，查看是否有vue-awesome文件夹，如果没有看是否是编辑器太慢的原因，也可以重启一下看是否有该文件 如果还没有表示没有安装成功，需要重新安装 2.在main.js文件下 在github上可以明确看到如果考虑项目大小，只导入用于减少包大小的图标 import 'vue-awesome/icons/flag' 否则 import 'vue-awesome/icons' 这里我不考虑大小使用第二种 然后 import Icon from 'vue-awesome/components/Icon' 全局使用 Vue.component( 'icon',Icon) 这里是我的代码提供参考 接下来就可以去在任何.vue组件中使用了！ 这里我在最新刚刚下载好的vue-cli项目中试用一下，看一下效果 <icon name="beer"></icon> 就会看到

vue环境配置简洁教程 https://blog.csdn.net/qq_36986067/article/details/107804670 1.安装node.js 在官网下下载对应的node.js版本，推荐下载mis(环境变量会自动配置），我这里下载的是 node-v12.18.3-x64.msi 中文网 http://nodejs.cn/ 下载完打开安装，可以更改安装目录（推荐不要安装在系统盘，我这里安装在 D:\nodejs ），一直点击下一步 安装完成，在命令行界面输入node -v 和 npm - v node.js安装成功 2.目录设置 在node.js安装目录下新建node_global和node_cache文件夹 命令行输入 npm config set prefix "D:\nodejs\node_global" 以及 npm config set cache "D:\nodejs\node_cache" 设置成功后用命令npm install XXX-g安装以后模块就在D:\nodejs\node_global\node_modules目录下 设置镜像网站 npm config set registry=http://registry.npm.taobao.org 输入以下命令可查看设置 npm config list 3.设置环境变量 path中添加D:

前段时间写了一篇 前端vue项目实现mock数据方式 的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供mock数据的方法。 初始化vue项目 这里以vue项目为主，当然别的类型项目依然可以使用这种mock数据的方式。 vue create vue-koa2-demo 复制代码 前提是安装了vue-cli的脚手架，我电脑安装的是vue-cli3的版本。按照要求一步一步选择后，记得选择安装vuex，后续要使用，启动项目。 koa2项目初始化 前端项目弄好之后，开始安装koa mkdir koa-demo cd koa-demo npm koa koa-router koa-cors 复制代码 安装工作完成后，在项目根目录下新建一个server.js. let Koa=require( 'koa' ) let Router=require( 'koa-router' ) let cors=require( 'koa-cors' ) let fs=require( 'fs' ) const app=new Koa() const router=new Router() router.get( '/getData' ,async ctx=>{ // 允许cors跨域请求

1、数据驱动（基于操作 dom 的方式） （1）、Dom 是数据的一种自然映射（双向数据绑定）手动改变 DOM 非常麻烦使用vue.js之后，只需要改变数据，通过改变 Directives 指令,当数据发生变化，会通过数据指令去修改对应的 DOM （2）、Vue.js 还会对事件进行一定的监听，当我们改变视图（view）的时候通过 DOM Listeners 来改变数据 通过以上两点就实现了数据的双向绑定 2、组件化 Vue-cli:(它是 vue 的脚手架工具) 作用：帮助我们完成基础的代码（包括：目录结构、本地调试、代码部署、热加载、单元测 试） 页面上每一个独立的可视/可交互区域视为一个组件 每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护 展示面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。 来源： oschina 链接： https://my.oschina.net/u/4320183/blog/4306991

转载： https://blog.csdn.net/u010341392/article/details/90209946 问题描述 vue cli 3.0环境下开发调试过程中发现部分vue的源码找不到，调试窗口中同名字的vue文件最多只能出现一个，而且文件的位置也不对应相应的文件夹，直接在webpack://根目录下罗列出来 问题分析 因为是用的vue cli 3.0版本，与2.x的配置文件改变了很多，所以老版本的配置不能复制过来使用。 网上查找了很多资料，都是提的配置productionSourceMap为true，如下，然而我的工程里一开始就已经将该项配置为true，结果还是如上所述， module.exports = { productionSourceMap: true, } 1 2 3 也在官网上看了vue cli 3.0版本详细配置说明，也是描述productionSourceMap为开发环境源码配置项，然结果显然说明不是的 于是各种查找，各种尝试，各种研究，最终总算是成功了，配置如下： const debug = process.env.NODE_ENV !== 'production' module.exports = { ……//自己的其他配置 configureWebpack: config => { if (debug) { // 开发环境配置 config

前言 本次的一个布局技术都写的非常详细了，只要按着来就行，不过，先说明本次主题为二次元主题。 如果真的喜欢本主题的不妨可以试一试（建议跟据目录来看） 在很久很久以前。。。。 嘛，就在前不久我正在。。 额，上图仅仅表示我的 无敌 无聊，本人不抽烟。 嗯嗯，在我闲来无事的过程中我找到了一个我特别喜欢的个人博客网站； 然后：（放图~哦哦） 大佬”蝉时雨“，自己写的主题： 1、所用前端技术：vue 2、博客文章存储技术：Github issuses（就是原项目的讨论部分，分类，心情也是使用的，待会细讲） 3、博客评论技术：Gittalk (嗯，就是github提供的开发者设置里面有) 4、博客热度技术：LeanCloud (因为没有后端数据库方面，所以使用第三方存储) 传送门： 蝉时雨的网站 传送门： 蝉时雨的github 嘛，待会就以这几个部分讲解 技术简单过 先说好其实并不难，真的不难，按着来就行！！！ 思维图如下： 脑图版： 本次的仓库： 本次的要改动代码： 本次环境： 在食用 Aurora 主题之前，需先安装 Nodejs 和 Git 环境，这两步不必细说。环境安装完毕，由于 Aurora 使用 vue 开发，所以需要安装 vue-cli。 欧克，Let`go Github Pages 的部署（个人网址的托管） 1、创建自己github的Pages（并把项目拉下来自己测试跑） ①

mac 使用yarn brew install yarn 安装全局vue-cli全家桶： yarn global add @vue/cli 验证: node -v npm -v 打开界面 vue ui 本文由博客一文多发平台 OpenWrite 发布！ 来源： oschina 链接： https://my.oschina.net/u/4295105/blog/4330705

错误信息： FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1: 00F9150E 2: 015EAE42 3: 015E1BE1 4: 015E12DE 5: 015E9376 6: 01422862 7: 01423A69 npm ERR! code ELIFECYCLE npm ERR! errno 134 修改package.json "serve": "npx --max-old-space-size=2048 vue-cli-service serve", 重新启动，问题消失。 来源： oschina 链接： https://my.oschina.net/xiehou/blog/4307001