vue_cli文件目录

在做vue项目，顺便把文件目录搞搞清楚

原文地址：https://www.jianshu.com/p/7006a663fb9f

1.bulid文件

webpack的相关配置，主要启动文件dev-server.js，当输入npm  run  dev 时，先启动dev-server.js,然后检查node以及npm的版本，加载配置文件，启动服务。

        build.js    生产环境的构建

        check-versions.js    版本检查（node和npm）

        dev-client.js    开发服务器的热重载（用于实现页面的自动刷新）

        dev-server.js    构建本地服务器（npm run dev即运行它）

        utils.js    构建相关工具

        vue-loder.conf.js    css加载器配置

        webpack.base.conf.js    webpack基础配置

        webpack.dev.conf.js    webpack开发环境配置

        webpack.prod.conf.js    webpack生产环境配置

2.config文件

vue基本配置文件（配置监听端口，打包输出路径以及命名）

        dev.env.js    项目开发环境配置

        index.js    项目主要配置（监听端口，打包路径）

        prod.env.js    项目生产环境配置

3.node_modules文件

项目依赖包，根据需求安装依赖包(加载外部css安装css-loader，路由跳转vue-loader)；安装插件，vuex（基于WEUI的移动端组件库），vue-swiper(轮播插件)

4.src文件

项目核心文件

        assets    静态资源（iconfont字体，js外部文件，css文件）

        components    公共组件

        router    配置项目路由;index.js为配置文件

        App.vue    根组件，由三部分组成：模板（template）  js（script） css样式（style）；

               模板中只能包含一个父节点，<router-view></router-view>是子路由视图，后面的路由页面显示在此处，<router-view>类似于插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示；

               script通常用es6写，用export default导出，包含数据data，生命周期（mounted），方法（methods）；

               style默认是全局样式，定义只在某个组件下起作用，需在标签上添加scoped，<style scoped></style>，引入外部css，安装css-loader依赖包（npm install css-loader）,import引入css文件

        main.js    入口文件，引入vue框架，根组件以及路由设置，定义vue实例（引入根组件App.vue     new Vue（{ components:{App}}））

5.static文件

静态文件资源，存放图片类资源

6..babelrc

babel编译参数

7..editorconfig

代码格式

8..gitgnore

git上传需要忽略的文件配置

9..postcssrc.js

转换css的工具

10.index.html

主页，只定义一个空的根节点，在main.js定义的实例挂载到根结点下，内部通过vue组件填充

11.package.json

项目基本信息（创建vue-cli项目后自动生成）

12.README.md

项目说明