1.新建并初始化项目(npm int -y),安装webpack,webpack-cli webpack-dev-server

安装eslint,eslint-plugin-vue,配置eslint语法检测文件.eslintrc.js

2.安装vue:

npm i vue --save

3.dist下建立index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="build.js"></script>
</head>
<body> </body>
</html>

4.src目录下新建两个文件

util.js

module.exports = function say() {
console.log('hello world');
}

main.js

 
var say = require('./util');
say();

5.新建webpack.config.js

var path = require('path');
var webpack = require('webpack'); module.exports = {
entry: './src/main.js', // 项目的入口文件,webpack会从main.js开始,把所有依赖的js都加载打包
output: { filename: 'build.js' // 打包后的文件名
},
devServer: {
contentBase:path.resolve(__dirname,"dist"),
historyApiFallback: true,
overlay: true
} };

6.修改package.josn

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

7.执行npm run dev可以调试,热更新打开,但是不会生成目标js

发布前执行npm run build,生成目标js发布

8.引入vue

main.js

 
import Vue from 'vue';

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});

9.

index.html

 注意script的位置,一定要在div#app后面,否则打包时会提示找不到id为app的元素
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div id="app">
{{message}}
</div>
<script src="build.js"></script> </body>
  /*script也可以放这里*/
</html>

10.修改webpack.config.js文件

var path = require('path');
var webpack = require('webpack'); module.exports = {
entry: './src/main.js', // 项目的入口文件,webpack会从main.js开始,把所有依赖的js都加载打包
output: { filename: 'build.js' // 打包后的文件名
},
devServer: {
contentBase:path.resolve(__dirname,"dist"),
historyApiFallback: true,
overlay: true
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
} };
'vue$': 'vue/dist/vue.esm.js'这一句给vue起一个别名,否则引入vue需要这样写:
    import Vue from 'vue/dist/vue.esm.js';

11.支持css

安装css-loader vue-style-loader

配置loader,匹配后缀名为css的文件,然后分别用css-loader,vue-style-loader去解析
解析器的执行顺序是从下往上(先css-loader再vue-style-loader)

注意:因为我们这里用vue开发,所以使用vue-style-loader,其他情况使用style-loader

css-loader使得我们可以用模块化的写法引入css,vue-style-loader会将引入的css插入到html页面里的style标签里

module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}
]
}

我们现在来试下
在src目录下新建style目录,style目录里新建common.css

body {
background: #fed;
}

main.js

import './style/common.css';

发现css样式有用了

12.引入图片资源

安装图片加载器

npm i file-loader --save-dev

webpack.config.js添加一个loader:

 
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'img/[name].[ext]?[hash]'
}
}

所有图片文件打包后放在目标文件夹的img目录下,加入图片是a.png,会生成类似:

a.png?a548e59f576077ea5f6a1ab3b9df1cd7"
方便更新时取消缓存
 

main.js

import Vue from 'vue';
import "./style/common.css" Vue.component('my-component', {
template: '<img :src="url" />',
data() {
return {
url: require('./img/icon_bindap.png')
}
}
}) var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> </head>
<body>
<div id="app">
{{message}}
<my-component/>
</div> </body>
<script src="build.js"></script>
</html>

上面例子中是把vue放入到js中,使用 Vue.component 来定义全局组件
  在实际项目里,更推荐使用单文件组件,把组件放到一个单独的.vue文件中,参考:

https://www.cnblogs.com/cowboybusy/p/10608654.html

基于webpack的vue开发环境搭建的更多相关文章

  1. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  2. 基于webpack的react开发环境搭建新手教程

    最近学习react-webpack项目搭建,找到一篇我认为不错的博客,跟着学习了一番,写得很详细很好,本篇博客纯属记录总结,要看更详细的搭建过程及解析,请戳: 基于webpack的React项目搭建( ...

  3. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

  4. vue开发环境搭建Mac版

    一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对  ...

  5. 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建

    node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...

  6. express+mysql+vue开发环境搭建

    最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...

  7. 基于IDEA的JavaWeb开发环境搭建

    基于IDEA的JavaWeb开发环境搭建 基于IDEA的JavaWeb开发环境搭建 jdk下载安装配置环境变量 下载 安装 配置环境变量 下载安装激活使用IntelliJ IDEA 下载 安装 激活 ...

  8. 最全Vue开发环境搭建

    前言 一直想去学Vue,不过一直找不到一个契机.然公司手机端用到了跨平台开发apicloud,里边涉及到Vue组件化开发,例如header和footer的封装,以及apicloud自定义的frame等 ...

  9. vue 开发系列(一) vue 开发环境搭建

    概要 目前前端开发技术越来越像后台开发了,有一站式的解决方案. 1.JS包的依赖管理像MAVEN. 2.JS代码编译打包. 3.组件式的开发. vue 是一个前端的一站式的前端解决方案,从项目的初始化 ...

随机推荐

  1. Linux系统上安装配置MAVEN

    1,下载maven 首先进入maven下载目录:http://maven.apache.org/download.cgi 2,上传maven到linux系统 以下操作路径都是本人习惯,目录可以随意更改 ...

  2. springcloud复习2

    Hystrix断路器 Hystrix是一个用于处理分布式系统的延迟和容错的开源库,在分布式系统里,许多依赖不可避免的会调用失败,比如超时.异常等,Hystrix能够保证在一个依赖出问题的情况下,不会导 ...

  3. python爬虫——selenium+chrome使用代理

    先看下本文中的知识点: python selenium库安装 chrome webdirver的下载安装 selenium+chrome使用代理 进阶学习 搭建开发环境: selenium库 chro ...

  4. Java入门 - 语言基础 - 15.StringBuffer

    原文地址:http://www.work100.net/training/java-stringbuffer.html 更多教程:光束云 - 免费课程 StringBuffer 序号 文内章节 视频 ...

  5. Zero down time upgrade with OGG -from 11g to 12c.

    High level steps upgrade from 11g to 12c database: 1)    Check network between source and target. 2) ...

  6. 把本地仓库同步到github上去

    1.愚蠢的没有进入之前设定的工作目录就开始用 git remote add origin https://github.com/bobowa/learngit.git 这个命令上传,报错如下 fata ...

  7. 剑指Offer对答如流系列 - 实现Singleton模式

    目录 面试题2:实现Singleton模式 一.懒汉式写法 二.饿汉式写法 三.枚举 面试题2:实现Singleton模式 题目:设计一个类,我们只能生成该类的一个实例. 由于设计模式在面向对象程序设 ...

  8. MyBatis-Plus学习笔记(1):环境搭建以及基本的CRUD操作

    MyBatis-Plus是一个 MyBatis的增强工具,在 MyBatis 的基础上只做增强不做改变,使用MyBatis-Plus时,不会影响原来Mybatis方式的使用. SpringBoot+M ...

  9. linux下svn安装和使用(centos)

    1.安装svn 本地测试环境 centos6.5 # yum安装 yum -y install subversion # 查看svn版本 svnserve --version # 建立版本库目录 mk ...

  10. [HNOI2008]Cards(dp,Burnside引理)

    Burnside引理: 参考自 某大佬对Burnside引理和Polya定理的讲解 相关概念 群:在数学中,群表示一个拥有满足封闭性.满足结合律.有单位元.有逆元的二元运算的代数结构. 置换群:由有限 ...