快速配置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 ...
随机推荐
- Linux安装Redis 6.0.5 ./install_server.sh报错
Linux安装Redis 6.0.5 ./install_server.sh报错 linux 安装Redis6.0.5时 进行到./install_server.sh时报错, This systems ...
- Windows10系统下安装配置Tomcat 9.0.1
Tomcat9.0.1下载:https://tomcat.apache.org/download-90.cgi 配置jdk的环境变量(略) 在系统变量里新建变量名:CATALINA_BASE,变量值: ...
- 如何在一个HTML文件中嵌套另一个HTML文件并且可以进行切换HTML文件
使用iframe 要点:a标签+iframe A标签的target属性 iframe 的id与name属性 示例: <!DOCTYPE html> <html> <hea ...
- 为什么 group by后面 必须跟selecte 后面的除了聚集函数外的所有字段
如:SELECT store_name, SUM(Sales) FROM Store_Information GROUP BY store_name 可以而SELECT store_name, add ...
- 用阿里的 sketch 插件 FusionDesign 来快速设计中后台
Fusion Design 是阿里推出的新的基于sketch的快速设计方案,很适合快速设计中后台. (1) 到Fusion官方站点 https://fusion.design 注册并创建一个项目. ( ...
- pycham中报：ModuleNotFoundError: No module named 'pymysql'
参考https://www.cnblogs.com/wupeiqi/articles/5713330.html https://pypi.python.org/pypi # D:\Program Fi ...
- 如何写出高性能的CSS3动画
小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU ...
- 「树形DP」洛谷P2607 [ZJOI2008]骑士
P2607 [ZJOI2008]骑士 题面: 题目描述 Z 国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的 ...
- The Shortest Statement CodeForces - 1051F 最小生成树+并查集+LCA
题目描述 You are given a weighed undirected connected graph, consisting of n vertices and mm edges. You ...
- Bank Hacking题解
题目: 题意: 有一颗树,你可以断开点(第一个随便断,以后只能是和已经断开的点相临的点),每个点有权值,断开之后,经一条边和两条边可以到达的节点权值加一,问到最后出现过的最大的权值. 分析: 为啥断开 ...