在开始一个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