vue1+webpack实践

参考

vue-tutorial
Vue+Webpack 开发可复用的单页面富应用教程
Vue+Webpack 使用规范

对比其他框架

推荐代码使用 CommonJS 或 ES6 模块，然后使用 Webpack 或 Browserify 打包。

你可以使用 Webpack + vue-loader 或 Browserify + vueify 构建这些单文件 Vue 组件。

可以在 Webpackbin.com 上在线尝试！
chrome 开发工具 : vue-developertools

安装

我们将会使用 webpack 去为我们的模块打包，预处理，热加载。如果你对 webpack 不熟悉，它就是可以帮助我们把多个 js 文件打包为 1 个入口文件，并且可以达到按需加载。这就意味着，我们不用去担心由于太多的组件，导致了过多的 HTTP 请求，这是非常有益于产品体验的。但，我们并不只是为了这个而使用 webpack，我们需要用 webpack 去编译.vue 文件，如果没有使用一个 loader 去转换我们.vue 文件里的 style，js，html，那么浏览器就无法识别。
模块热加载是 webpack 的一个非常碉堡的特性，将会为我们的单页应用带来极大的便利。
通常来说，当我们修改了代码刷新页面，那应用里的所有状态就都没有了。这对于开发一个单页应用来说是非常痛苦的，因为需要重新在跑一遍流程。如果有模块热加载，当你修改了代码，你的代码会直接修改，页面并不会刷新，所以状态也会被保留。
Vue 也为我们提供了 CSS 预处理，所以我们可以选择在.vue 文件里写 LESS 或者 SASS 去代替原生 CSS。
我们过去通常需要使用 npm 下载一堆的依赖，但是现在我们可以选择 Vue-cli。这是一个 vue 生态系统中一个伟大创举。这意味着我们不需要手动构建我们的项目，而它就可以很快地为我们生成。

使用脚手架工具 vue-cli 可以快速地构建项目：单文件 Vue 组件，热加载，保存时检查代码，单元测试等。

安装 vue-cli (确保你有 node 和 npm)
1
$ npm install -g vue-cli

使用脚手架初始创建项目

1	$ vue init <template-name> <project-name>

Example:创建一个 webpack 项目

1	$ vue init webpack my-project

项目模版下载好了之后需要安装项目用到的依赖包
1
2
$ cd my-project
$ npm install
这时可以将项目运行起来看看效果了
1
$ npm run dev
这一行命令代表着它会去找到package.json的scripts对象，执行node bulid/dev-server.js。在这文件里，配置了 Webpack，会让它去编译项目文件，并且运行服务器，我们在localhost:8080即可查看我们的应用。

vue-cli 构建的目录结构

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig.js            # editor config
├── .eslintrc.js                # eslint config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

更多内容参照https://vuejs-templates.github.io/webpack

Vue 指令

常用指令:

v-if
v-show
v-else
v-for
v-bind
v-on
v-model
更多指令请移步Vue 指令

初始化（main.js)

对于单页应用，推荐使用官方库 vue-router。详细请查看它的文档。

添加 route 配置

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

import Hello from './components/Hello.vue'
import Page from './components/Page.vue'

//注册两个插件
Vue.use(VueResource)
Vue.use(VueRouter)

const router = new VueRouter()

// 路由map
router.map({
  '/hello': {
    component: Hello,
  },
  '/page': {
    component: Page,
  },
})

router.redirect({
  '*': '/hello',
})

router.start(App, '#app') //设置启动页面

index.html

1
2
3

<div id="app">
    <app></app>
</div>

应用 route

<template>
    <!-- 使用指令 v-link 进行导航。 -->
    <ul class="nav navbar-nav">
        <li><a v-link="{path: '/home'}">首页</a></li>
        <li><a v-link="{path: '/page'}">首页</a></li>
    </ul>
    <!-- 路由外链 -->
    <router-view></router-view>
</template>

创建＆应用组件

如果你喜欢预处理器，甚至可以这么做：

定义 View:

1
2
3

<template>
    <vue-component></vue-component>
</template>

定义 Model 和 ViewModel:

var vueComponent = require('../components/vue-component')
module.exports = {
  components: {
    vueComponent,
  },
}

数据请求:vue-resource

1
2
3

//在main.js中注册vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)

// 基于全局Vue对象使用http
Vue.http.get('//webapi.busi.inke.com/web/live_hotlist_pc', {}).then(
  response => {
    console.log('[Leo]Vue-resource:success=>', response)
  },
  response => {
    console.log('[Leo]Vue-resource:error=>', response)
  },
)
// 在一个Vue实例内使用$http
this.$http.get('//webapi.busi.inke.com/web/live_hotlist_pc', {}).then(
  response => {
    console.log('[Leo]Vue-resource:success=>', response)
  },
  response => {
    console.log('[Leo]Vue-resource:error=>', response)
  },
)