1. Python技术站首页
  2. 其他
  3. Vue

webpack4手动搭建Vue开发环境实现todoList项目的方法

• Vue
yizhihongxing

下面是“webpack4手动搭建Vue开发环境实现todoList项目的方法”的完整攻略。

步骤一：初始化项目

先创建一个新的文件夹，进入文件夹中进行以下操作：

1.使用npm初始化项目：

npm init

根据提示输入项目信息。

2.安装webpack和webpack-cli:

npm install webpack webpack-cli --save-dev

步骤二：安装其他依赖

1.安装vue, vue-template-compiler 和 vue-loader：

npm install vue vue-template-compiler vue-loader --save-dev

2.安装css-loader, style-loader:

npm install css-loader style-loader --save-dev

步骤三：创建Webpack配置文件

在项目的根目录下创建webpack.config.js文件，配置webpack的入口，出口等信息：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ]
  }
};

在上面的代码中，我们定义了入口文件为src/main.js，打包后生成的文件为dist/bundle.js，同时我们添加了vue-loader和css-loader作为模块的loader。

步骤四：创建Webpack插件

在此步骤中，我们将安装html-webpack-plugin，该插件可以自动将bundle.js注入HTML文件中并生成一个新的文件。

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

修改webpack.config.js文件，加入html-webpack-plugin的配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //...省略其它配置
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',//指定模板页面
      filename:'index.html',//指定生成的页面名称
      inject:true,//是否将打包后的脚本注入到模板页面中
    }),
  ]
};

步骤五：创建Vue组件

在src目录下创建App.vue文件作为Vue组件，组件的代码如下：

<template>
  <div>
    <h1>Todo List</h1>
    <input type="text" placeholder="Add a to-do item" v-model="newItem" />
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div class="item-dec">{{ item }}</div>
        <div class="item-btns">
          <button @click="deleteItem(index)">Delete</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      items: [],
    };
  },
  methods: {
    addItem() {
      if (this.newItem !== '') {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

<style>
.item-dec {
  display: inline-block;
  width: 80%;
}

.item-btns {
  display: inline-block;
  width: 20%;
  text-align: right;
}
</style>

步骤六：创建JavaScript入口文件

在src目录下创建main.js文件，并在其中导入Vue和App组件：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

在此，我们使用了Vue的渲染函数(render function)，来渲染我们的App组件。

步骤七：创建HTML模板文件

在src目录下创建一个index.html文件，使用Webpack打包时，该文件会被处理并输出到目标文件夹（我们在Step3中配置的是dist目录）。

在index.html中，我们需要包含我们的打包后的文件(bundle.js)和根元素（在本例中指的是id为app的div元素）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList App</title>
</head>
<body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
</body>
</html>

步骤八：创建启动应用的脚本

在项目根目录下创建一个启动应用的脚本，比如命名为run.js，代码如下：

const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

webpack(webpackConfig, (err, stats) => {
  if (err || stats.hasErrors()) {
    // 构建过程出现错误
    console.error(err);
    return;
  }
  console.log('构建完成');
});

步骤九：使用命令启动应用

在package.json文件中添加如下npm命令：

{
  "scripts": {
    "dev": "node run.js"
  }
}

现在我们的开发环境的配置已经完成，可以使用npm run dev命令在浏览器中运行应用了。

在浏览器中访问 http://localhost:8080/ ，即可看到todoList的页面。

下面是一个示例（示例代码中省略掉了部分骨架代码）：

webpack.config.js文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'index.html',
      inject:true,
    }),
  ]
};

App.vue文件：

<template>
  <div>
    <h1>Todo List</h1>
    <input type="text" placeholder="Add a to-do item" v-model="newItem" />
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div class="item-dec">{{ item }}</div>
        <div class="item-btns">
          <button @click="deleteItem(index)">Delete</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      items: [],
    };
  },
  methods: {
    addItem() {
      if (this.newItem !== '') {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

<style>
.item-dec {
  display: inline-block;
  width: 80%;
}

.item-btns {
  display: inline-block;
  width: 20%;
  text-align: right;
}
</style>

main.js文件：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList App</title>
</head>
<body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
</body>
</html>

run.js文件：

const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

webpack(webpackConfig, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err);
    return;
  }
  console.log('构建完成');
});

完整示例代码可以在我的github中找到（https://github.com/zhangxiangliang/webpack-vue-todoList）。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webpack4手动搭建Vue开发环境实现todoList项目的方法 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vue中使用this.$set()如何新增数据,更新视图

    Vue.js是一个流行的JavaScript框架，通过MVVM模式实现数据的双向绑定和DOM的自动更新。在Vue中使用this.$set()方法可以新增数据并且更新视图。 this.$set()的用法 Vue.js中，使用this.$set()方法，可以动态添加一个属性，触发视图的重新渲染。 this.$set(obj, key, value)方法接受3个参…

    Vue 2023年5月28日
    00

  • 优化Vue项目编译文件大小的方法步骤

    优化Vue项目编译文件大小是一个关键问题，对于项目的性能和用户体验都有着重要的影响。下面提供一些方法步骤，以帮助您优化Vue项目编译文件大小。 1. 使用 Webpack Bundle Analyzer Webpack Bundle Analyzer是一个可视化工具，能够查看打包后文件的大小和依赖情况，从而找出哪些包或模块对打包后的文件大小有显著影响。具体步…

    Vue 2023年5月28日
    00

  • vue中动态添加style样式的几种写法总结

    当我们在Vue中需要动态添加样式时，我们可以使用以下几种方法： 使用class绑定 Vue中可以使用:class或者:v-bind指令将一个变量与class属性绑定起来，这样我们可以通过改变变量的值来改变元素的class属性，从而改变样式。 <template> <div :class="{ ‘selected’: isSelec…

    Vue 2023年5月27日
    00

  • vue2从数据变化到视图变化之nextTick使用详解

    Vue2从数据变化到视图变化之nextTick使用详解 在Vue中，当我们修改数据时，Vue会帮我们自动更新视图，这是因为Vue使用了一种叫做“响应式原理”的技术，当数据发生变化时，会自动触发视图的更新。但是，有些情况下我们希望在DOM更新后再执行某些操作，这时就需要使用Vue提供的nextTick方法。本文将详细讲解nextTick的用法和原理。 next…

    Vue 2023年5月29日
    00

  • 使用vue-cli创建vue项目介绍

    当我们要开始一个新的Vue项目时，我们可以使用Vue CLI来创建项目。Vue CLI是一个标准化的工具，用于快速搭建Vue项目。它会为我们提供一个Vue项目的基础结构，包含了很多开箱即用的插件和功能。 下面详细介绍如何使用Vue CLI来创建Vue项目的完整攻略。 环境准备 首先，我们要检查本地环境是否已经安装了Node.js。打开终端，输入以下代码检查是…

    Vue 2023年5月28日
    00

  • 对vue.js中this.$emit的深入理解

    对于Vue.js中的this.$emit方法的深入理解，需要从Vue.js组件通信的机制以及this指向这两个方面来展开讲解。 一、Vue.js组件通信机制 在Vue.js中，组件之间的通信可以通过props和自定义事件来实现。 1. 通过props进行父子组件通信 父组件通过props向子组件传递数据，子组件可以接收到父组件传递进来的数据，并且在子组件中将…

    Vue 2023年5月28日
    00

  • Vue移动端实现图片上传及超过1M压缩上传

    OK，下面是“Vue移动端实现图片上传及超过1M压缩上传”的完整攻略： 1. 前置知识 在讲解具体实现过程之前，需要了解以下知识点： input 标签的 type=”file” 属性: 用于创建一个文件上传框，用于选择本地文件上传。当选择文件后，选择框会为文件生成一个 File 对象，用于后续操作。 canvas 标签和 canvas API: 用于在网页中…

    Vue 2023年5月28日
    00

  • vue+koa2实现session、token登陆状态验证的示例

    一、概述 在web应用程序中，访问控制是一个非常重要的问题。session和token都是常见的存储用户身份验证状态的解决方案。在vue和koa2框架的帮助下，可以轻松实现这些解决方案，并提高应用程序的安全性。 本文将详细介绍如何使用vue+koa2实现session、token登陆状态验证的示例。 二、实现session存储用户身份验证状态 session…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部