vue学习：webpack+vue（一）

webpack2-vue2.png

初学习vue ——生产环境搭建

之前用angular+webpack搭建了一个前端项目，但是感觉angular有点落后了，趁着这段时间有空就抽出时间研究了一下vue，vue和angular大体差不多，所以很好上手，今天就和大家分享一下我的学习的知识。

这节只记录最基础的 Hello Vue!

1.因为我们需要使用webpack所以首先安装webpack：

npm install --global webpack

然后配置一下webpack.config.js:

const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
entry: './app/app.js',
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: "./dist/"
},
module: {
  rules: [
    {
      test: /\.(js|jsx)$/, 
      use: 'babel-loader'
    },
  
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    },

    {
      test: /\.(png|jpg|jpeg|gif|woff)$/, 
      use: 'url-loader?limit=4192&name=[name].[ext]' 
    },

  ]
},
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
},
plugins:[
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      })
  ]
  };

  module.exports = config;

由于之前文章对webpack配置有过详细说明，这里就不再多说。
文章：http://www.jianshu.com/p/8c102411e774

入口页面index.html:



  
    
    
    
    
    LinkedME - 企业级深度链接服务
  
  

    {{ message }}

这里直接引入最终打包的js文件，暂时打包成一个js了，看网上说其实可以将bundle.js 分开进行打包，这里暂不进行介绍，后面遇到再说。

vue的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，比angular方便了很多。

然后咱们继续，js入口文件：app.js

const Vue = require('vue')
require('./css/style.css')
require('./index.js')(Vue)

这里把将vue 定义了一个常量，可以直接传给其他js模块：index.js

module.exports = function(Vue){

var v = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
})

}

这里可以我是这样写的，后面也许会修改，暂时这样也可以跑起来，只是介于跑起来的样子，后面慢慢学习慢慢改正吧！

让我们尝试跑一下项目吧？

使用npm安装一个本地服务 http-server
然后webpack --watch
在地址栏输入 http://127.0.0.1:8080/

hello vue.png

项目地址：https://github.com/wangbaogui123/webpack2-vue2/tree/w-v1.01

文／奔跑的攻城狮（作者）

原文链接：http://www.jianshu.com/p/468a69ac2fc4

著作权归作者所有，转载请联系作者获得授权，并标注“作者”。

vue学习：webpack+vue（一）

你可能感兴趣的:(vue学习：webpack+vue（一）)