Vuejs学习笔记(四)-2.创建项目划分目录结构
使用vuecli3的命令vue create shopmall创建项目后,需要划分项目目录结构。主要是src下的目录
一、创建目录结构
1.assets 资源下放置静态资源,如img/ css/
src/assets/img/ img文件
src/assets/css/ css文件,其中是用到normalize.css初始文件,https://github.com/necolas/normalize.css
2.src/components/ 公共组件
src/components/common 抽出来的组件可以用到其他项目中
src/components/content 与当前业务相关的公共组件
3.src/views 与业务相关的组件
src/views/ home
src/views/category
4.commonjs 公共的js
5.network 与网络相关
6.router 与路由相关
7.store 与vuex相关,状态管理
二、配置别名
在项目根目录创建vue.config.js文件,配置项目别名。配置完后,vuecli3会将此配置和本身的配置文件进行合并。
配置文件如下:
1 module.exports={ 2 configureWebpack:{ 3 resolve:{ 4 // extensions:[] 配置文件后缀 5 alias:{ 6 'assets':'@/assets', 7 'commonjs':'@/commonjs', 8 'components':'@/components', 9 'network':'@/network', 10 'views':'@/views', 11 // 'store':'@/store', 12 // 'router':'@/router', 13 } 14 } 15 } 16 }
三、其他配置文件
.editorconfig vuecli3没有这个文件,但是如果多人开发项目,而又要保持项目统一编码风格的话,可以去vuecli2项目中拷贝一个过来。
root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
后续再更新这个文档
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14962593.html