项目运行
首先要安装npm或者cnpm和node.js环境
在终端建立vue-cli项目,命令行cnpm install vue-cli -g //全局安装 vue-cli
查看vue-cli是否成功,不能检查vue-cli,需要检查vue 命令行vue list
下面建立项目名为webmusic新建vue项目 vue init webpack “项目名称”
创建好了,那就让项目先安装下依赖再运行一下,会出现下面的页面,操作指令是:cnpm install cnpm run dev
注意 这里要在webmusic下进行安装和运行!!!
最后打开终端npm run serve 就可以获得本地端口号啦
项目结构
dist文件夹是存放最终发布版本的代码,这就是dist文件夹的用处
1、build:构建脚本目录
1)build.js ==> 生产环境构建脚本;
2)utils.js ==> 构建相关工具方法;
3)webpack.base.conf.js ==> webpack基本配置;
4)webpack.dev.conf.js ==> webpack开发环境配置;
2、config:项目配置
1)dev.env.js ==> 开发环境变量;
2)index.js ==> 项目配置文件;
3、node_modules:npm 加载的项目依赖模块
4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;
2)components:组件目录,我们写的组件就放在这个目录里面;
3)router:前端路由,我们需要配置的路由路径写在index.js里面;
4)App.vue:根组件;
5)main.js:入口js文件;
5、static:静态资源目录,如图片、字体等。不会被webpack构建
6、index.html:首页入口文件,可以添加一些 meta 信息等
7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
8、README.md:项目的说明文档,markdown 格式
9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等
主页面文件里导入vue相关插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 导入 iconfont的字体图标 -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1654044_7fb6pz0mo1.css">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="app"></div>
if ( NODE_ENV === 'production' ) {
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.runtime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.6/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
</body>
</html>
制作网页头部和左边菜单栏
在第一步先创建top.vue 和 index.vue两个组件,然后在App.vue根组件上引入这两个组件 。下面这个是index.vue组件
<template>
<div class="index-container">
<div class="nav" >
<ul>
<li>
<router-link to="/discovery">
<span class="iconfont icon-find-music"></span>
发现音乐
</router-link>
</li>
<li>
<router-link to="/playlists">
<span class="iconfont icon-music-list"></span>
推荐歌单
</router-link>
</li>
<li>
<router-link to="/songs">
<span class="iconfont icon-music"></span>
最新音乐
</router-link>
</li>