Xiaopei's DokuWiki

These are the good times in your life,
so put on a smile and it'll be alright

User Tools

Site Tools


it:javascript:vue

Table of Contents

vue.js

其他

  • vuejs/vue-loader vue 的 webpack loader
    • 支持如下写 vue component
      // app.vue
      <style>
        .red {
          color: #f00;
        }
      </style>
       
      <template>
        <h1 class="red">{{msg}}</h1>
      </template>
       
      <script>
        module.exports = {
          data: function () {
            return {
              msg: 'Hello world!'
            }
          }
        }
      </script>
    • 在 webpack.config.js 按此配置 loader 后 { test: /\.vue$/, loader: “vue-loader” }
    • 就能如下使用了
      // main.js
      var Vue = require('vue')
      var appOptions = require('./app.vue')
      var app = new Vue(appOptions).$mount('#app')

webpack

使用 CommonJs 的写法,管理所有前端资源,其中非 js 的部分能通过各种 loader 解析。

module.exports = {
    entry: "./entry.js",  // 源码入口
    output: {
        path: __dirname,       // 输出目录
        filename: "bundle.js"  // 输出文件
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
            // 符合 test 的 require,需要用 loader 解析
        ]
    }
};
it/javascript/vue.txt · Last modified: 2015/08/28 01:58 by admin