1.项目文件的划分
- assets 负责防止一些静态资源,可以建立两个文件夹images和css分别放置图片和样式文件。
- common 放置一些当前项目用到的常量,例如封装防抖,节流函数,以及mixin混入的函数。
- components 负责放置一些组件 ,通常设置两个文件夹,第一个common,放置多个项目均能用到的组件,例如封装好的swiper轮播图组件,scroll组件等。 第二个文件夹content负责放置当前项目专享的组件,如backTop回到顶部等组件。
- network 放置网络请求相关配置,通常配置一个index,js以及所有view页对应的请求文件
- router 这个不多说了,放置所有的路由js文件
- store 放置vuex文件,通常会重构为index,js,actions.等js文件
- views 这个放置具体的每个页面的相应组件,通常或分为home,home页下存放属于专自己的组件homeChildComps。等
- App.vue
- main.js
2.css文件的引入
- 统一一下各个浏览器的不同规格(使用别人封装的normalize.css)
- 引入自己设置的base.css规定一些自己想要的样式等
3.配置路径别名(创建一个Vue.config文件)
- 为了放置组件复用拿到名字…/…/…/问题的出现
- 所以我们一般会给经常用到的项目文件配置别名方便查找
- 这个配置最终会和大的config文件求并集。
module.exports = {
// 配置别名
configureWebpack:{
resolve:{
// 解决路径相关问题
alias:{
//给src文件夹下配置别名
//其实内部已经为src配置了别名@
'assets':'@/assets',
'common':'@/common',
'components':'@/components',
'network':'@/network',
'views':'@/views',
}
}
}
}
4.封装必须的tabbar组件,预留插槽,实现复用。
5.修改项目小图标。
下一篇:Vue项目开发经验2
- network网络相关配置(封装axios,设置拦截响应和拦截请求)
- 数据的请求和存储,以及处理问题
- view页面组件的目录结构和使用的解析
- store页面的目录结构和文件抽离的解析