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
}
相关推荐
一点事14 分钟前
pnpm:离线环境项目如何安装pnpm依赖(官方推荐:离线镜像)
npm
暗冰ཏོ1 小时前
《uni-app 跨端开发完整指南:从基础入门到 H5、小程序、App 发布上线》
前端·小程序·uni-app·vue·html5
搬砖的前端1 小时前
AI工具集:Git提交时使用AI进行CodeReview如何在前端应用构建NPM包
前端·人工智能·git·npm·codeview
chushiyunen1 小时前
linux环境部署php、php-npm
linux·npm·php
在水一缸1 小时前
警惕供应链陷阱:从 Red Hat npm 恶意包事件看依赖安全防护
前端·安全·npm·供应链安全·red hat·恶意包·依赖安全
爱学习的程序媛2 小时前
Flutter 深度解析:从技术内核到名企实践
前端·flutter·前端框架
Hi~晴天大圣12 小时前
npm使用介绍
前端·npm·node.js
jingling55515 小时前
Flutter | 商城项目完整实战
前端·flutter·前端框架
文阿花16 小时前
大屏地图实现方案之-高德(二)
vue·地图·高德
m0_5358175516 小时前
macOS下Claude Code从0到1配置教程(附API密钥获取+常见报错修复)
gpt·macos·node.js·api·claude·claudecode·88api