【Vue配置】初始化之项目的目录结构构建(配置别名alias)

在开始一个Vue项目开发前一个清晰的项目结构, 是作为一个开发者的必备技巧;

今天我们就开始来构建一个项目的初始化目录吧

首先利用Vue cli ,vue create new project ;

这里建议对于初学者可以先用一个最简单的模式进入文件夹;
后续再配置需要的插件之类的;

---

初始的文件大致如此;

这里的.editorconfig 是声明一些自己写代码的规划,可以方便与他人的协作;
一般可以这样写,这是看个人需求而定

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

而vue.config.js 是用来配置路径别名,方便组件的路径引入;
配置如下; extensions 可以用来省略引入时的后缀; alias就是别名的意思

module.exports={
    configureWebpack:{
        resolve:{
            extensions:[],
            // 配置好别名
            alias:{
                "@":"src",
                "assets":"@/assets",
                "common":"@/common",
                "components":"@/components",
                "network":"@/network",
                "view":"@/view",
                
            }

        }
    }

}

跨域配置:

module.exports={
    configureWebpack:{
        resolve:{
            extensions:['.js','.css', '.vue'],
            alias:{
                'assets':'@/assets',
                'components':'@/components',
                'routers':'@/routers',
                'stores':'@/stores',
                'views':'@/views',
                'network':'@/network'
    
    
            }
    

        }
       
    },

    devServer:{
        proxy:{
            // 代理的
            '/api':{
                target:'http://39.97.33.178',
                changeOrigin:true,
                // pathRewrite:{
                //     '^/api':''

                // }
                
            }
        }

    }

}

接下来我们需要构建的就是src中的文件了,对于public 一般不做改动;

src 为静态资源文件,也是我们vue组件存放的地方;
一个很好的细分可以达到我们组件的多次复用,甚至在以后的项目中,都能发挥出作用;

–>assets 存放静态的img css js 文件,所以我们可以先在此目录下建立这三个文件;

–>components,下面又可以细分下common 与content 这两个文件夹
这里为什么需要两个文件呢,这里是为了进一步的细分,common中为划分的小组件,例如导航,nav header 之类的, 而content自然就是内容组件这一部分复用性没有common的多

–>router 可以用于我们路由各种出入,这里存放的文件一般就是一个index.js,控制路由即可

–>network 自然是为数据的交互,放在最外层的东西;

–>view 为更加大型的页面,就如 home Proflie about 等主页面组件,是由小组件的集合封装;

–>store ,为Vuex 的存放文件 ,用于数据的跨域;

这样一个项目的前期工作算是准备好了;
目录树的大致如果所示;

─src
│ App.vue
│ main.js
│
├─assets
│ │
│ │
│ ├─css
│ │ base.css
│ │ normalize.css
│ │
│ └─img
│
│
│
├─common
│ const.js
│ utlie.js
│
├─components
│ │
│ ├─common
│ │ └─
│ │
│ └─content
├─network
├─router
│ index.js
│
├─store
└─view
├─category
└─home