美文网首页Vue技术
Webpack + Vue 的框架搭建

Webpack + Vue 的框架搭建

作者: 最尾一名 | 来源:发表于2019-01-15 18:29 被阅读107次

    之前写过一篇用 Vue-Cli 3.x 搭建项目框架的文章,这次写一个不用脚手架来搭建框架的教程。

    创建项目

    mkdir vue-demo && cd vue-demo
    

    生成 package.json 文件

    npm init
    

    大致的 package.json :

    {
      "name": "vue-demo",
      "version": "1.0.0",
      "description": "just a vue demo",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "license": "ISC",
      "dependencies": {
      }
    }
    

    引入 webpack:

    npm install -g webpack webpack-cli
    npm install --save-dev webpack webpack-cli
    

    在项目中创建 webpack.config.js 文件

    const path = require('path');
    
    module.exports ={
      entry:'./src/main.js',
      output:{
        path: path.resolve(__dirname, 'dist'),
        filename: "demo.js"
      }
    };
    

    引入 Vue

    npm install vue --save
    

    创建 index.html 和 src/main.js 文件

    // index.html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>vue demo</title>
      </head>
    
      <body>
        <div id="app">
          {{ message }}
        </div>
      </body>
    </html>
    
    
    // main.js
    import Vue from 'vue';
    
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello vue'
      }
    });
    

    引入 babel

    npm install --save-dev babel-core babel-loader
    

    将 babel 加入到 webpack.config.js 配置文件中:

    // ...
    module:{
      rules:[
        {
          test: /\.js$/,
          loader:"babel-loader",
          exclude: /node_modules/
        }
      ]
    }
    // ...
    

    在配置中加入以下代码(重要!)

    这是因为正在使用的是 vue 的运行时版本,而此版本中的编译器时不可用的,我们需要把它切换成运行时 + 编译的版本,需要在配置文件中添加如下代码:

    // webpack.config.js
    // ...
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    },
    

    使用 html-webpack-plugin 插件

    引入插件:

    npm install --save-dev html-webpack-plugin
    

    在 webpack.config.js 中加入以下配置:

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    // ...
    plugins: [
      new HtmlWebpackPlugin({
        title: 'vue demo',
        template: 'index.html'
      })
    ],
    

    使用 webpack-dev-server 插件

    在我们实际开发中需要将代码部署在 server 中,而不是在浏览器中直接打开文件。
    此时我们需要使用 webpack 的 webpack-dev-server 。
    webpack-dev-server 为我们提供了一个简单的web服务器,并且能够实时重新加载(live reloading)。

    npm install --save-dev webpack-dev-server
    

    在 webpack.config.js 文件中需要指定一个文件夹,告诉开发服务器需要从哪儿加载文件:

    devServer: {
      contentBase:"./dist"  
    },
    

    修改 package.json 中的 scripts 信息:

    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev":"webpack-dev-server --hot --inline",
      "build": "webpack"
    },
    

    这时,运行指令:

    npm run dev
    

    就能在浏览器中看到你的 Vue 项目。

    文件总览

    // webpack.config.js
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      mode: 'development',
      entry: './src/main.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'demo.js'
      },
      plugins: [
        new HtmlWebpackPlugin({
          title: 'vue',
          template: 'index.html'
        })
      ],
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
      },
      devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 8099,
        open: true
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          },
          {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
          }
        ]
      }
    };
    
    // package.json
    {
      "name": "vue-demo",
      "version": "1.0.0",
      "description": "just a demo to learn vue",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --hot",
        "build": "webpack"
      },
      "keywords": [
        "vue"
      ],
      "author": "rain",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.2.2",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.5",
        "css-loader": "^2.1.0",
        "html-webpack-plugin": "^3.2.0",
        "style-loader": "^0.23.1",
        "webpack": "^4.28.4",
        "webpack-cli": "^3.2.1",
        "webpack-dev-server": "^3.1.14"
      },
      "dependencies": {
        "vue": "^2.5.22"
      }
    }
    
    // index.html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>vue demo</title>
      </head>
    
      <body>
        <div id="app">
          {{ message }}
        </div>
      </body>
    </html>
    
    // src/main.js
    import Vue from 'vue';
    
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello vue'
      }
    });
    

    大功告成!

    参考链接

    https://my.oschina.net/zhangyafei/blog/1606003

    相关文章

      网友评论

        本文标题:Webpack + Vue 的框架搭建

        本文链接:https://www.haomeiwen.com/subject/avmydqtx.html