利用webpack和vue.js构建单网页应用初级探究


最近准备改写adminLTE成vue.js+webpack的单网页应用,然后用到项目中,首先Google了一下,大概思路就是利用webpack打包应用,vue-router作路由,vue.js实现view层,(由于vue.js不像angular.js那样可以承包MVVM模式的所有角色,它只能实现view层)。不得不说vue.js真是个轻量级的框架,只用了一天就差不多掌握了大部分内容,构建中小型应用真的是首选框架啊!angular.js这种重量型框架学起来还真费时,不过也已经着手准备应用在下下个项目中了~,这边文章,先来讲一下webpack最基本的配置应用。

blob.png


  • 新建项目

$ mkdir adminLTE 

$ cd adminLTE 

$ npm init 

 这个时候根据提示填入参数就可以 自动生成package.json配置文件了。


  • 安装webpack和依赖

    # 全局安装webpack,webpack-dev-server

    $ npm install -g webpack $ npm install -g webpack-dev-server

    # 为项目安装其他依赖

    $ npm i webpack-merge css-loader style-loader jsx-loader file-loader url-loader  vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

    package.json配置文件如下

{
  "name": "adminlte",
  "version": "1.0.0",
  "description": "the adminLTE power by vue.js,developed by xixi on 2016/02/03",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "vue.js"
  ],
  "author": "xixi",
  "license": "UNLICENSED",
  "devDependencies": {
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue": "^2.1.10",
    "vue-hot-reload-api": "^2.0.8",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^10.2.3",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^1.14.0",
    "webpack-merge": "^2.6.1"
  }
}


  • 在根目录新建webpack.config.js配置文件

  • var path = require('path');
    module.exports = {
        entry: './src/main.js',
        //定义webpack输出文件
        output: {
            path: './dist',
            publicPath: 'dist/',
            filename: 'build.js'
        }
        ,
        module: {
            loaders: [
                { test: /\.css$/, loader: 'style-loader!css-loader' },
                { test: /\.js$/, loader: 'jsx-loader?harmony' },
                { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
                { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            ]
        },
        //默认 NPM 包导出的是 运行时 构建。为了使用独立构建,在 webpack 配置中添加下面的别名:
        //(见:http://cn.vuejs.org/v2/guide/installation.html#独立构建-vs-运行时构建)
        //不添加会报错
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.common.js'
            }
        }
    }
  • 在根目录新建index.html

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
    <title>测试一下!</title></head>
<body>    
    <div id="xx">{{message}}</div>    
    <script src="dist/build.js"></script>
</body>
</html>


  • 新建./src/main.js文件

var Vue = require('vue');
var app = new Vue({    
    el:'#xx',    
    data:{        
       message:'test success!'    
   }
});


完成后在命令中运行

$ webpack


本文 暂无 评论

Top