机遇屋-精心整理的初始化vue项目结构介绍

精心整理的初始化vue项目结构介绍

作者：ych

### 创建项目后文件目录如下：
```
├── node_modules          # 第三方依赖包
├── public                # piblic属于用于存放公共js文件夹，在index.html中用script标签引入
├── src                   # 开发的主文件目录
├── .browserslistrc       # 配置兼容浏览器
├── .editorconfig         # 配置文件以及编码等信息
├── .eslintrc.js          # ESlint的语法检测
├── .gitignore            # git忽略文件设置
├── babel.config.js       # Babel是一个JS编译器，主要作用是将ECMAScript 2015+ 版本的代码，Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel，将ES6转换为ES5。
├── package-lock.json     # 文件锁定所有模块的版本号，包括主模块和所有依赖子模块
├── package.json          # 记录项目中所需要的所有模块
└── README.md             # 工程的说明文件
```

#### public
```
└── public
    ├── favicon.ico       # 我们网址部分的ico图标
    └── index.html        # 总的入口文件，vue是单页面应用，挂在id为app的div下然后动态渲染路由模板，通过html-webpack-plugin插件读取模板(index.html)，进行模板绑定之后再输出到outut目录的index.html
```

#### src
```
├── main.js               # 从上到下的执行的项目入口js文件，影响全局，引入全局使用的库、公共的样式和方法、设置路由等。
├── App.vue               # 入口组件，页面的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；
├── views                 # 路由组件
├── store                 # vuex（仓库）
├── router                # 路由配置
├── components            # 非路由组件
└── assets                # 静态资源(图片，js，css）
```

##### views
```
└── views
    ├── About.vue       # 路由组件页面1
    └── Home.vue        # 路由组件页面2
```

##### store
```
└── store
    └── index.js        # 我们组装模块并导出 store 的地方
```

##### router
```
└── router
    └── index.js        # 路径页面的导航设置文件
```

##### components
```
└── components
    └── HelloWorld.vue        # 公用的组件
```

##### assets
```
└── assets
    └── logo.png         # 网站logo图片
```

评论区

先去登录

精心整理的初始化vue项目结构介绍

相关推荐

评论区