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会将此配置和本身的配置文件进行合并。

配置文件如下：

module.exports={
  configureWebpack:{
    resolve:{
      // extensions:[] 配置文件后缀
      alias:{
        'assets':'@/assets',
        'commonjs':'@/commonjs',
        'components':'@/components',
        'network':'@/network',
        'views':'@/views',
        // 'store':'@/store',
        // 'router':'@/router',
      }
    }
  }
}

 

三、其他配置文件

.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

 

 

 

 

 

后续再更新这个文档