1、创建基本结构
1) 通过以下命令创建一个项目空文件夹myApp并进入该文件夹：
mkdir myApp
cd myApp/
2) 通过以下命令创建package.json：
npm init
3) 创建index.html：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>{{ message }}</h3>
<script src="dist/build.js"></script>
</body>
</html>
4) 通过以下命令创建空文件夹src并进入该文件夹：
mkdir src
cd src/
5) 创建main.js：
import Vue from 'vue'
new Vue({
el: 'body',
data: {
message: "Hello Vue"
}
})
2、基本webpack构建
1) 创建webpack.config.js：
module.exports = {
// 入口主文件，包括其他模块
entry: './src/main.js',
// 编译的文件路径
output: {
// 输出的文件路径
path: './dist',
// 输出的文件名
filename: 'build.js'
},
module: {
// 特定的编译规则
loaders: [
{
// 验证文件是否是.js结尾，是则将其转换
test: /\.js$/,
// 通过babel转换
loader: 'babel',
// 不用转换的node_modules文件夹
exclude: /node_modules/
}
]
}
}
2) 创建一个文件.babelrc，babel工具可以转换ES6到现在的JavaScript，Vue需要配置es2015和stage-0：
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
3) 在命令行中安装webpack：
npm install -g webpack
4) 在命令行中一次性安装babel的一系列依赖包：
npm install --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime
5) 在命令行中安装vue：
npm install --save-dev vue
6) 在命令行中运行：
webpack
3、vue-loader和.vue文件
1) 修改index.html文件：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>
2) 修改main.js：
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: 'body',
components: { App }
})
3) 在src文件夹中创建app.vue：
<template>
<div class="message">{{ message }}</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello vue by vue-loader!'
}
}
}
</script>
<style>
.message {
color: blue;
}
</style>
注意1：一个组件下只能有一个并列的 div。
可以写成：
<template>
<div class="out">
<div class="in">
{{ message }}
</div>
</div>
</template>
不能写成：
<template>
<div class="out">
{{ message }}
</div>
<div class="in">
{{ message }}
</div>
</template>
注意2：使用export default时数据要写在 return里。
可以写成：
export default {
data () {
return {
message: 'Hello vue by vue-loader!'
}
}
}
不能写成：
export default {
data () {
message: 'Hello vue by vue-loader!'
}
}
export default是ES2015的模块规范，而module.exports是CommonJS的模块规范，因此也可使用module.exports：
module.exports = {
data: function() {
return {
message: 'Hello vue by vue-loader!'
}
}
}
4) 修改webpack.config.js：
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
}
]
},
vue: {
loaders: {
js: 'babel'
}
}
}
5) 在命令行中安装loaders：
npm install --save-dev css-loader style-loader vue-loader vue-html-loader
6) 在命令行中运行：
webpack