快速配置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裸机部署springBoot项目
一.项目创建及打包 创建项目,打jar包 二.安装JDK 1.在/usr目录下床架java文件夹,将 2.下载jdk8,并上传linux服务器(/usr/java) 下载地址:https://www. ...
- JS中style.display和style.visibility的区别
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时 ...
- 【spring boot】spring boot 拦截器
今日份代码: 1.定义拦截器 import com.alibaba.fastjson.JSON; import org.apache.commons.collections.CollectionUti ...
- Linux下Jmeter+nmon+nmon analyser实现性能监控及结果分析
一.概述 前段时间讲述了Jmeter利用插件PerfMon Metrics Collector来监控压测过程中服务器资源的消耗,一个偶然机会,我发现nmon这个 工具挺不错,和Jmeter插件比起来, ...
- （八十九）c#Winform自定义控件-自定义滚动条（treeview、panel、datagridview、listbox、listview、textbox）
官网 http://www.hzhcontrols.com/ 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kw ...
- Cache写策略（Cache一致性问题与骚操作）
写命中 写直达(Write Through) 信息会被同时写到cache的块和主存中.这样做虽然比较慢,但缺少代价小,不需要把整个块都写回主存.也不会发生一致性问题. 对于写直达,多出来%10向主存写 ...
- 你还在担心rpc接口超时吗
在使用dubbo时,通常会遇到timeout这个属性,timeout属性的作用是:给某个服务调用设置超时时间,如果服务在设置的时间内未返回结果,则会抛出调用超时异常:TimeoutException, ...
- mysql自连接和外连接知识点及相关案例
#三.自连接 #查询员工的名字.上级的名字 SELECT e.last_name, m.last_name FROM employees e JOIN employees m ON e.manager ...
- 准备开始了解orchardcore，有兴趣的一起啊
orchardcore网上的资料真是少,开始看源码,目前遇到的最大问题是不知道ModuleName属性如何自动注入到OrchardCore.Cms.Web的程序集Assembly上面,等这个搞通了估计 ...
- Python axis的含义
axis=0表述列 axis=1表述行 如下面例子: In [52]: arr=np.arange(12).reshape((3,4))In [53]:arrOut[53]:array([[ 0, 1 ...