Vue3.0 项目启动(打造企业级音乐App)

news2024/11/19 21:24:41

系列文章目录

内容参考链接
Vue3.0 项目启动Vue3.0 项目启动(打造企业级音乐App)
Vue3.0项目——打造企业级音乐App(一)Tab栏、轮播图、歌单列表、滚动组件
Vue3.0项目——打造企业级音乐App(二)图片懒加载、v-loading指令的开发和优化

文章目录

  • 系列文章目录
    • Vue3.0 发布
    • 项目演示
    • 创建 vue3.0 工程
    • 声明


Vue3.0 发布

2020年09月18日,vue3.0 版本正式发布。这意味着在未来两到三年时间,vue 的主流版本将由 2.x => 3.x。所以,学习开发 vue3.0 的项目是必要的,也是必须的。接下来,开启我们的 vue3.0 时代吧!

项目演示

vue3.0-music

创建 vue3.0 工程

  1. 打开命令行,定位到你想把项目放到的位置(比如桌面)

在这里插入图片描述

  1. 创建 vue3.0 项目(vue-music)
	vue create vue-music-next
  1. 选取自定义配置

在这里插入图片描述

  1. 选择 Router,Vuex,CSS 预处理器,Linter 校正工具

在这里插入图片描述

  1. 选择 3.x

在这里插入图片描述

  1. 是否保存刚才的配置(y/n 都可以)

在这里插入图片描述

  1. 选择自己想用的 CSS 框架(此项目选 Sass)

在这里插入图片描述

  1. 选择适合自己的校正工具(此项目选标准的校正)

在这里插入图片描述

  1. 保存的时候运行

在这里插入图片描述

  1. 选择把一些配置放在 package.json 里

在这里插入图片描述

  1. 是否用于未来的配置(自行选择)

在这里插入图片描述

  1. 使用 yarn 还是 npm 安装(随意)

在这里插入图片描述

  1. 之后便开始创建工程(耐心等待即可)

在这里插入图片描述

  1. 至此,项目创建完成

在这里插入图片描述

声明

你也完全可以把项目部署到 github 等开源网站上,以便之后的管理操作。
操作也很简单,先在 github 上创建项目,之后通过 git clone + ssh 地址,在命令行中执行,然后再按本篇文章的顺序操作即可。

不积跬步无以至千里,不积小流无以成江海

点个关注不迷路,持续更新中…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409098.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

功能:Session与Vue:登录获取权限,并完成session存储

一、需求说明 1、系统登录,每个账号表示一位用户,每位用户分配有不同的权限,不同的权限有着不同的操作。 2、现需要每位用户登录时都能获取到对应的权限,在登录系统中进行使用,退出时则清空权限。 3、项目框架&#x…

一个非常好看的前端Vue3登录页面

Vue3lessElement Plus <template> <div id"login"><div id"contain"><div id"left_card"><h1>欢迎来到我的Vue3大世界</h1><span>Welcome to my Vue3 world</span></div><div id&quo…

HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办?问题出在这里:HBuilderX外部web服务支撑配置

初学HTML的时候&#xff0c;用的是HBuilderX开发软件 写了一段简单的代码 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>这是网页的标题</title></head><body><p>这里是网页的内容</p>&l…

解决Vue报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

问题描述&#xff1a;重复点击导航时&#xff0c;控制台出现报错 &#xff0c;虽然不影响功能使用&#xff0c;但也不能坐视不管。解决 Vue 重复点击相同路由&#xff0c;出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 .报错内容&#…

Nginx部署前端静态网站详细教学(一步步操作)

前言 从零开始使用Xshell、Xftp、Nginx 简单部署静态网站&#xff0c;需准备云服务器(阿里云、腾讯云、华为云等都可) 一.下载安装Xshell和Xftp XShell 用于命令行操作服务器&#xff0c;Xftp 用于对服务器的文件上传和下载 官方下载地址&#xff1a;NetSarang Homepage CN - …

你评论,我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿

推荐&#xff1a; Python全栈白宝书专栏&#xff0c;免费阶段订阅数量4300&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;加入社区的小伙伴们&#xff0c;除了可以获取博主所有付费专栏的阅读权限之外&#xff0c;还有机会加入 星荐官共赢计划…

html网页调用后端python代码方法

当我们利用html代码制作网页时&#xff0c;可以用以下方法进行python代码的调用&#xff1a; 1.简单的python代码例如输出‘hello world’时,可以选择直接在网页写入python代码的方式调用&#xff0c;这时候我们就需要了解Pyscript了。以下是在网页里直接运行简易python语段的…

AJAX中的跨域(CORS) 问题 (更新于2023.02.04)

目录​​​​​​​ 预检请求 实例讲解 2023.02.04 更新 此文章在介绍跨域加载的同时&#xff0c;也解决了在使用axios.post()时如下跨域加载失败问题&#xff1a; from origin null has been blocked by CORS policy: Response to preflight request doesnt pass access c…

element-ui实现图片上传功能(前台部分)

文章目录前言一、 template 部分二、script部分1、导入token2、在data中注册以下3、method中的方法4、style前言 最近做的项目中需要实现图片上传功能&#xff0c;一开始也不懂&#xff0c;经过一段时间的学习后&#xff0c;终于实现了图片上传功能。我将分为前台与后台两部分…

vue 基于axios封装request接口请求——request.js文件

目录 了解几个Content-type类型 第一种&#xff1a;application/json;charsetUTF-8 第二种&#xff1a;multipart/form-data 第三种&#xff1a; application/x-www-form-urlencoded 第一步新建request.js文件 第二步新建services/apiUrl文件 第三步新建services/index.…

【前端】深入浅出缓存原理

缓存的基本原理 对于前端来说&#xff0c;缓存主要分为浏览器缓存&#xff08;比如 localStorage、sessionStorage、cookie等等&#xff09;以及http缓存&#xff0c;也是本文主要讲述的。 当然叫法也不一样&#xff0c;比如客户端缓存大概包括浏览器缓存和http缓存 所谓htt…

手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】

前端的那些基本标签&#x1f353;&#x1f353; 直角三角形&#x1f353;&#x1f353;文件扩展名&#x1f353;&#x1f353;分隔符&#x1f353;&#x1f353;单向绑定&#x1f353;&#x1f353;创建数组&#x1f353;&#x1f353;判断版本&#x1f353;&#x1f353;什么是…

四、nginx静态文件的配置

1. 根据上节内容的提示&#xff0c;我们知道如何进行nginx的信号控制和命令行控制了。 2. 这节主要是学习nginx的静态文件、缓存、静态文件压缩等相关内容。 一、 配置并访问nginx静态文件 1.1 root配置nginx静态文件地址 在nginx.conf 配置文件中默认使用root配置了nginx静态…

vue项目使用svg图片

&#xff08;svg-sprite-loader以及vue2-svg-icon的使用&#xff09; 第一种方式&#xff1a; 1、安装svg-sprite-loader npm install svg-sprite-loader --save-dev 2、webpack 配置&#xff08;build/webpack.base.conf.js&#xff09; { test: /\.svg$/, loader: svg-spr…

小程序表单校验uni-forms正确使用方式及避坑指南

小程序表单校验uni-forms正确使用方式及避坑指南一、前言二、成果展示三、uni-forms即时校验四、uni-forms自定义校验规则五、uni-forms异步校验六、完整示例源码七、最后&#xff0c;点个赞一、前言 小程序上使用表单理应是很常用&#xff0c;也很必须的功能&#xff0c;因为…

【微信小程序】自定义组件

组件的创建与引用 1.1、创建组件 &#xff08;1&#xff09;在项目的根目录中&#xff0c;鼠标右键&#xff0c;创建 components > test 文件夹 &#xff08;2&#xff09;在新建的 components > test 文件夹中&#xff0c;鼠标右键&#xff0c;点击“新建 Component” …

通过JavaScript、css、H5 实现简单的tab栏的切换和复用

目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 一、效果展示 二、实现的大致原理 1.我们先通过css 和h5布局得到最基本的tab栏样式&#xff08;有代码参考&#xff09; 2.在获得样式&#xff0c;给我们所需要点击的目标设…

yolov5部署+微信小程序前端展示

分为yolov5项目部署和微信小程序两部分&#xff0c;先介绍微信小程序前端展示flask后端&#xff0c;之后介绍项目部署这部分。 一、先上效果图 1. 点击选择图片&#xff0c;调用摄像头选择图片 2.选择图片之后&#xff0c;点击开始检测&#xff0c;然后返回结果 ​​​​​​…

CTF----Web真零基础入门

目录 前置知识导图&#xff1a; ​TCP/IP体系结构&#xff08;IP和端口&#xff09;&#xff1a; IP是什么&#xff1a;是计算机在互联网上的唯一标识&#xff08;坐标&#xff0c;代号&#xff09;&#xff0c;用于在互联网中寻找计算机。 内网&#xff08;局域网&#xf…

JSONP解决跨域问题

一、什么是同源 概念&#xff1a;如果两个页面的协议、域名和端口都相同&#xff0c;则这两个页面具有相同的源。 二、什么是同源策略 概念&#xff1a;是浏览器提供的一个安全功能。 三、什么是跨域 概念&#xff1a;同源指的是两个URL的协议、域名、端口号一致&#xff0c…