快速配置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 ...
随机推荐
- MongoDB快速入门教程（3.1）
3.MongoDB进阶 3.1.权限验证 以下内容适用于Mac系统用户,window系统用户请看后面文档 3.1.1.创建超级管理员用户 默认情况下连接mongodb是不需要用户名和密码的,这样不安全 ...
- [CF1216E] Numerical Sequence hard version
题目 The only difference between the easy and the hard versions is the maximum value of k. You are giv ...
- SQL Server 索引的含义和特点
索引用于快速找出在某个列中某一特定值的行.不使索引,数据库必须从第一条记录开始读完整个表,直到找到相关行.如果表中查询的列有一个索引,数据库能快速到达一个位置去搜寻数据,而不必查看所有数据. 索引的含 ...
- 让对象拥有状态——C#中的状态模式
大家好,老胡又在博客和大家见面了,在聊今天的主角之前,老胡先给大家讲一个以前发生的故事. 真实的故事 当老胡还是小胡的时候,跟随团队一起开发一款游戏.这款游戏是一款末日生存类游戏,玩家可以 收集资 ...
- 服务消费者（Ribbon）
上一篇文章,简单概述了服务注册与发现,在微服务架构中,业务都会被拆分成一个独立的服务,服务之间的通讯是基于http restful的,Ribbon可以很好地控制HTTP和TCP客户端的行为,Sprin ...
- 《The Design of a Practical System for Fault-Tolerant Virtual Machines》论文总结
VM-FT 论文总结 说明:本文为论文 <The Design of a Practical System for Fault-Tolerant Virtual Machines> 的个人 ...
- File and Code Templates IN IDEA
File and Code Templates (文件代码模板) 如何自定义设置头文件的注释,其中包括一些作者和文件创建时间和版本的设置 先打开File->Settings(或Alt+Ctrl+ ...
- NanoPi arm架构下的程序 ./ 运行黑屏 Qt环境可运行
首先之所以QtCreator环境下可直接运行,但是在终端下 ./ 则不能运行(黑屏但是不报错),判断肯定不是程序或者是库的问题.于是猜想是环境问题,即终端环境与QtCreator环境不同. 然后就查看 ...
- Layui数据表格动态加载操作按钮
效果: 方法一:绑定模版选择器 <div class="layui-card"> <div class="layui-card-body layui-r ...
- 从零开始实现multipart/form-data数据提交
在HTTP服务应用中进行数据提交一般都使用application/json,application/x-www-form-urlencoded和multipart/form-data这几种内容格式.这 ...