目录
㋀㋊
◆ 复制百度网盘中最简单的vue模板【没有vue语法】header.vue
◆ 因为已经引入了static静态文件，此时我的音乐image效果图就显示出来了，如图所示：
扫描二维码关注公众号，回复：
8542940 查看本文章
✎ 项目实战
❶ 静态资源引入、项目初始化
◆ 百度网盘样式资料
music里面css样式等样式，直接取不需要再编写了！！百度网盘链接
◆ 项目初始化和环境搭建
▼ 创建my-music vue项目
>vue init webpack
Generate project incurrent directory? yes
A newer version of vue-cli is availabled.
.....
PS：除了路由是yes，别的都是no
▼ package.json 和 static 覆盖
将百度云的package.json覆盖新建项目的package.json，并且重新安装一下依赖包，进入项目文件夹执行npm install，static静态资源同理操作。
▼ npm run dev
将如果跑起来还是有问题，则将music百度网盘中node_modules依赖全部复制到新创建的项目中！
❷ 将第一个组件引入到App.vue
◆ 复制百度网盘中最简单的vue模板【没有vue语法】header.vue
◆ header.vue添加到App.vue里面到
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view />
<m-header></m-header><!-- 3.添加组件,m-header就是from最后.vue前面的名字 -->
</div>
</template>
<script>
import MHeader from './components/m-header' // 1.添加 m-head.vue
export default {
name: 'App',
components: { // 2.添加component,MHeader 就是import取的名字
MHeader
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
◆ 因为已经引入了static静态文件，此时我的音乐image效果图就显示出来了，如图所示：
◆ 把之前的vue自带的一些东西去掉
◆ 样式重置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-music</title>
<style type="text/css">
html,
body {
margin: 0;
}
</style>
</head>
<body>
.....