Vue CLI

利用 vue-cli 搭建的项目大都是单页面应用项目，对于简单的项目，单页面就能满足要求。但对于有多个子项目的应用，如果创建多个单页面，显示有点重复，特别是 node_modules 会有多份相同的。如果全部放到单页面项目下，又显得有点乱，这时候通过改造 vue-cli 搭建的项目为多页面，就是一个比较好的解决方法。 如何改造单页面 vue.js 项目为多页面项目？下面是这次改造的具体过程。 一、创建单页面 vue.js 项目 这里直接使用官方提供的脚手架 vue-cli3 创建，具体的过程请参考 「 vue-cli3.0 升级记录 」 二、多页面配置 1、添加配置文件 在项目根路径下( 与 package.json 同目录 )添加 vue.config.js，内容如下： 1 module.exports = { 2 pages: { 3 index: { 4 // 入口js的路径 5 entry: './src/main' , 6 // 页面模板路径 7 template: './src/public/index.html' 8 } 9 } 10 } 上面的配置其实就是 vue-cli 建立项目的默认配置，如果增加页面，在 pages 节点下添加配置即可。但这种方式，每次增加一个新页面，就需要手动添加节点，这种重复的事情显然不智能。下面继续改造。 2、调整项目结构 要自动化

最开始是在Vue2.X版本中尝试使用Less全 局变量的，但是不知道因为什么原因一直报错，错误信息大概是未安装css-loader一类的错误，但天地良心我装了！！ 后面发现Vue3.0版本中配置要简单一些，于是就提前升级了Vue-cli3.0，大概是3.11的版本（原本想等2.x常用的东西都学的差不多了再说） 关于升级到Vue-cli3.0的相关知识请看这里： 使用Vue-cli 3.0搭建Vue项目 WHU_凌晨_Bin （我主要用的是less，这篇就只写怎么使用less全局变量，预处理器也记得选less） 执行 vue add style-resources-loader ，关于为什么是add好像是因为3.0默认的包管理器是yarn 选择less 在根目录下新建vue.config.js const path = require("path" ); module.exports = { pluginOptions: { "style-resources-loader" : { preProcessor: "less" , patterns: [path.resolve(__dirname, "./src/styles/test.less" )] } }, lintOnSave: true , devServer: { overlay: { warnings: true ,

10月16日，官方发布消息称Vue-cli 4.0正式版发布,并且强烈建议升级;小编也是刚刚安装了最新版本的脚手架看看更新了什么 安装和vue-cli3.0的是一模一样的，对比了一下3.0的脚手架，除了目录发生变化一些，其他的都一样 安装步骤和vue-cli3.0的一模一样 1.创建项目 vue create project-name default 是 使用默认配置 Manually select features 是 自定义配置 2.选择配置（自定义配置） 3.选择css预编译，这里我选择SCSS 4. 语法检测工具，这里我选择ESLint + Prettier 5.选择语法检查方式，这里我选择保存就检测 6.接下来会问你把babel,postcss,eslint这些配置文件放哪，这里随便选， 7.键入N不记录，如果键入Y需要输入保存名字 8.项目创建好后 cd project-name // 进入项目根目录 npm run serve // 运行项目 9.然后在浏览器输入http://localhost:8080,就可以看到运行的界面了 来源： oschina 链接： https://my.oschina.net/u/4355290/blog/3291956

众所周知，前端开发中“数据模拟”是很重要的，今天探讨一下关于Vue加载本地json报404错误的解决方案！ Vue-cli3.x中删除了static、 vue.config.js 等，个人感觉cli2.x和cli3.x改动还是特别大的，3.x中加载本地json只需要把json数据放在public文件中即可，不需要再次新建static文件！ 直接在public文件目录引入json数据 url中需要使用localhost://端口号 替换public绝对路径，在这里插入图片描述 至此，问题解决！ 原文链接：https://blog.csdn.net/qq_43471802/java/article/details/92377345 来源： oschina 链接： https://my.oschina.net/u/4283640/blog/4268248

https://cli.vuejs.org/zh/config/ https://www.jianshu.com/p/b358a91bdf2d https://blog.csdn.net/u012302552/article/details/81742907 https://www.cnblogs.com/tugenhua0707/p/9520780.html https://www.webpackjs.com/plugins/compression-webpack-plugin/ vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。 baseUrl: './' , outputDir: '../dist' , assetsDir: 'static',就这三句 来源： oschina 链接： https://my.oschina.net/u/4374260/blog/4268575

完成多入口打包配置 上一节我说完了三个关键的plugin，通过三个plugin我们可以做到将代码进行分割，并且将分割的代码打包到我们指定的路径下，完成打包的模块可以被index.html文件正确引用。这里我们需要贯穿整个流程。 1、yargs yargs 是一个非常强大的命令行参数处理工具，这里我们用到的功能比较简单，只需要获取从命令行传入的modules数组，这个数组表示所需打包的入口chunk。在vue-cli的默认安装包中并没有安装yargs这个模块，所以我们需要首先安装yargs模块。 // 通过npm安装yargs npm install yargs -D 完成安装后，我们就能使用yargs进行命令行参数的获取，然后通过获取到的数组，按需打包我们需要的入口模块。例如：我们src下面有三个入口，分别为 moduleA 、 moduleB 、 moduleC ，但是本次我们发现 moduleC 的代码没有发生变动，我们只需要在打包时传入 moduleA 、 moduleB 这两个参数就能做到。首先我们需要将参数从命令行传入到我们的运行脚本中。 2、命令行传入参数 2.1 scripts 的命令行参数 我们打包时运行的命令是 npm run build ，实际上我们执行的是package.json中的scripts中的脚本配置，vue-cli中默认的build配置是

第1章 课程导学（打消你的学习疑虑） 掌握Webpack越来越成为前端工程师的标配技能，本章会对课程整体进行介绍，打消你的学习疑虑。 第2章 Webpack 初探 本章通过清晰易懂的例子，带你了解 Webpack 的产生背景，以及其能够解决的问题。在此基础上，完成开发环境的搭建，Webpack 的安装，并进行最基础的 Webpack 使用讲解。 第3章 Webpack 的核心概念 本章讲解 Webpack 中的一些核心概念，从 Loader 与 Plugin 开始，带你学明白 Webpack 的运行机制，然后逐步深入，扩展衍生出 SoureMap， HMR， WDS 等常见概念。本章课程学习过程中，额外增加了对 Webpack 官方文档的查阅方式讲解，帮助大家学会查阅文档。... 第4章 Webpack 的高级概念 本章接第三章内容，继续讲解 Webpack 中难度更大的知识点，包含了 Tree Shaking，Code Spliting，打包环境区分，缓存，shimming 等内容，帮助你继续扩展 Webpack 的基础知识面。 第5章 Webpack 实战配置案例讲解 本章通过库文件打包，PWA项目打包，TypeScript打包支持等实战常见 Webpack 配置案例，带大家了解最新前端工程化常识，并在实例实现的过程中，巩固前三章节的基础知识点。同时章节末尾进行了

学习vue正确思路,是先学vue-cli,再学vue.js单文件引用的用法,这样会在极短时间内撤底撑握vue, 如果先学vue.js单文件用法,再去学vue-cli4,可以说是重新学vue,,,,难处大大增加,而且花费的时间是双倍(最少), 带手机验证码登陆, 带全套购物车系统 带数据库 前后端分离开发 带定位用户功能 数据库代码为本地制作好了 带支付宝支付系统 带django开发服务器接口教程 地址: https://www.duanshuilu.com/ 来源： oschina 链接： https://my.oschina.net/u/4323266/blog/4264824

legend3---30、不同类型的网站打包方案 一、总结 一句话总结： 单页面：webpack进行单页面打包，比如vue-cli，比如手机的前端页面 多页面静态页面：可以用webpack打包多页面，例如vue官网 多页面动态页面：比如各个后端语言对应的mvc框架 1、laravel中的inRandomOrder()用的是原生sql中的什么操作？ order by RAND() User::where('can_be_visited', 4)->inRandomOrder()->limit(100)->get(); select * from `users` where `can_be_visited` = 4 order by RAND() limit 100 2、发表评论优化？ 评论发表成功之后，没必要再从后台拿新的评论数据，可以直接评论成功后把数据加到评论对象中 3、在vue项目中，一些插件初始化的时候，会有开始没有效果，刷新之后有效果，如何解决？ 应该把初始化插件的代码放到vue的mounted方法中，这个时候页面结构已经初始化好了 4、用dom.getBoundingClientRect()来获取元素的位置？ rectObject = object.getBoundingClientRect();有上下左右四个属性表示距离

背景 公司业务中有个场景，需要在用户点击标签的时候，把标签内容进行处理成类似微博话题的形式，插入到 textarea 中。 textarea 和标签是页面的两个组件，正常情况我可以点击标签后向外抛出事件，页面去监听，然后再把数据传给 textarea ，但这样的处理麻烦，所以就想仿照 Vue 的 EventBus 来实现小程序的兄弟组件传值。 首先先看下demo： 标签的部分和输入框部分是页面的两个组件，我们要做的就是点击标签的时候，将标签的内容添加到输入框中。 实现思路 实现方式一：点击标签的时候，拿到标签的文本内容，然后调用微信的 triggerEvent API 向外抛出一个事件；然后在页面中监听这个事件，拿到标签组件抛出的标签文本后，将其设置进页面的 data 中，然后将其传给 输入框组件，输入框组件通过 observers 监听传入的文本数据，最后将其拼好，赋值给输入框的的 value。 方式一是很容易想到的方案，但是缺点很明显，实现的过程太过于繁琐了，所以方式一直接 pass，我们重点来研究另一个实现方案——EventBus。 实现方式二：方式二我们就仿照 Vue 的 EventBus 来实现兄弟组件传值，实质其实利用发布订阅模式。 首先是当我们点击标签的时候，我们需要向外触发一个事件，然后把标签的内容携带过去，它就是消息的发布者；然后我们需要在 textarea