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

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

• Vue

下面是“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日

相关文章

  • 原生JS改变透明度实现轮播效果

    好的！原生JS改变透明度实现轮播效果的攻略如下： 一、准备工作 在HTML文件中创建一个包含图片的轮播容器，如下所示： <div class="slider"> <img src="./image1.jpg" alt="image1"> <img src=".…

    Vue 2023年5月28日
    00

  • vue3组件化开发之可复用性的应用实例详解

    下面详细讲解“vue3组件化开发之可复用性的应用实例详解”这个完整攻略。 一、背景和前置知识 首先需要了解的是Vue3的组件化开发，并且对Vue3语法要有一定的掌握。 二、组件复用性的重要性 在实际开发中，组件的复用性非常重要，可以大大提升开发效率。在Vue3中，组件是可以被复用的，通过将公共逻辑和UI组件编写成可复用的组件，可以节省时间和代码量。 三、如何…

    Vue 2023年5月27日
    00

  • Vue.js中关于“{{}}”的用法

    当我们在Vue.js中想要显示动态数据时，我们可以使用插值语法“{{}}”将数据绑定在模板中。该语法可以将Vue数据绑定到HTML中，动态更新DOM元素。 基本用法 通过一些简单的例子，我们可以看到“{{}}”的基本用法： <div id="app"> <p>{{ message }}</p> <…

    Vue 2023年5月27日
    00

  • 详解Vue 开发模式下跨域问题

    以下是详解Vue开发模式下跨域问题的完整攻略： 背景 在Vue项目中，我们经常需要与后端API进行交互。但是由于浏览器的安全策略，不同域名之间的接口调用为所禁止。这就涉及到了跨域问题。 解决方案 方案一：使用代理 在开发中，我们可以使用代理将HTTP 请求转发到API服务器，这样就可以避免跨域问题。以下是使用Vue CLI提供的代理功能的示例： // vue…

    Vue 2023年5月28日
    00

  • 详解Vue使用命令行搭建单页面应用

    非常感谢您关注本网站，以下是对“详解Vue使用命令行搭建单页面应用”的完整攻略： 一、简介 Vue.js是一个流行的JavaScript框架，它使用MVVM模式来构建单页面应用程序。 而命令行是可以让我们方便地执行许多自动化任务的强大工具。接下来，我们将使用命令行来构建一个Vue.js单页面应用程序。 二、步骤 1. 安装Node.js和Vue.js 在开始…

    Vue 2023年5月28日
    00

  • nginx配置wss协议的实现

    要实现Nginx配置wss(WebSocket Secure)协议，需要按照以下步骤进行操作： 前置条件： 已安装 Nginx 1.4.0 或更高版本。 已安装 OpenSSL 1.0.1e 或更高版本。 已安装 PCRE 8.21 或更高版本。 安装 Nginx 参考官方文档或安装向导完成安装。 安装 OpenSSL 和 PCRE 使用官方安装向导或你系统…

    Vue 2023年5月28日
    00

  • vue+swiper实现时间轴效果

    接下来我会详细讲解“Vue+Swiper实现时间轴效果”的完整攻略，步骤如下： 搭建项目环境首先需要安装Vue和Swiper，可以使用Vue CLI创建一个空项目模板，然后通过npm安装Swiper和其他需要的依赖库。 编写时间轴结构使用Vue的template语法编写HTML结构，时间轴主要由时间和内容组成。将时间和内容放置在同一个div下，使用v-for…

    Vue 2023年5月29日
    00

  • Vue实现裁切图片功能

    Vue 是一种流行的现代 JavaScript 框架，它简化了 web 应用程序的开发。在这里，我们将介绍如何使用 Vue 实现图片裁剪功能。 需求分析 在 Vue 中，我们需要一个组件，可以让用户上传图片，然后选择要裁剪的区域，最后将裁剪后的图像保存到本地或服务器。为了实现这个需求，我们可以使用以下第三方库： vue-cropperjs: 可以在 Vue …

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