vue-cli

2024/4/12 10:04:12
58 vue-cli 以及 webpack 提供的默认的插件, 配置

58 vue-cli 以及 webpack 提供的默认的插件, 配置

前言 vue-cli 这边作为驱动 webpack 的一个应用 它需要构造 webpack 所需要的上下文, 以及参数 这里 我们来关注一下 vue-cli 这边为 webpack 构造的参数 的相关处理 webpack 这边上下文的配置, 主要分为了几个部分, Entry, Output, Module, Resolve, Plugin, DevServer, O…
阅读更多...
33--Vue-前端开发-使用Vue脚手架快速搭建项目

33--Vue-前端开发-使用Vue脚手架快速搭建项目

一、vue脚手架搭建项目 node的安装： 官方下载，一路下一步 node命令类似于python npm命令类似于pip 使用npm安装第三方模块，速度慢一些，需换成淘宝镜像 以后用cmpm代替npm的使用 npm install -g cnpm --registry=https://registry.npm.taobao.org安装脚手架： cnpm inst…
阅读更多...
vue-cli 输出的模板 html 文件使用条件语句

vue-cli 输出的模板 html 文件使用条件语句

背景 项目使用的是 vue-cli 脚手架，需要根据不同环境的配置，在输出的 html 模板中使用条件语句来生成不同的代码。 环境变量 在 .env.development 中，定义环境变量 VUE_APP_DISABLE_IP_ACCESStrue使用条件语句 第一种方法，使…
阅读更多...
使用脚手架（vue-cli）进行自动化项目构建

使用脚手架（vue-cli）进行自动化项目构建

前言 要说vue-cli脚手架的实际意义，可能没有多少，因为构建项目的方式有很多，甚至可以直接复制下载别的项目便可作为项目模板进行后续使用即可，但是使用脚手架去进行自动化构建是一个熟悉vue开发的过程，也就是一个学习…
阅读更多...
vue-cli + vue3 项目 ios 苹果手机白屏问题

vue-cli + vue3 项目 ios 苹果手机白屏问题

目录 问题描述原因分析解决方案遇到的坑1，架构问题2，项目引入其他依赖的问题 参考 问题描述 vue-cli vue3 的项目，在苹果手机上打开白屏，安卓手机正常显示。 原因分析 1，借助 vconsole 发现并没有打印报错信息&…
阅读更多...
解决 vue-cli index.js dev 配置中 assetsPublicPath 的值不能填 ./ 的问题

解决 vue-cli index.js dev 配置中 assetsPublicPath 的值不能填 ./ 的问题

问题篇 最近使用frp代理开发微信vue应用，frp代理不直接暴露根目录，因为我的根目录已经被我的博客占用了，所以就使用nginx又代理了一层，访问方式从越来的 wechat.youngboy.vip 变成 wechat.youngboy.vip/proxy ，在游览…
阅读更多...
基于 Webpack 插件体系的 Mock 服务

基于 Webpack 插件体系的 Mock 服务

背景 在软件研发流程中，对于前后端分离的架构体系而言，为了能够更快速、高效的实现功能的开发，研发团队通常来说会在产品原型阶段对前后端联调的数据接口进行结构设计及约定，进而可以分别同步进行对应功能的实现，提升研…
阅读更多...
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程

【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，…
阅读更多...
在vue-cli中快速使用webpack-bundle-analyzer

在vue-cli中快速使用webpack-bundle-analyzer

webpack-bundle-analyzer 是一个可视化资源分析工具，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件 Gzip压缩后的大小、模块包含关系、依赖项等。 从vue-cli官方的更新记录可以看到，从vue-cli3开始集成report命令 当前环…
阅读更多...
vue-cli@4.x快速原型开发功能

vue-cli@4.x快速原型开发功能

目录 快速原型开发 快速原型开发 作用：可以只运行某一个 vue 文件，而不需要 App.vue 和 main.js。相当于这个功能帮做了创建 vue 实例并挂载这个过程。 换句话说，可以不启动整个项目，而是只开发测试某一个 vue 文件。 注意&#…
阅读更多...
vue-cli 下的 CSS Modules

vue-cli 下的 CSS Modules

目录 在 js 中使用省略 .module 在 vue 中使用 在 js 中使用 vue-cli 参考 在 Js 中作为 CSS Modules 导入 CSS 或其它预处理文件时，该文件应该以 .module.(css|less|sass|scss|styl) 结尾。 需要安装对应的预处理器和 loader。以 less 为例，需要安装 …
阅读更多...
Vue——Vue-cli脚手架+前端路由

Vue——Vue-cli脚手架+前端路由

Vue-cli是Vue的脚手架工具 可以进行目录结构、本地调试、代码部署、热加载、单元测试 1、MVVM框架 View —— ViewModel —— Model （视图） （通讯） （数据） “DOM” “观察…
阅读更多...
es6+vue+vue-cli+vue-router+vuex+axios+webpack+element-ui+sass+node.js实例

es6+vue+vue-cli+vue-router+vuex+axios+webpack+element-ui+sass+node.js实例

首先展示下呈现的效果图： 一、目录结构： 二、package.json： {"name": "vue-cli3","version": "1.0.0","description": "A Vue.js project","author": "samve &…
阅读更多...
Vue 3 + Vue-Cli 构建和初始化配置项目

Vue 3 + Vue-Cli 构建和初始化配置项目

文章目录 01 vue-cli 构建02 配置 git 大小写敏感03 vscode 插件安装04 .eslintrc 配置示例05 prettier 配置（代码格式化）06 请求工具封装（axios）07 store 配置统一导出08 配置 css 默认公用样式 01 vue-cli 构建 以下配置建立在…
阅读更多...
Vue脚手架安装（全网最详细）

Vue脚手架安装（全网最详细）

目录 1、环境准备 1.1 安装node 1.1.2 判断你是否安装成功 1.1.3 在命令提示符中查看node版本 1.2 安装webpack 1.3 安装vue-cli3.x以上 2、创建工程 2.1 创建 2.2 选择 2.2.1 选择自定义设置： 2.2.2 选择Vue版本： 2.2.3 是否使用历史模式选择…
阅读更多...
基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）

1、项目开发需求分析： 包含四个层面—— （1）推荐模块 （2）歌手模块 （3）排行模块 （4）搜索模块 2、项目开发流程 （1）搭建项目：借助…
阅读更多...
vue第四天笔记01——路由整理

vue第四天笔记01——路由整理

效果图1. 为了实现这个简单的路由，我们之前是将路由的配置放在main.js页面中进行配置： 2.但是在单页面开发的时候，会有很多路径需要配置，这时候再放在main.js里面就不太好了；解决方法就是在assets文件夹里面新建js文件…
阅读更多...
vue第五天笔记04——打包

vue第五天笔记04——打包

将“vue第四天笔记02——axios请求”中的项目打包，步骤如下： 第一步，(使用之前记得命令行执行npm install)将webpack.config.js中的一个斜线去掉 第二步，将index.html中的一个斜线去掉 第三步，命令行输入以下代码 np…
阅读更多...
vue第五天笔记02——vuex数据仓库

vue第五天笔记02——vuex数据仓库

一、概念： vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便 整个程序中的任何组件直接获取或修改我们的公共数据；vuex是为了保存组件之间共享数据而诞生的，如果组件之间…
阅读更多...
vue第五天笔记03——mint-ui

vue第五天笔记03——mint-ui

一、mint-ui网站 mint-ui官网(有时候会打不开)：http://mint-ui.github.io/ mint-ui w3c使用教程(有时候看不了图)：https://www.w3cschool.cn/mintui/ mint-ui文档：https://github.com/ElemeFE/mint-ui 二、根据教程使用第一个mint-ui组件…
阅读更多...
Win10系统下搭建vue环境（解析）

Win10系统下搭建vue环境（解析）

下面任何命令都是在windows的命令行工具下进行输入，打开命令行工具的快捷方式如下图： 快捷键采用windowsR进入命令行cmd、 详细的安装步骤如下：一、安装node.js说明：安装node.js的windows版本后，会自动安装好node以及…
阅读更多...
vue第三天笔记06——vue-cli练习

vue第三天笔记06——vue-cli练习

将下列HTML代码写入vue-cli项目 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"…
阅读更多...
vue第四天笔记02——axios请求

vue第四天笔记02——axios请求

一、axios请求的步骤&#xff1a; 1.下载依赖&#xff0c;命令行输入下列命令 npm install axios -S 2.在main.js里引入axios import axios from axios Vue.prototype.$http axios 3. 在mounted内部进行axios请求 mounted(){ this.$http.get(数据源文件的路径&am…
阅读更多...
vue第五天笔记01——在vue-cli项目里面使用jq

vue第五天笔记01——在vue-cli项目里面使用jq

一、首先在assets文件夹里面新建js文件夹&#xff0c;里面放置jq文件 二、在index.html里面导入 三、使用jq 效果图四、注意&#xff1a; 移动端开发可以使用jQuery&#xff0c;但不推荐使用&#xff01;&#xff01;&#xff01;
阅读更多...
vue2 vue-cli vue-router vuex

vue2 vue-cli vue-router vuex

Vue2 插值表达式 利用表达式进行插值渲染&#xff0c;将数据渲染到页面中。 语法&#xff1a;{{ 表达式 }} PS&#xff1a; 使用的数据要存在支持的是表达式&#xff0c;不是语句 if、for不能在标签属性中使用{{ }} v-show和v-if v-show底层原理&#xff1a;切换css的dis…
阅读更多...
vue-cli笔记

vue-cli笔记

vue的生命周期&#xff1a; 借鉴了react 钩子函数&#xff1a; change() 挂载完毕&#xff0c;vue完成模板解析&#xff0c;并把初始的真实的dom元素放入到页面后执行 beforeCreate() {// 数据代理和数据监测创建之前console.log(beforeCreate) }, created() {console…
阅读更多...
完美解决webpack多页面热部署缓慢问题

完美解决webpack多页面热部署缓慢问题

问题 在前端多页面&#xff08;多html&#xff09;开发的时候&#xff0c;使用webpack进行HMR热部署&#xff0c;但每一次修改之后&#xff0c;热部署持续很长的时间&#xff0c;而且页面越多&#xff0c;时间越长&#xff0c;观察可知大部分时间花在 asset optimization 这一…
阅读更多...
vue环境搭建以及使用vue-cli创建项目

vue环境搭建以及使用vue-cli创建项目

我要跑vue项目&#xff0c;所以我要搞vue。 1、环境搭建 进入node官网下载对应版本的node&#xff0c;一步步安装即可。 安装会自动配置路径和npm包管理环境&#xff0c;通过node -v进行验证 设置npm的镜像源&#xff0c;使用国内的加快速度 # 设置 npm config set registry…
阅读更多...
vue-cli创建项目、vue项目目录结(运行vue项目)、es6导入导出语法、vue项目编写规范

vue-cli创建项目、vue项目目录结(运行vue项目)、es6导入导出语法、vue项目编写规范

vue-cli创建项目、编写vue项目、 1 vue-cli创建项目 1.1 vue-cli 命令行创建项目 1.2 使用vue-cli-ui创建 2 vue项目目录结构 2.1 运行vue项目 2.2 vue项目的目录结构 3 es6导入导出语法 4 vue项目编写规范 4.1 修改项目 4.2 以后写vue项目&#xff0c;只需要在固定位置…
阅读更多...
入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目（vue2）

入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目（vue2）

入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目&#xff08;vue2&#xff09; 1. 安装npm2. 安装 Vue CLI3. 创建 vue_demo1 项目&#xff08;官网&#xff09;3.1 创建 vue_demo1 项目3.1.1 创建项目3.1.2 解决 sudo 问题 3.2 查看创建的 vue_demo1 项目3…
阅读更多...
vue cli+axios踩坑记录+拦截器使用

vue cli+axios踩坑记录+拦截器使用

1、首先axios不支持vue.use()方式声明使用&#xff0c;看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from axios; Vue.prototype.$axiosaxios; 那么在其他vue组件中就可以this.$axios调用使用 2.小小的提一下vue cli脚手架前…
阅读更多...
Vue脚手架（vue-cli）搭建和目录结构详解

Vue脚手架（vue-cli）搭建和目录结构详解

一、环境搭建 1、安装node、npm、webpack&#xff0c;不多说 2、安装vue-cli脚手架构建工具&#xff0c;打开命令行工具输入&#xff1a;npm install vue-cli -g&#xff0c;安装完成之后输入 vue -V&#xff08;注意这里是大写的“V”&#xff09;&#xff0c;如果出现相应的版…
阅读更多...
第三章 Vue-cli开启Vuejs项目（1）

第三章 Vue-cli开启Vuejs项目（1）

第三章 Vue-cli开启Vuejs项目&#xff08;1&#xff09; Vue-cli是Vue的脚手架工具 Vue-cli就是帮助我们写好Vue.js基础代码的工具。它能够帮助我们完成目录结构、本地调试、代码部署、热加载、单元调试等工作 vue-cli的GitHub地址 安装 vue-cli是一个node包&#xff0c;所…
阅读更多...
Vue-Cli 在 index.html 文件中进行环境判断

Vue-Cli 在 index.html 文件中进行环境判断

Vue-Cli 在 index.html 文件中进行环境判断 1、Vue-Cli 在 index.html 进行环境判断 主要是使用<% %> 语法进行判断 <link rel"icon" href"<% BASE_URL %>favicon.ico" rel"external nofollow" /> <!-- 开发环境 -->…
阅读更多...
vue-cli中安装配置sass

vue-cli中安装配置sass

一、安装对应依赖node模块&#xff1a; npm install node-sass --save-dev npm install sass-loader --save-dev 二、打开webpack.base.config.js在loaders里面加上&#xff1a; {test: /\.scss$/,loaders: ["style", "css", "sass"]} module:…
阅读更多...
Vue CLI配置项总结（8）

Vue CLI配置项总结（8）

1.vue.config.js api const webpack require("webpack"); module.exports {//baseUrl,从 Vue CLI 3.3 起已弃用&#xff0c;请使用publicPath。// 项目部署的基础路径// 我们默认假设你的应用将会部署在域名的根部&#xff0c;// 比如 https://www.my-app.com/// …
阅读更多...
vue 项目 index.html 中使用环境变量

vue 项目 index.html 中使用环境变量

目录 1&#xff0c;Vue-CLI&#xff08;Webpack&#xff09;2&#xff0c;Vite 1&#xff0c;Vue-CLI&#xff08;Webpack&#xff09; <!DOCTYPE html> <html lang""><head><link rel"icon" href"<% BASE_URL %>favicon…
阅读更多...
Vue学习 之 MacOS 安装 vue-cli

Vue学习 之 MacOS 安装 vue-cli

文章目录 Vue学习 之 MacOS 安装 vue-clivue-cli 简介vue-cli 安装 Vue学习 之 MacOS 安装 vue-cli vue-cli 简介 vue-cli&#xff08;Vue Command Line Interface&#xff09;是Vue.js官方提供的一个脚手架工具&#xff0c;它提供了一些命令&#xff0c;可以帮助我们创建基于…
阅读更多...
vue-cli创建项目出错-----------

vue-cli创建项目出错-----------

vue安装npm install vue-cli -g 出错 一般是本地安装过了 如果此时不能够创建项目 将原来的卸载即可 npm uninstall vue-cl i-g 查看vue版本 vue -V 存在即可创建项目 vue init webpack ‘my-object’
阅读更多...
前端框架Vue学习 ——（五）前端工程化Vue-cli脚手架

前端框架Vue学习 ——（五）前端工程化Vue-cli脚手架

文章目录 Vue-cliVue项目-创建Vue项目-目录结构Vue项目-启动Vue项目-配置端口Vue项目开发流程 Vue-cli 介绍&#xff1a;Vue-cli 是 Vue 官方提供的一个脚手架&#xff0c;用于快速生成一个 Vue 的项目模版 安装 NodeJS安装 Vue-cli npm install -g vue/cliVue项目-创建 图…
阅读更多...
vue-cli-webpack模板配置全解析-1

vue-cli-webpack模板配置全解析-1

vue-cli webpack 模板配置解析 - 1 文件结构 重要模块版本 vue-cli : 2.9.1vue : 2.4.2vue-router : 2.7.0webpack : 3.6.0其他依赖都由 vue-cli 生成 使用 全局安装 vue-cli npm install -g vue-cli创建项目 vue init webpack <project-name> 进入项目文件夹 cd <…
阅读更多...
vue实现PC端分辨率适配

vue实现PC端分辨率适配

依赖 项目基础配置使用 vue-cli2 生成 自适应方案核心&#xff1a; 阿里可伸缩布局方案 lib-flexible px转rem&#xff1a;px2rem&#xff0c;它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名项目初始化好了之后&#xff0…
阅读更多...
vue项目部署到线上报 Uncaught SyntaxError: Unexpected token ‘＜‘

vue项目部署到线上报 Uncaught SyntaxError: Unexpected token ‘＜‘

Bug描述&#xff1a;该项目作为一个平台的子平台存在&#xff0c;根据nginx路由分发实现路由跳转。在从主平台跳转到该子平台的时候&#xff0c;页面一片空白&#xff0c;在控制台有3个报错&#xff0c;报错内容均为&#xff1a; Uncaught SyntaxError: Unexpected token ‘<…
阅读更多...
vue-cli3的安装及项目搭建与使用

vue-cli3的安装及项目搭建与使用

文章目录1. vue-cli 的简单介绍2. vue-cli的安装与更新3. 用vue-cli2.x搭建项目4. 用vue-cli 3.0搭建项目5. 用vue-cli 3.0添加插件1. vue-cli 的简单介绍 CLI为命令行工具&#xff0c;Vue-CLI是一个基于nodeJs、用于快速搭建繁杂vue项目的 脚手架。它为现代前端工作流提供了 …
阅读更多...
Vue 3 + Vue-Cli 构建和配置项目

Vue 3 + Vue-Cli 构建和配置项目

文章目录 01 vue-cli 构建02 配置 git 大小写敏感03 vscode 插件安装04 .eslintrc 配置示例05 prettier 配置&#xff08;代码格式化&#xff09;06 请求工具封装&#xff08;axios&#xff09;07 store 配置统一导出08 配置 css 默认公用样式 01 vue-cli 构建 以下配置建立在…
阅读更多...
webpack+vue-cli

webpack+vue-cli

最近一直在琢磨这个怎么用。。在学习了vue后&#xff0c;没想到还有vue全家桶&#xff1a;&#xff09;。尝试了自己安装vue-cli和webpack的demo。 我的理解是&#xff1a; &#xff08;1&#xff09;使用原因&#xff1a;对于大型的项目开发&#xff0c;使用vue-cli是会比较…
阅读更多...
vue-cli + webpack 新建项目出错的解决方法

vue-cli + webpack 新建项目出错的解决方法

vue-cli webpack 新建项目出错的解决方法 今日使用 npm init webpack love 创建一个新项目&#xff0c;然后执行 npm run dev 之后项目报错&#xff0c;提示错误如下&#xff1a; 没有给这些选项指定值&#xff1a;config-name, context, entry, module-bind, module-bind-pos…
阅读更多...
Vue 学习14——CLI简介（如何新建一个vue项目）

Vue 学习14——CLI简介（如何新建一个vue项目）

目录 ㋀㋊ ✎ VUE-CLI简介 ◆ 前言 ◆ 脚手架信息 ➀ vue-cli ➁ vue-cli 脚手架地址 安装国内cnpm&#xff08;cnpm install&#xff09; ✎ 初始化项目 ◆ 前言 ◆ 步骤 ➊ 全局安装 vue-cli 和创建 my-projetc ➋ 创建 my-project 的相关参数 ➌ 全程命令结果动…
阅读更多...
Deepin-配置开发环境（2）

Deepin-配置开发环境（2）

文章目录1. 安装node2. 安装npm3. 安装vue-cliVue-cli 是Vue.js 项目的脚手架&#xff0c;依赖于npm&#xff0c;而npm需要node&#xff0c;这两个东西自行百度。Deepin 版本&#xff1a;4.15.0-30deepin-generic1. 安装node 在安装node之前&#xff0c;建议确保自己的apt用的…
阅读更多...
Vue-cli 中是如何进行父子组件间传值的

Vue-cli 中是如何进行父子组件间传值的

&#xff08;1&#xff09;子组件 — data —> 父组件 父组件&#xff08;Regist.vue&#xff09;部分&#xff1a; <template><div class"regist">这里是注册页面&#xff01;<!-- 2、通过绑定属性来传值给子组件 --><RegistInfo :msg&qu…
阅读更多...
vue第三天笔记05——使用vue-cli脚手架工具创建一个项目

vue第三天笔记05——使用vue-cli脚手架工具创建一个项目

1.新建文件夹&#xff0c;命名不能是中文 2.打开该文件夹&#xff0c;在该文件夹路径下输入cmd&#xff0c;进入命令行 3.输入下面的命令 vue init 模板名 项目名称(随便取名&#xff0c;要是英文) 模板名有三种&#xff1a; simple&#xff1a; 只有一个index.html文件&…
阅读更多...
vue-cli打包后，找不到css、js文件问题的解决

vue-cli打包后，找不到css、js文件问题的解决

搜了一些解决方案&#xff0c;发现很多人只贴一点代码&#xff0c;就说解决了。我照葫芦画瓢&#xff0c;却依然无法实现&#xff0c;这就导致我“既不知其然也不知其所以然”。于是我研究了config/index.js的配置&#xff0c;摸索出找到静态文件的方法&#xff0c;分享如下&am…
阅读更多...
Vue-cli seo 使用prerender-spa-plugin插件预渲染

Vue-cli seo 使用prerender-spa-plugin插件预渲染

使用vue-cli打包项目一般为spa项目&#xff0c;众所周知单页面应用不利于SEO&#xff0c;有ssr(服务端渲染)和预渲染两种解决方案&#xff0c;这里我们只讨论预渲染 vue-cli有2.0和3.0版本&#xff0c;解决方法是不一样的&#xff0c;我们要分开讨论。 vue-cli2.0版本 1.安装…
阅读更多...

Copyright @ 2022~2023