第二单元(webpack的配置-学习webpack的常用配置)
#课程目标掌握webpack的常用配置掌握如何根据实际的需求修改webpack的对应配置了解webpack-dev-server的意义和使用掌握webpack-dev-server的用法
#知识点webpack的配置项entry 入口 配置字符串-单个文件 配置数组-会把数组中的文件合并成一份文件，作为入口 配置对象-设置多个入口文件
转载
2024-09-05 19:06:06
11阅读
Vue3.0的六大亮点：Performance：性能比 Vue2.x 快 1.2~2 倍Tree shaking support：按需编译，体积比 Vue2.x更小Composition API：组合API(类似 React Hooks)Better TypeScript support：更好的 Ts 支持Custom Renderer API：暴露了自定义渲染APIFragment，Telepo
转载
2024-01-29 00:53:55
110阅读
随着时间的推演，vue3官方文档正式上线，忙里偷闲准备做一个使用vue3的小项目。首先，我们要全局安装最新的vue-cli，建议安装过旧版本的小伙伴，卸载掉旧版本，安装最新的脚手架，我们使用vue -V回车查看版本。版本过低使用npm uninstall vue-cli -g全局卸载脚手架；然后再全局安装安装脚手架npm install -g @vue/cli安装完成后，使用vue -V 查看是否
转载
2024-06-03 15:40:35
127阅读
Vue 3项目创建详细流程Vue 3作为Vue.js的最新版本，带来了诸多改进和新特性，使得前端开发更加高效和灵活。本文将详细介绍Vue 3项目的创建流程，帮助读者快速上手Vue 3的开发。一、安装Node.js和npm首先，确保你的开发环境已经安装了Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，而npm则是Node.js的包管理器。你可以从
原创
2024-05-31 13:20:30
0阅读
1. Vue2.x 和 Vue3.x 生命周期方法的变化文档地址：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.htmlVue2.x 和 Vue3.x 生命周期方法的变化蛮大的，先看看：2.x 生命周期3.x 生命周期执行时间说明beforeCreatesetup组件创建前执行createdsetup组件创建后执行bef
转载
2023-11-27 01:50:54
188阅读
VUE3小结1、Vue3.0环境集成1.使用vue-cli创建2.使用vite创建2、常用的Composition API（组合API）1、setup函数2、ref函数3、reactive函数4、Vue3.0中的响应式原理7、监听属性10、自定义事件11、属性传值13、占位组件Suspense和异步组件14、注册组件（八种方式）15、isRef toRef toRefs（响应式数据解构）16、r
转载
2024-06-28 19:03:32
168阅读
vue搭建准备环境npmnodewebpackvs codenpm使用brew命令行进行下载安装指定版本：brew install npm查看版本号：$ npm -v
8.15.0Node进入官网nodejs，根据自己电脑的版本进行下载安装，如果是mac电脑，可以直接使用brew命令行进行下载。 安装指定版本号：brew install node@16安装完成后，使用node -v的命令查看版本号
转载
2024-08-29 21:30:56
282阅读
使用vite构建vue3项目、vite
原创
精选
2023-06-27 10:31:51
872阅读
前言vue3已经正式发布有一段时间了，本着学习使人进步的原则，就开始了vue3的实践之路。vue3推出了一个web开发构建工具vite，那就放弃使用vue-cli尝尝鲜吧。vue3项目也是用了typescript，并且现在ts也很火，就正好一起实践一下。准备工作 确保安装了node开始1、项目初始化npm init vite-app my-vue3此时项目就已经初始化好，并且可以正常运行了。cd
转载
2023-10-26 19:44:55
347阅读
vue3项目打包默认情况下npm run build后会将文件打包到dist目录下，其中dist/index.html是首页从上面我们可以知道资源都是以/进行访问，我们使用vscode的live server插件后打开发现资源出现问题，访问地址为：http://127.0.0.1:5500/demo/dist/index.html资源从/加载的话会将协议://域名：端口进行拼接导致我们的资源出现异
转载
2023-07-18 21:37:04
434阅读
目录▌背景▌Dockerfile 详解▌坑 一：npm run build 打包失败▌坑 二：打包好的镜像无法在 rancher 上跑▌总结 ▌背景目前在公司维护的测试工具平台，有时候前端需要更新。改完前端 Vue 项目之后，还得在执行 npm run build 打包整个项目，再把打包好的整个项目拷贝过去后端项目中：这一步骤非常繁琐且不符合前后端分离的思想。为此考虑使用 Nginx 部署前端项
转载
2023-09-30 16:15:13
242阅读
走进Vue_渐进式 JavaScript 框架通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目what -- 什么是Vue可以独立完成前后端分离式web项目的JavaScript框架# vue可以干哪些事
# 将数据渲染到指定区域（数据可以是后台获取，也可以由前台自己产生）
# 可以与页面完成基于数据的交互方式 why -- 为什么
转载
2024-07-10 16:27:15
291阅读
创建vue3项目
原创
2024-05-16 11:01:57
76阅读
VUE项目编写总结（一）写在前面：学习VUE也一段时间了，不过只是零散的在学，知识点一个一个的学，但是这样是不够的，没有经历过沙场的士兵称不上真正的士兵。于是自己打算写一个真实的VUE项目，从系统选择，又考虑了一部分实用性。项目还在一点一点的编写中，中间遇到了很多的问题，但是绝大部分都是由于自己基础不牢固或者知识储备不够导致的。这里做一个阶段性总结，方便以后查阅也方便知识巩固。文中有理解错的概念或
# Vue 3 项目架构解析
Vue.js 是一个流行的前端框架，广泛应用于开发现代化的单页应用（SPA）。随着 Vue 版本的迭代，Vue 3 引入了许多新特性，使得构建组件化和可维护的应用变得更加简单。本文将详细讲述 Vue 3 项目架构的组成部分，并通过代码示例解释如何实现它。
## 一、项目构建
使用 Vue CLI 创建项目是最常见的方式。以下是创建 Vue 3 项目的命令：
`
vue3项目快速开发模板简介本项目采用 vue3 + webpack 的方式来开发，已经引入了常用功能，不需要再去配置路由、请求、pinia 等，上手直接开发页面即可，真正做到开箱即用你可以直接拉取我的仓库来直接使用，也可以按照本文教程自己操作技术栈vue3webpackpiniavue-router4element-plusaxiosi18nsass启动项目安装npm install运行npm
找到vite.config.js 注释掉这两行就消失了
以配置Nginx为例，配置过程大致如下：（假设： 1、项目文件目录： /mnt/html/spa（spa目录下的文件就是执行了npm run dist 后生成的dist目录下的文件） 2、访问域名：spa.sosout.com） 进入nginx.conf新增如下配置：server {
listen 80;
server_name spa.sosout.c
1. 创建一个普通的vue3项目npm i -g @vue/cli //全局安装最新vue构建工具 (默认最新)
vue create testvue3 //创建一个名为myvue3的项目选择 Default ( Vue 3 Preview)//运行项目
cd testvue3
yarn serve效果图：2. 创建一个基于vite开发的vue3项目npm install -g create
转载
2023-10-19 19:37:29
142阅读
1.Vue项目结构： build文件夹：项目构建（webpack）相关代码 config文件夹：配置文件夹，配置目录，端口号等等 node_modules:npm依赖的项目模块 src文件夹：开发目录 src包括： App.vue文件：项目入口文件 main.js文件项目的核心文件 router文件夹：存放路由文件，里面的index.js存放路由 component文件夹：组件文件夹static文
转载
2023-12-13 01:32:09
393阅读
