用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目

一，vue-cli环境搭建

1，全局安装webpack

npm install webpack -g

2，安装vue脚手架

npm install vue-cli -g

3，新建一个新的project，终端定位到该项目下

4，初始化项目

vue init webpack-simple

会让你进行该项目的一些基本设置，如下图

5，安装项目依赖

npm install

6，启动项目

npm run dev

可以看到终端提示成功

在浏览器上打开localhost:8080/#/可以看到如下图所示，说明脚手架搭建完成。

目录如下

 1 |——build                             //构建
 2
 3 |——config                            //配置
 4
 5 |——node_modules                      //npm项目依赖
 6
 7 |——src
 8     |——assets                        //静态资源，图片
 9 |
10     |——components——                  //公共组件
11 |
12     |——router——                     //路由
13 |             |——index.js
14     |——app.vue                      //主文件
15 |
16     |——main.js                      //主文件入口
17 |——static
18
19 |——test                             //单元测试
20
21 |——index.html                       //首页
22
23 |——package.json
24
25 |——README.md

二，技术栈

1，vue-router进行路由跳转

　　（1），首先要写在实例上注册路由，在main.js上如图

　　（2），在组件app上定义（页面实现）

　　定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。<router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去，如：<router-link to="/home">Home</router-link>

　　（3），在router->index.js中配置路由（注意：记得先引进再配置），其中redirect是链接直接指向的方向（重定向）

　　（3），执行过程

　　当用户点击 router-link 标签时，会去寻找它的 to 属性，它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件，最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现是基于hash 实现的。

2，Vuex管理数据状态

　　vuex是一个专门为vue.js设计的集中式状态管理架构。具体使用可以看我另一边文章《vuex的使用》

转载于:https://www.cnblogs.com/wxw1314/p/8686257.html

用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目相关推荐

移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
毕业设计：基于Springboot + Vue仿网易云音乐网站（一）开源
项目背景最近自学了springboot.vue.redis等技术,为了巩固,决定自己做个小网站玩玩,把学到的东西都使用一下,因为自己比较喜欢听音乐,去年一年网易云就听了1800个小时,然后也喜欢周杰 ...
计算机毕业设计Node.js+Vue安卓仿网易云音乐客户端APP(程序+源码+LW+部署)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
高仿网易云音乐(vue实战项目)
高仿网易云音乐(Vue实战项目)
基于vue的高仿网易云音乐网站，实现大多数功能
文章目录前言项目演示地址线上地址项目仓库总结前言基于Vue + Vue-Router + Vuex + axios + elementui,ui参考网易云音乐,后端接口使用网易云音乐接口 ...
Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
仿网易云音乐（微信小程序版）
项目部分截图(Gif) 前言前一阵子学习了微信小程序,为了巩固所学的知识和提高实战经验,决定自己手撸一款小程序.因为听歌一直在用网易云音乐,所以突发奇想就做一款仿网易云音乐的小程序吧!开发中遇到了很 ...
计算机毕业设计PHP+安卓仿网易云音乐客户端APP(源码+程序+lw+远程调试)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: phpStudy+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vu ...

用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目

用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目相关推荐

最新文章

热门文章