vue-cli项目结构详解

使用vue-cli 搭建项目之后生成的项目目录如下：

• build: 中配置了webpack的基本配置、开发环境配置、生产环境配置等(都已经配置好，一般不需要再进行配置)，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。
  
  • build.js: 生产环境构建
  • check-versions.js: 版本检查(node,npm)
  • utils.js: 构建相关工具
  • vue-loader.conf.js: css加载配置
  • webpack.base.conf.js: webpack基础配置
  • webpack.dev.conf.js: webpack开发环境配置
  • webpack.prod.conf.js: webpack生产环境配置
• config:主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等
  
  • dev.env.js: 项目开发环境配置
  • index.js: 项目主要配置（主要包括监听端口、打包路径等）
  • prod.env.js: 项目生产环境配置
• dist: 是打包上线，执行了 npm run build 命令，之后产生的打包文件
• node_modules: npm 加载的项目依赖模块
  
  • node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。
  • 在两种情况下我们会自己去安装依赖：
    
    • （1）项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等（安装方法示例：npm install css-loader）
    • （2）安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件）
  • 注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install [email protected]
• src: 项目核心文件（开发的代码基本都在这个目录下进行操作）
  
  • assets: 放置一些静态资源（样式类文件，如css,less,sass以及一些外部js文件）
  • components: 公共的组建
  • router: 路由，配置项目路由
    
    • index.js: 路由配置文件
  • App.vue: 是我们的跟组件。
    
    • 所有页面都是在App.vue下面进行切换的，可以理解为所有的组件都是App.vue的子组件，我们可以把头部和底部及每个页面都出现的内容放在App.vue里面。
    • 一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)
  • main.js: 入口文件，主要是引入vue框架，根组件及路由设置，并且定义vue实例。
• static: 静态资源目录，如图片、字体等。
• .babelrc: babel编译参数
• .editorconfig: 代码格式
• .gitignore: git上传需要忽略的文件配置
• .postcssrc.js: 转换css的工具
• index.html: 主页。
  
  • index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充
• package.json: 项目的基本信息（在创建vue-cli项目后自动生成）
• package-lock.json: 在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
• README.md: 项目说明