Vue项目开发经验1

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页面的目录结构和文件抽离的解析