webpack + Vue 入门
2017-04-03 本文已影响0人
Mjericho
webpack + Vue 入门
Webpack
新建一个项目目录，名为 myapp, 并对其进行初始化。
mkdir myapp
cd myapp
npm init
新建项目目录，并新建 webpack.config.js 文件
touch index.html
mkdir src
touch index.html
cd ../
touch webpack.config.js
npm install -g webpack
index.html 的内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Example</title>
</head>
<body>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>
在 config.js 中添加下面内容，用来安装本地库
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"webpack": "^1.12.2"
}
配置 webpack.config.js
module.exports = {
entry:'./src/main.js',
output:{
path:__dirname+'./dist',
publicPath: 'dist/',
filename:'build.js'
},
module :{
loaders:[
{
test:/\.js$/,
loader:'babel',
exclude:/node_modules/
}
]
}
}
执行命令
npm install
webpack
编写 Vue 模块
在 config.js 中添加 vue 依赖库
在 webpack.congif.js 中添加 vue-Loaders,
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
resolve: {
extensions: ['', '.js', '.vue', '.json']
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}]
},
vue: {
loaders: {
js: 'babel'
}
}
}
在 src 目录中 新建文件 app.vue
<template>
<p> {{ greeting }} Vue!</p>
</template>
<script>
module.exports = {
data:function(){
return {
greeting:'Hello'
}
}
}
</script>
<style scoped>
p {
font-size:2em;
text-align:center;
}
</style>
修改 src 目录中的 main.js 内容为下面内容
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: 'body',
components: { App }
})
命令行输入下面内容
npm install
webpack
整个项目目录是:
屏幕快照 2017-04-03 下午1.59.24.png
打开 index.html 出现
屏幕快照 2017-04-03 下午2.01.47.png
Hello Vue!
