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
}
相关推荐
享誉霸王10 小时前
15、告别混乱!Vue3复杂项目的规范搭建与基础库封装实战
前端·javascript·vue.js·前端框架·json·firefox·html5
biyezuopinvip12 小时前
基于Spring Boot的投资理财系统设计与实现(毕业论文)
java·spring boot·vue·毕业设计·论文·毕业论文·投资理财系统设计与实现
biyezuopinvip13 小时前
基于Spring Boot的投资理财系统设计与实现(任务书)
java·spring boot·vue·毕业设计·论文·任务书·投资理财系统设计与实现
huohuopro18 小时前
Vue3 Webview 转 Android 虚拟导航栏遮挡问题记录
android·vue
礼拜天没时间.18 小时前
Node.js运维部署实战:从0到1开始搭建Node.js运行环境
linux·运维·后端·centos·node.js·sre
等什么君!20 小时前
如何正确使用nvm工具管理 node.js
node.js
码界筑梦坊2 天前
332-基于XGBoost与SHAP的可穿戴设备亚健康风险识别系统
python·数据分析·flask·vue·毕业设计
上单带刀不带妹2 天前
【Axios 实战】网络图片地址转 File 对象,附跨域解决方案
开发语言·前端·javascript·vue
SuperEugene2 天前
前端模块化与 import/export入门:从「乱成一团」到「清晰可维护」
前端·javascript·面试·vue
岱宗夫up2 天前
【前端基础】HTML + CSS + JavaScript 基础(二)
开发语言·前端·javascript·css·架构·前端框架·html