Vue框架学习记录

概览


准备工作

安装环境准备

复制代码
#安装node.js
#安装npm
#安装vue cli

基于脚手架创建前端工程


方式一

复制代码
#创建一个保存vue项目的目录,如vue_project
#在vue_project下进入cmd
vue create vue-demo-1


方式二

复制代码
#在cmd下输入
vue ui
复制代码
选择vue2
复制代码
#成功之后的界面
复制代码
#打开浏览器,选择界面的左上角vue-project
#跟着上面做的,应该是vue-demo-1
#点击红色选中的Vue项目管理器
c 复制代码
#第一个红色框选中的是存放vue项目的总合集
#选择你自己创建的项目合集即可
#点击第二个红色框"在此创建项目"
复制代码
#项目文件夹,如vue-demo-2
#包管理器 npm
#GIt 勾选上
#点击下一步

#选中Vue2

#创建项目

复制代码
#可查看项目依赖和配置

项目结构解析

启动前端项目

复制代码
#在当前项目路径下npm run serve
#命令行和VsCode的终端都行
bash 复制代码
#npm run serve的"serve"取决于package.json的scripts下的配置
#如下面红色框所示

更改前端端口

bash 复制代码
#在vue.config.js里添加
devServer: {
	port: 7070
}
相关推荐
爱编程的小金26 分钟前
告别手写分页逻辑:usePagination 从 50 行到 3 行
javascript·vue·前端分页·alova·usepagination
右耳朵猫AI29 分钟前
Node.js周刊2026W21 | Node.js 26.2.0、Bun v1.3.14、Rolldown 1.0、TypeORM 1.0
node.js
小虎43 分钟前
npm和pnpm常用命令
npm·pnpm·镜像源·缓存目录
wgc2k2 小时前
Node.js游戏服务器项目移植 5-唯一 ID 生成方案
游戏·node.js
x***r1512 小时前
Node.js v0.12.2 安装教程(Windows x86版 node-v0.12.2-x86.msi 详细步骤)
windows·node.js
夜雪闻竹2 小时前
React Query + REST API 最佳实践
前端·react.js·前端框架
独特的螺狮粉2 小时前
蛋鸡养护周期管理系统 - 鸿蒙PC Electron框架完整实现指南
前端·javascript·华为·electron·前端框架·开源·鸿蒙
海兰2 小时前
【实用程序】 极简OA系统-详细设计及源码(基于Node.js + Express + SQLite + 原生前端)
sqlite·node.js·express
YJlio3 小时前
OpenClaw 2026.5.2 Beta 更新解读:外部插件安装、ClawHub / npm 切换与 Gateway 性能优化
性能优化·npm·gateway·飞书·多维表格·飞书aily·飞书妙搭
ok406lhq12 小时前
用 MonkeyCode 8 小时搭建自动化内容站:AI Coding 平台实战复盘
ci/cd·vue·ai编程·自动化部署·monkeycode