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:
<!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
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
网友评论