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这个目录下的文件
