Vue-cli

Vue-cli 是 Vue 官方提供的工具，用于快速生成前端开发的脚手架。 结合了Webpack可以方便的进行打包，并且配置好了babel loader， 可以方便的使用ES6

安装

• npm install -g vue-cli

• vue init webpack client

• cd client

• npm run

  vue_cli_init_project.png

• cd client

• npm run dev ==> 浏览器打开localhost:8080(默认)

  vue_init_demo.png

• npm run build ==> 自动打包资源到 client/dist 目录下

关于页面和组件

使用 Vue 构建的应用程序，应该把页面上的所有的东西当作组件，包括页面也是组件。

组件

• header， footer, menubar, button ... 都是组件
• 一个组件可以包含另一个（多个）组件， 例如 header 里面包含 menu 组件
• 父组件通过传递 props 跟子组件通信，而子组件通过emit event 跟父组件通信

页面

• 页面也可以看出是一个组件，一个大的组件，用于承载更多其他组件， 才最终呈现出一个页面
• 页面怎么跳转依赖路由的配置

目录讲解

build, config

• 这两个目录基本都是 webpack 和环境的配置， 基本上不用怎么动

dist

• npm run build 会把打包的文件放到 dist 目录
• 包括 css, js ... 以及/static 下面的资源（图片等）

src

• assets 静态资源目录， 可以在代码里面有通过相对路径来引用， 这些资源会被 webpack 打包，成为代码的一部分
• components 组件目录，所有的组件、页面都写在这里面，根据不同业务再继续细分目录
• router 前端路由目录，根据路由的配置来跳转到别的页面组件
• store vuex 的目录，存储全局状态
• main.js 和 App.vue， main.js 是Vue 的主入口，里面会渲染App.vue

static

• 真实的静态资源目录
• 这里面的静态资源会被原封不动的打包（复制）到最终的打包目录 dist 下
• 可以通过绝对路径来引用static 下面的资源， 如 /static/[filename]!