快速配置webpack+vue项目
第一步：初始化项目
1.npm init
2.
package name: (webpack+vue) webpackvue
version: (1.0.0)
description: this is webpack Vue demo
entry point: (webpack.config.js) index.js
test command:
git repository:
keywords:
author: alexia
license: (ISC)
About to write to D:\demo\webpack\webpack+vue\package.json: {
"name": "webpackvue",
"version": "1.0.0",
"description": "this is webpack Vue demo",
"main": "index.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "alexia",
"license": "ISC"
}
package.json配置完成后为
第二步：安装各种依赖；
* npm install --save vue 安装vue2.0
* npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 //安装webpack以及webpack测试服务器，
* npm install --save-dev babel-core babel-loader babel-preset-es2015
* npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件
* npm install --save-dev css-loader file-loader 用来解析css
第三步：编写页面
1.新建目录src，里面新建App.vue
<template>
<div class="app">
{{msg}}
</div>
</template>
<script>
export default {
data(){
return {
msg:'aaaaaaa'
}
}
}
</script>
2.在src目录下新建main.js
/* 引入vue和主页 */
import Vue from 'vue'
import App from './App.vue' /* 实例化一个vue */
new Vue({
el: '#app',
render: h => h(App)
})
3.配置webpack.config.js
/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = {
/* 输入文件 */
entry: './src/main.js',
output: {
/* 输出目录，没有则新建 */
path: path.resolve(__dirname, './dist'),
/* 静态目录，可以直接从这里取文件 */
publicPath: '/dist/',
/* 文件名 */
filename: 'build.js'
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
mode: 'development' ,// 设置mode
module: {
rules: [
/* 用来解析vue后缀的文件 */
{
test: /\.vue$/,
loader: 'vue-loader'
},
/* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
{
test: /\.js$/,
loader: 'babel-loader',
/* 排除模块安装目录的文件 */
exclude: /node_modules/
}
]
}
}
4.打包项目
在根目录按住shift键同时点击鼠标右键打开powershell命令窗口，输入webpack，这时目录下会多出一个dist文件夹，查看里面会有build.js
项目目录如下
5.根目录下新建index.html，引入build.js然后打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<section id="app"> </section>
</body>
<script src="./dist/build.js"></script>
</html>
第四步：在浏览器中浏览页面
1.全局安装webpack-dev-server
npm install -g webpack-dev-server
2.在根目录cmd中输入webpack-dev-server，即可启动热重载服务
在浏览器输入 http://localhost:8080/ 查看页面
这时修改页面的代码，不用刷新浏览器直接更改
注意
1.webpack打包时，如果出现
一定要配置 webpack-cli的依赖
2.在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误
解决：官方默认babel-loader | babel 对应的版本需要一致: 即babel-loader需要搭配最新版本babel
a.回退低版本
npm install -D babel-loader@7 babel-core babel-preset-env
b.更新到最高版本:
npm install -D babel-loader @babel/core @babel/preset-env webpack
3.在配置webpack.config.js自动打包的时候,出现
分析
. 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
解决：. 在webpack.config.js中加入
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
devtool: "sourcemap",
entry: './js/entry.js', // 入口文件
output: {
filename: 'bundle.js' // 打包出来的wenjian
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
module : {
...
}
}
快速配置webpack+vue项目的更多相关文章
- vue新手入门之使用vue框架搭建用户登录注册案例，手动搭建webpack+Vue项目（附源码，图文详解，亲测有效）
前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...
- webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- 快速构建一个vue项目
首先介绍一下命令行构建一个vue项目步骤: 1.下载安装node.js(直接运行安装包根据步骤安装完),打开命令行输入:node -v ,出现版本号即安装成功. 2.命令行界面输入:cnpm inst ...
- 入职一个月快速熟悉大型Vue项目经验感想
来到和睦的公司家庭已经一个月出头了,从技术层面来说,公司项目PC端是我目前来说接触的最大最复杂的项目了,德老师也说这个不断开发更新迭代的项目的代码量相对于全国的web来说是蛮多的,对于快速熟悉这样的大 ...
- vue全家桶安装以及修改webpack配置新增vue项目启动方式
一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...
- 手动搭建webpack + vue项目之初体验
在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...
- 快速创建一个vue项目
vue脚手架 用来创建vue项目的工具包 创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm in ...
- 解决webpack vue 项目打包生成的文件，资源文件均404问题
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改c ...
- webpack / vue项目 config/index.js配置（用于配置webpack服务器代理）
'use strict' // Template version: 1.1.3 // see http://vuejs-templates.github.io/webpack for document ...
随机推荐
- 【题解】[BalticOI 2014]friends
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3916 (BZOJ3916) 由题意可知 \(N\) 得为奇数,\(S\) 才存在,所以先特 ...
- ⚡ vue3 全家桶体验
前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于 ...
- Linux安装docker笔记
更新yum操作 yum -y update 安装docker yum install -y docker 或者yum install -y docker-engine 启动docker servic ...
- python 给视频添加马赛克
用法: 1. 创建空文件夹:imgs 2. 将倒数第三行中的"222056.mov"改为你的视频路径,如:"a.mov" 3. 运行以下代码 4. 稍等片刻,鼠 ...
- git和github入门指南（3.1）
3.远程管理 3.1.远程仓库相关命令 1.查看远程仓库名字,这里以github为例 git remote 上面命令执行后会得到:origin,这样一个名字,这个名字是我们克隆的时候默认设置好的 如果 ...
- .NET Core加解密实战系列之——消息摘要与数字签名算法
目录 简介 功能依赖 消息摘要算法 MD算法 家族发展史 应用场景 代码实现 MD5 示例代码 SHA算法 应用场景 代码实现 SHA1 SHA256 示例代码 MAC算法 HMAC算法的典型应用 H ...
- VMware实现宿主机和虚拟机处于同一网段
打开虚拟网络编辑器 选择VMnet0桥接模式,在VMnet信息中,选择可以选择的网卡,然后保存. 打开虚拟机设置,在“硬件”选项卡的网络适配器中选择桥接模式即可.
- （二）LVS介绍
LVS分3种模式 (a)NAT(网络地址映射):通过网络地址转换的方法来实现调度 优点:支持所有操作系统及私有网络,且只需一个公网 IP 地址 缺点:用户请求和响应报文都必须 ...
- （二）ansible 使用
一,ansible 命令格式 #ansible <pattern> -m <module_name> -a <arguments> #单个服务器 ansible 3 ...
- Numerical Sequence (Hard vision) 题解
The only difference between the easy and the hard versions is the maximum value of \(k\). You are gi ...