周口网站建设 网站制作 网络推广,网站备案添加域名,微信网站是多少,工商营业执照年检欢迎来到《小5讲堂》 大家好#xff0c;我是全栈小5。 这是是《前端》序列文章#xff0c;每篇文章将以博主理解的角度展开讲解#xff0c; 特别是针对知识点的概念进行叙说#xff0c;大部分文章将会对这些概念进行实际例子验证#xff0c;以此达到加深对知识点的理解和掌… 欢迎来到《小5讲堂》 大家好我是全栈小5。 这是是《前端》序列文章每篇文章将以博主理解的角度展开讲解 特别是针对知识点的概念进行叙说大部分文章将会对这些概念进行实际例子验证以此达到加深对知识点的理解和掌握。 温馨提示博主能力有限理解水平有限若有不对之处望指正 目录 背景新建项目已有项目常见情况 背景
作为后端开发人员有时候也会基础到前端特别是在中小型公司大部分后端开发人员可能都兼任开发前端 线上版本代码管理也越来越多当我们从一台新电脑签出Vue前端代码首次打开一般都是没有依赖文件需要重新初始化
新建项目
首次打开一个 Vue 3 项目时需要执行一些操作来准备项目环境。
以下是一些常见的步骤
1.首先确保已经安装了 Node.js 并且版本在 12.0 或以上。可以在终端命令行界面中运行 node --version 命令来检查当前安装的 Node.js 版本。 2.创建一个新的项目文件夹你可以在任意位置创建比如桌面或者特定的代码文件夹然后进入该文件夹。
3.在终端中进入到你的项目文件夹下运行以下命令初始化你的项目
npm init -y这将初始化一个新的 package.json 文件并用默认的配置填充。
4.安装 Vue CLI命令行工具它提供了创建和管理 Vue 项目的便捷方式。运行以下命令安装 Vue CLI
npm install -g vue/cli5.然后你可以使用 Vue CLI 创建一个新的 Vue 3 项目。在终端中运行如下命令
vue create .这将创建一个新的 Vue 3 项目并将其所有的文件和依赖安装到当前文件夹中。
6.接下来你会被显示一些选项比如选择预设default 或者 Manually select features你可以选择适合你的选项。然后等待项目初始化和依赖安装的完成。
7.当创建完成后你可以使用以下命令运行你的 Vue 3 项目
npm run serve这将启动一个本地的开发服务器可以在浏览器中访问 http://localhost:8080或者另一个端口具体自己可以自定义
已有项目
如果已经打开了一个已经存在的 Vue 3 项目文件夹接下来需要做的就是初始化相关依赖并启动该项目。
以下是基本的步骤
1.进入到你的项目文件夹中。你可以在终端中使用 cd 命令来进入到该文件夹中。 如果cd无法跳转那么可以通过斜杠d形式强制跳转比如cd /d 具体路径
2.接着安装相关的依赖。你可以运行以下命令安装依赖
npm install这将查看package.json文件中列出的所有依赖并安装到当前的 node_modules 文件夹中。 3.等待依赖安装完成后你可以使用以下命令来启动你的 Vue 3 项目
npm run serve启动成功后就可以看到如下图地址复制地址到浏览器上即可。 serve这个名称也可以改成自己业务相关名字比如npm run my-pro
常见情况 如果在运行 npm run dev 命令时提示 Missing script: “dev” 的错误提示 那么很有可能是因为在你的 package.json 文件中并没有定义 dev 脚本。 npm run dev 命令通常用于启动开发服务器。
如果这个命令在你的项目中不存在那么可以按照以下步骤进行设置
1.打开项目中package.json文件。
2.在scripts对象中添加一个新的键值对其中键为 “dev”值为 “vue-cli-service serve”。
scripts: {dev: vue-cli-service serve
},3.保存并关闭 package.json 文件。
4.然后再次尝试运行 npm run dev 命令就应该能够正常启动开发服务器了。 如果还有其他的脚本需要定义可以按照上述方式添加到 scripts对象中比如定义一个 “build” 脚本用于构建生产环境版本的代码
scripts: {dev: vue-cli-service serve,build: vue-cli-service build
}在添加或者修改了 package.json 文件中的脚本之后可以使用 npm run 总结温故而知新不同阶段重温知识点会有不一样的认识和理解博主将巩固一遍知识点并以实践方式和大家分享若能有所帮助和收获这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。
