使用webpack构建Vue的方法

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/348.html