一,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/#/可以看到如下图所示,说明脚手架搭建完成。

目录如下

 |——build                             //构建              

 |——config                            //配置

 |——node_modules                      //npm项目依赖

 |——src
|——assets //静态资源,图片
|
|——components—— //公共组件
|
|——router—— //路由
| |——index.js
|——app.vue //主文件
|
|——main.js //主文件入口
|——static |——test //单元测试 |——index.html //首页 |——package.json |——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的使用》

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

  1. 《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

    CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + ...

  2. Flutter仿网易云音乐:播放界面

    写在前头 本来是要做一个仿网易云音乐的flutter项目,但是因为最近事情比较多,项目周期跨度会比较长,因此分几个步骤来完成.这是仿网易云音乐项目系列文章的第一篇.没有完全照搬网易云音乐的UI,借鉴了 ...

  3. C# WPF 低仿网易云音乐(PC)Banner动画控件

    原文:C# WPF 低仿网易云音乐(PC)Banner动画控件 由于技术有限没能做到一模一样的动画,只是粗略地做了一下.动画有点生硬,还有就是没做出网易云音乐的立体感.代码非常简单粗暴,而且我也写有很 ...

  4. C# WPF 低仿网易云音乐(PC)歌词控件

    原文:C# WPF 低仿网易云音乐(PC)歌词控件 提醒:本篇博客记录了修改的过程,废话比较多,需要项目源码和看演示效果的直接拉到文章最底部~ 网易云音乐获取歌词的api地址 http://music ...

  5. 新鲜出炉高仿网易云音乐 APP

    我的引语 晚上好,我是吴小龙同学,我的公众号「一分钟GitHub」会推荐 GitHub 上好玩的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注我. 项目中成长是最快的,如何成长,就 ...

  6. 瓣呀,一个基于豆瓣api仿网易云音乐的开源项目

    整体采用material design 风格,本人是网易云音乐的粉丝,所以界面模仿了网页云音乐,另外,项目中尽量使用了5.0之后的新控件. 项目整体采用mvp+rxjava+retrofit 框架,使 ...

  7. 用vuejs仿网易云音乐(实现听歌以及搜索功能)

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用 ...

  8. android仿网易云音乐引导页、仿书旗小说Flutter版、ViewPager切换、爆炸菜单、风扇叶片效果等源码

    Android精选源码 复现网易云音乐引导页效果 高仿书旗小说 Flutter版,支持iOS.Android Android Srt和Ass字幕解析器 Material Design ViewPage ...

  9. WPF仿网易云音乐系列(序)

    1.简介 由于之前做了一个播放器,苦于不懂界面设计,只得去借鉴借鉴一些成功的作品,网易云音乐就甚合朕心,哈哈,最后做出来的效果如下: 本系列文章就来和大家讨论以下,如何用WPF去仿制一个网易云音乐来: ...

随机推荐

  1. git command line 提交代码

    echo "# spring-boot-apollo-demo" >> README.md git init git add README.md git commit ...

  2. 目标检测之faster-RCNN和FPN

    今年(2017年第一季度),何凯明大神出了一篇文章,叫做fpn,全称是:feature pyramid network for object Detection,为什么发这篇文章,根据 我现在了解到的 ...

  3. java.lang.RuntimeException: Canvas: trying to draw too large(203212800bytes) bitmap.

    https://www.cnblogs.com/spring87/p/7645625.html 今天我师父发现了一个问题:在更换登录页图片后,更新版本,部分手机打开会闪退.借了一个三星手机后,查看问题 ...

  4. OpenStack 安装:基本环境准备

    刚刚学完openstack,这几篇文章就算对过去课程的一个总结吧. 首先说说基本的结构:在一台Dell的workstation上面安装了VMware,在VMware上面安装两台CentOS,现在给每台 ...

  5. 大数据入门到精通6---spark rdd reduce by key 的使用方法

    1.前期数据准备(同之前的章节) val collegesRdd= sc.textFile("/user/hdfs/CollegeNavigator.csv")val header ...

  6. 20175314 实验一 Java开发环境的熟悉

    20175314 实验一 Java开发环境的熟悉 一.实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA 编辑.编译.运行.调试Java程序. 3.完成实验,撰写实验报告,注意实 ...

  7. SSM框架整合思想

    -------------------siwuxie095                                 SSM 框架整合思想         1.SSM 框架,即 SpringMV ...

  8. Failed to decode downloaded font

    碰到如下错误,该错误是开启layui的打印.导出.筛选列时出现的,不能正常显示图标及文字 原因: @参考文章 因为经过maven的filter,会破坏font文件的二进制文件格式,到时前台解析出错 解 ...

  9. 交叉编译sudo

    编译Sudo version 1.8.6p7下载路径:https://www.sudo.ws/news.html 1.交叉编译 # tar -xvf sudo-1.8.6p7.tar.gz # cd ...

  10. centos 7 vim 保存文件 root 权限 及 使用

    vim打开文件时,没有用root账户,保存时才发现需要root权限.办法是在vim执行一下命令: :w !sudo tee % 未完待续