1

这个项目我们用vue-cli搭建,怎么安装它和怎么配置node文件就不介绍了。

我们在命令行中输入vue init webpack musicPlayer来初始化这个项目,然后它就回去github上拉模板

cli

接下来会出现很多选项

选项

我们这边不需要单元测试,但是需要esLint来限制我们的代码。接下来耐心等待它下载好

2

接下来我们来看看这个项目的目录架构

目录

api这个目录是我们用来跟后台请求的代码。
base目录是用来放一些通用的组件,在很多业务组件中复用的组件。

base

common是一些通用的资源,像一些通用的js库,img,和font

common

components就是组件目录,router用来存放vue-router相关,store用来存放vuex相关

App.vue是最高的父组件用来渲染整个页面,index.html就是入口文件。那main.js就是整个js的入口文件,在这里调用vue的各种插件

main.js

3

在build文件夹中对weback.base.conf.js进行配置,我们可以简化之后的操作。这里举个别名的例子

webpack.conf

在resolve中的alias设定下面的对象,当你用npm run dev的时候,如果webpack碰到了 common它就会自动检索src/common这个目录下的文件