首页 > 其他分享 >第1节:vue3开发前准备

第1节:vue3开发前准备

时间:2023-06-30 11:57:24浏览次数:42  
标签:npm vue 项目 创建 vue3 nginx 开发 准备 安装

(1)需要安装nodeJs版本16.0或以上版本

          以下是2023年6月30日官方文档截图

 

(2)查看你的电脑里node版本 

通过cmd命令查看 node -v查看是否大于等于16

 (3) 创建vue项目

注意:vue项目的命名不能用大写字母,只能小写字母,创建的项目名会以文件夹的方式呈现

创建命令:cmd进入到要创建项目的目录,然后执行 npm init vue@latest  ,这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。通过latest可创建最新的脚手架版本。

 命令行截图,回车后会让你输入项目名称:

本次示例用vue-demo,不可大写。输入vue-demo后回车

后续让我们选择,这里我先全选No,后续项目根据我们学的内容再增加

到这里项目创建成功。

(4)输入 cd vue-demo,进入到项目,然后执行npm install进行安装

 (5)安装成功,启动项目npm run dev 

打开项目地址,项目运行成功

(6)项目打包 和部署

项目目录下,使用npm run build 命令打包

打开项目的dist文件夹,将文件内容拷贝到nginx的html文件夹里

启动nginx

 

打开nginx的配置文件nginx.conf,查看nginx端口

 

打开项目部署地址

 

 

 开发环境

官方推荐的 IDE 配置是 Visual Studio Code + Volar 扩展

 项目用vsCode打开后安装Volar扩展插件

手工安装Volar扩展插件

 

标签:npm,vue,项目,创建,vue3,nginx,开发,准备,安装
From: https://www.cnblogs.com/wuzexin/p/17516171.html

相关文章

  • Vue3 如何使用 axios
    在Vue3中集成和使用AxiosAxios是一个流行的JavaScript库,用于在浏览器和Node.js中进行HTTP请求。它提供了简洁的API,可以轻松地发送异步请求并处理响应数据。在Vue3中,我们可以使用Axios来与后端进行数据交互。 参考资料:Axios官方文档:GettingStarted| AxiosD......
  • 开发工作中注意事项
    1.调用其他系统的一些操作信息都记录到数据表中,方便定位分析处理(如果配套ES,可以存入ES中,如果没有,则记录到关系型数据库中),也好定界定责,提供有力证据,也可作为业务优化分析的数据来源。 2.同理,被其他服务或前端调用的一些操作信息都记录到数据表中。如果系统中有配套的运维系统,那......
  • 开发调试过程中注意事项
    1.清空表、更新批量数据记录之前进行备份操作。2.生产环境版本升级前,需要在测试环境验证充。3.环境升级前,升级脚本、相关操作,先在熟悉的同事之间进行评审。4.版本升级时,自测和测试环节,对重要业务功能进行多个场景的覆盖验证。可以二维表格梳理需要验证分分支(有时相同的子分支......
  • 开发一个通用的python爬虫代码
    以下是一个通用的Python爬虫代码框架,可以作为起点来开发各种不同的爬虫程序:importrequestsfrombs4importBeautifulSoupdefget_html(url):response=requests.get(url)returnresponse.textdefparse_html(html):soup=BeautifulSoup(html,"html.parser......
  • 微信开发中你不知道的事~openid、unionid、session_key
    先了解基本概念~openid:微信公众平台对用户的唯一标识unionid:同一个微信开放平台下的用户唯一标识session_key:会话密钥一.openid可理解成1个微信用户打开1个微信公众号大门的唯一的1把钥匙同一组织(企业)注册的不同类型公众平台,被看作是多个不同的账号所以,当小明同......
  • Untiy开发脚本
    1、Inspector面板用代码控制Lock1Typet=typeof(UnityEditor.EditorWindow).Assembly.GetType("UnityEditor.InspectorWindow");2varwindow=UnityEditor.EditorWindow.GetWindow(t);3varlog=(bool)t.GetProperty("isLocked").GetValue(window);......
  • 低代码开发平台到底省掉了哪些成本?可能大家一直错了
    低代码到底是否真正可以降低研发成本?是否每个团队都适合?如果能降低,到底是降低的什么成本?其实我觉得这个是我们每个技术交付团队应该在使用任何产品之前都要考虑的问题。在我们考虑低代码是否能降低成本的问题前,我们先考虑下传统开发是怎么样一个过程,传统的开发的模式如下图所示:上图......
  • 方芳:关于建设新农村对中国传统村落的保护、开发与文化传承的研究
     武汉市江夏路桥工程有限公司中央财经大学 经济管理学院       方  芳     15927602711 中国传统村落是中国农村社会的重要组成部分,是中国文化的重要传承场所。但是,随着城市化进程的加快和现代化技术的广泛应用,传统村落面临着严重的冲击和消失的危......
  • Vue3从入门到精通(三)
    vue3插槽Slots在Vue3中,插槽(Slots)的使用方式与Vue2中基本相同,但有一些细微的差异。以下是在Vue3中使用插槽的示例://ChildComponent.vue<template><div><h2>ChildComponent</h2><slot></slot></div></template>​//ParentComponent......
  • 全栈测试开发系列----WebDriver API及对象识别技术(二)---selenium验证码处理的多种实现
    前言对于测试人员而言,不管是进行性能测试还是自动化测试,验证码的处理都是棘手的存在,在WEB应用中,大部分系统在用户登录的时候都要求用户输入验证码,且验证码的种类繁多,如纯数字、纯字母、汉子组合、数学题运算、滑动图标、图片、短信、邮箱、语音等。既然要实现验证码的处......