浅谈用webpack构建Vue

来源：互联网发布：windows win7 ios系统编辑：程序博客网时间：2024/06/03 13:29

1、创建基本结构

1) 通过以下命令创建一个项目空文件夹myApp并进入该文件夹：

mkdir myAppcd 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 srccd 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

1 0