webpack2-vue2.png

初學習vue ——生產環境搭建

之前用angular+webpack搭建了一個前端項目,但是感覺angular有點落後了,趁着這段時間有空就抽出時間研究了一下vuevueangular大體差不多,所以很好上手,今天就和大家分享一下我的學習的知識。

這節只記錄最基礎的 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:

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0,maximum-scale=1.0">
    <meta  content="LinkedME 企業級深度鏈接服務" name="description">
    <meta content="LinkedME,深度鏈接,企業級深度鏈接服務,App拉活" name="keywords">
    <title>LinkedME - 企業級深度鏈接服務</title>
  </head>
  <body>

    <div id="app">{{ message }}</div>

    <script type="text/javascript" src="./dist/bundle.js"></script>

  </body>
</html>

這裏直接引入最終打包的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

著作權歸作者所有,轉載請聯繫作者獲得授權,並標註“簡書作者”。