vue+webpack项目结构简述（转载）

因为看到这位作者写得非常清楚，忍不住转载了。
一个典型的项目结构

项目结构说明

• main.js
  
  • 声明 Vue 项目的依赖。
  • 声明 Vue 项目的入口（ DOM 挂载点）
  • Vue 插件的基本设置。
• router.js
  
  • 配置路由规则
• 关于 CSS 的一些说明
  
  • 业务型 CSS：单独写成 CSS 文件，并放在 styles 目录内。
  • 局部 CSS：写在组件模板内，在<style>标签上加上 scoped 以锁定作用域。如果需要用到全局 CSS，使用 @import 引入。
  • 功能型 CSS（比如 transition 相关的配置）：和组件放在一起。

Webpack 配置

• webpack.base.config
  
  • 指定应用程序入口 entry
  • 指定打包出口 output
  • 指定模板 module，指定加载器 loaders
  • 如果使用了 babel, 配置 babel
  • 配置解析器 resolve
  • 声明 plugins
• webpack.dev.config
  
  • 配置各种插件在开发环境下的参数
  • 设置热加载路径 / 热加载规则
• webpack.prod.config
  
  • 配置各种插件在生产环境下的参数

Vue SPA 模板

传送门：iView Project (基于 Vue.js 1.0)
传送门：vue-cli

npm 相关配置
- 使用 webpack-dev-server 动态刷新。

// scripts:
"dev": "webpack-dev-server --port 8088 --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js",

补充：SPA 实现 Router 的两种方式

• 利用 URL 的 hash，即锚点( # )，JavaScript 通过 hashChange 事件监听 URL 的改变（在 IE7
  下使用轮询）。

• HTML5 的 History 模式。（要服务端做相关配置）

作者：云之外
链接：https://www.jianshu.com/p/c42c0d383710
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。