vue 开发目录结构实践分析

# src 代码目录
    #assets 静态资源
         #font 字体图标
         #index.less 公共样式
         #variable.less公共变量
         #其他图片文件
    #components 组件
        #ripple 点击效果插件
        #loader-picker.vue 加载提示组件
    #router 路由
        #index.js 路由文件
            const index = r => require(['../views/index'], r)
            const index = r => require.ensure([], () => r(require('../views/index')), 'index')  建议使用,异步模块化加载,最后面的index参数同名的会打包成同个chunk文件

             base:'root', 配置项目的根文件路径名
             mode:'history',  模式,history表示不会使用?号这种模式
     #store 状态管理及api
        #modules 状态模块
            #index.js 导出所有的模块
            #其他文件  其他模块 (可参考项目写法?)
                1.import 导入依赖
                2.const state 声明状态
                3.const mutations 声明mutations
                4.const actions  声明actions
                5.export 导出去
        #api.js 接口api
            1.全局配置request和response拦截器
            2.定义api接口
        #index.js 初始化vuex
            1.strict 严格模式
            在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
            2.plugins 插件 (可查看:https://vuex.vuejs.org/zh/guide/plugins.html)
            Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,它接收 store 作为唯一参数。

      #util 工具及一些公共方法
        #common.js 公共方法
        #store.js 封装了localStorage、sessionStorage
      #views 页面
        <template></template> 结构
        <script> js
            name:'',
            mixins: [], mixins,会先执行,共用state,methods 等
            computed:{}, 计算属性
            .
            ..
        </script>
        <style scoped="scoped" lang="less"></style> 样式
      #App.vue 页面共用页面
        都具有和页面属性功能。
        1.页面跳转动画
        2.首页要请求的接口
      #config.js 一些配置及api接口路径
        注意区分不同的环境域名不一样。
      #main.js 项目要全局使用的库及初始化的一些工作
        1.全局使用的组件
        Vue.component('loader-picker', LoaderPicker)
        2.全局使用的过滤器
        Vue.filter("dateFormat", dateFormat)
        3.初始化vue,store、router...
#index.html 项目入口
    一些配置。

猜你喜欢

转载自blog.csdn.net/bbsyi/article/details/81631604