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
}
相关推荐
guslegend8 小时前
脚手架入门:必要性、核心功能与执行原理
前端·架构·node.js·脚手架·前端工程化
Java后端的Ai之路11 小时前
01-React基础教程
开发语言·前端·python·react.js·前端框架
孟陬14 小时前
#教程 dw, dm, dy, d18m 是何意?万物可 Badge | 定制漂亮精致小徽章,打造眼前一亮 README
npm·github
liangshanbo121515 小时前
面试题:React.memo 和 useMemo 的区别
前端·react.js·前端框架
Flynt16 小时前
SvelteKit 3 升级实录:sv migrate 改完 6 个源文件,还给我留了张任务清单
typescript·前端框架·svelte
HaipengYu1 天前
深度解密 OpenCode 2 插件加载机制:Dual-Version (V1/V2) 适配实战与官方文档的“隐形陷阱”
node.js
前端之虎陈随易1 天前
bm2,Node.js 与 Bun 项目部署新选择
node.js
码艺-Alimjan2 天前
Tauri 网站To桌面应用实战总结
前端·javascript·vue
liangshanbo12152 天前
面试题:React 中 Lane 和 Scheduler 是怎么配合的?
前端·react.js·前端框架
梦帮科技3 天前
【3.0修订版】 RNS 代币架构:ERC20 五件套扩展与六钱包分配
数据结构·后端·算法·架构·node.js·区块链·php