Vue学习笔记（十五）——搭建基于webpack的vue开发环境

最新推荐文章于 2024-08-16 14:53:07 发布
最新推荐文章于 2024-08-16 14:53:07 发布
阅读量512 收藏
点赞数
分类专栏： Vue 文章标签： vue webpack 环境搭建 vue-loader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lqlqlq007/article/details/91961203
版权

参考文档：https://segmentfault.com/a/1190000012789253?utm_source=tag-newest

依次执行文档贴出的命令即可完成基于webpack的vue开发环境的搭建，如果无法成功搭建（如某一步骤发生错误）请在文档下留言以便笔者更正。

package.json（如果无法成功搭建，请先检查组件版本）

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-webpack-plugin": "^3.2.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1"
  }
}

环境准备（首先搭建webpack环境，故vue会在后面的步骤安装）

1.初始化工程：

npm init

2.安装webpack

npm install webpack

3.安装webpack-cli

npm install webpack-cli

4.安装webpack-dev-server

npm install webpack-dev-server

5.安装html-webpack-plugin

npm install html-webpack-plugin

6.替换工程根目录下package.json文件scripts的值：

  "scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  }

7.在工程根目录下新增webpack.config.js文件，内容如下：

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

module.exports = {
    entry: {
        "main": "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "[name].js"
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            inject: 'body'
        }),
    ]
};

工程代码

1.在根目录下新增index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

2.在根目录下新增src目录，并在src目录下新增main.js：

document.getElementById("app").innerHTML = "app info";

检查环境

1.运行工程

npm run dev

页面正常：

在这里插入图片描述

引入vue

1.安装vue

npm install vue

2.调整index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
</body>
</html>

3.调整main.js：

import Vue from 'vue'

new Vue({
    el: '#app',
    data: {
        message: "app info"
    }
});

检查引入vue后的环境

1.运行工程：

npm run dev

页面控制台报错：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

如下图：
在这里插入图片描述

这是由于直接import Vue from 'vue’使用的是vue的运行时版本，而开发时通常需要使用vue的完整版本。

2.在webpack.config.js增加以下代码（用于引用vue的完整版本）：

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

2.再次运行工程：

npm run dev

页面恢复正常（这里不再重复贴图）。

支持引入.vue文件

1.安装vue-loader

npm install vue-loader

2.安装vue-template-compiler

npm install vue-template-compiler

3.更新webpack.config.js（用于引用vue-loader）：

'use strict';
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: {
        "main": "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "[name].js"
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            inject: 'body'
        }),
        new VueLoaderPlugin()
    ]
};

4.新增自定义组件component-a：

<template>
    <span>it is component a</span>
</template>

<script>
    export default {
        name: "component-a"
    }
</script>

<style scoped>

</style>

5.调整main.js（引用组件component-a）：

import Vue from 'vue'
import ComponentA from './components/ComponentA.vue'

new Vue({
    el: '#app',
    components: { ComponentA },
    template: '<component-a></component-a>'
});

6.调整index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>

7.运行工程：

npm run dev

页面正常（组件正常显示）：
在这里插入图片描述

至此一个基于webpack的基础vue开发环境就搭建完成了。

讨厌走开啦
关注
专栏目录
vue-webpack
hotboyboy的博客
04-23 318
slot <body> <div id="app"> <cpn><p>我是第一</p></cpn> <cpn></cpn> <cpn></cpn> <cpn> <p>我是最后一个</p> <p>二号和二号</p&gt
VUE学习笔记——vue+webpack脚手架搭建
qq_39041578的博客
10-24 295
#使用VUE作为前端框架的环境搭建 1 安装node.js nodejs的安装方式非常简单，在官网下载msi格式的安装包，傻瓜式安装，自动全局配置 C:\Users\Administrator&amp;amp;amp;amp;gt;node -v v10.12.0 在cmd窗口用node -v即可查看版本号 2 切换淘宝cnpm nodejs带的资源安装方式是npm，但是连国外的网，这里将其切换成国内的私服，淘宝的cnpm是很...
基于webpack搭建vue的开发环境
weixin_47218056的博客
08-17 215
一、前端构建工具 grunt gulp webpack（主流） fis3(百度） 二、webpack是什么 webpack是一个现代javascript应用程序的静态模块打包器 webpack稳定版本：v4.44 三、如何使用webpack搭建前端环境 1.安装node.js 注意：如果npm安装一下包由于网络原因安装慢，切换一下镜像源 改成淘宝镜像npm config set registry https://registry.npm.taobao.org 查看是否更改过来：npm confi
使用webpack搭建个本地项目
最新发布
不熬夜的臭宝的博客
08-16 397
使用webpack搭建个本地项目
基于Webpack4搭建Vue开发环境
小柒的前端之旅
06-03 448
一篇比较好的基于Webpack4搭建Vue开发环境的文章分享给大家 https://www.colabug.com/4917669.html?tdsourcetag=s_pcqq_aiomsg
vue学习——从零搭建vue+webpack项目
weixin_30781107的博客
04-11 173
一 安装node vue项目搭建依赖node的npm包管理器，所以我们先得安装node，此处就不详细讲解其安装过程。 二 安装vue-cli npm install -g vue-cli 安装成功后可以输入vue查看相关命令的使用，输入vue list可以查看vue可以用的模板: 我们这里选择webpack模板： vue init webpack project...
vue项目-webpack学习笔记
老简单题
02-29 94
1.若使用到nodejs相关东西 （1）npm init （2）指定包 2.打包css/less/sass 例如：css要使用两个加载器style-loader，css-loader （1）第一步安装 例如： （2）第二步复制官网配置module到webpack.config.js 例如： 3.图片的打包处理 有两个加载器url-loader和file-loader 不超过limit限制的用...
【Vue3+Ts】—— webpack学习笔记（一）
qq_53061847的博客
07-04 970
事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了： 但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题： 这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular； 但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的； 事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、 TypeScript、打包优化等的；官方解释： webp..
Vue学习笔记（七）—— webpack
hsy_hhh的博客
09-02 193
webpack是一款前端资源模块化管理和打包工具，在webpack.config配置文件中包含着入口文件、出口文件、loader加载器、plugin插件 在控制台通过webpack命令直接进行打包 以下配置均在webpack.config.js文件中进行 1.入口文件 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依...
Webpack与Vue学习笔记
12-15
记录自己学习webpack与Vue的过程
Vue webpack
weixin_44538225的博客
08-02 376
工具:idea 想要详细了解Vue的话，视频链接https://www.bilibili.com/video/BV18E411a7mC 博客链接：https://blog.csdn.net/DDDDeng_/article/details/107475920 什么是Webpack 本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要
vue webpack
weixin_67812721的博客
08-15 247
webpack
VUE-webpack
25氪
07-07 270
webpack基础使用 1.初始化包环境，自动下载package.json配置文件 yarn init 2.安装依赖包，vue包 yarn add webpack webpack-cli -D 3.在package.json里配置 4.根目录创建src目录，在src目录创建入口函数main.js文件 5.根目录创建配置入口出口webpack.config.js 6.填入配置项 const path = require("path") module.exports = {
Vue - Webpack
qq_33962481的博客
08-09 120
文章目录一、什么是Webpack二、Webpack安装1. 全局安装webpack三、Webpack的初使用1. 在项目目录新增webpack.config.js文件2. webpack打包四、loader1. loader使用过程 一、什么是Webpack webpack是一个JavaScript应用的静态模块打包工具 二、Webpack安装 安装webpack首先需要安装Node.js, Node.js自带了软件包管理工具npm 1. 全局安装webpack npm install webpack
vue+webpack学习笔记，边学习边更新
sinat_33881413的博客
04-26 397
1.安装node.js，安装成功： 命令行：node -v 命令行：npm -v 2.安装vue-cli， 命令行：npm install -g vue-cli  3.进入文件夹创建新项目： 命令行：cd xxx  //要创建新项目的文件夹 命令行：vue init webpack newproject   //创建新项目 4.进入新项目： 命令行：cd newproject
vue:环境
洪君的博客
01-07 116
https://blog.csdn.net/qq_29308413/article/details/84539548 资源  node -v 64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi 淘宝镜像 npm config set registry ry https://registry.npm.taoba...
学了vue和webpack的笔记
weixin_33966095的博客
09-11 73
首先把package.json贴出来，这里很多插件存在版本区别，因此要特别注意版本，不是所有的安装最新的都行 { "name": "life_manager", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error:...
Vue学习笔记：从环境搭建到项目实战
本资源是一份详细的Vue前端开发学习笔记，涵盖了从基础入门到实战项目的全过程，适合初学者和希望进一步提升Vue技能的开发者参考。以下是主要内容概要： 1. **环境搭建**： - 使用Node.js和npm进行环境配置，通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值