因为看到这位作者写得非常清楚,忍不住转载了。
一个典型的项目结构
项目结构说明
- 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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。