初學習vue ——生產(chǎn)環(huán)境搭建
之前用angular+webpack搭建了一個前端項目谷誓，但是感覺angular有點落后了癞埠，趁著這段時間有空就抽出時間研究了一下vue橡卤，vue和angular大體差不多肝劲，所以很好上手葵蒂，今天就和大家分享一下我的學習的知識梁沧。
這節(jié)只記錄最基礎(chǔ)的 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.reibang.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 企業(yè)級深度鏈接服務(wù)" name="description">
<meta content="LinkedME廷支，深度鏈接频鉴，企業(yè)級深度鏈接服務(wù)，App拉活" name="keywords">
<title>LinkedME - 企業(yè)級深度鏈接服務(wù)</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
這里直接引入最終打包的js文件恋拍，暫時打包成一個js了垛孔，看網(wǎng)上說其實可以將bundle.js 分開進行打包，這里暫不進行介紹施敢，后面遇到再說周荐。
vue的核心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM，比angular方便了很多僵娃。
然后咱們繼續(xù)概作，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安裝一個本地服務(wù) http-server
然后webpack --watch
在地址欄輸入 http://127.0.0.1:8080/
項目地址：https://github.com/wangbaogui123/webpack2-vue2/tree/w-v1.01
? 著作權(quán)歸作者所有
文／奔跑的攻城獅（簡書作者）
原文鏈接：http://www.reibang.com/p/468a69ac2fc4
著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)集绰，并標注“簡書作者”规辱。
