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
}
相关推荐
王八八。2 小时前
nvm 安装与配置完全指南:从零到多版本 Node.js 自由切换
node.js
紫禁玄科2 小时前
Shai-Hulud:npm生态的自我复制蠕虫风暴
前端·npm·node.js
烂蜻蜓4 小时前
Node.js入门教程(十四):async/await
node.js
To_OC4 小时前
写了 5 个表单 Demo 后,我终于彻底搞懂了 React 受控与非受控组件
前端·react.js·前端框架
满栀5856 小时前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
gis开发之家13 小时前
《Vue3 从入门到大神50篇》Vue3 源码详解(二十):生命周期钩子源码解析 —— onMounted / onUpdated 如何实现?
前端·javascript·前端框架·vue3·vue3源码
word13 小时前
从零接入 MCP:把任意工具变成 AI 的能力(协议级实践)
人工智能·前端框架
console.log('npc')14 小时前
Mock 服务设计指南
前端框架·mock·react·visual studio·项目架构
console.log('npc')14 小时前
前端协作规范指南
前端·前端框架
碧水澜庭15 小时前
头条【vue+fastapi 】全栈教学项目系列之《02_双系统零基础环境搭建手册》
vue·fastapi