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. 废旧手机改造之给你的手机安装win10系统

    最近又开始琢磨把我这个即将退出的二手手机再利用一下 发现了一个不错的软件 先上图 是不是感觉逼格很高啊 点击下面链接即可下载使用 https://www.lanzous.com/i4gpsib 欢迎交 ...

  2. Dynamics CRM CE 怎样从 UCI 改为 classic UI

    dynamics 现在大力推UCI. 但是对于大部分人来说还是使用不习惯. 怎样从UCI改为classic UI呢 1. 快速的方法 https://xxx.crm.dynamics.com/main ...

  3. DOM中的位置和大小（总结）

    [window]window对象 一.position位置 screenLeft/screenTop (适用于火狐和谷歌) screenX/screenY (适用于IE) 二.size大小 inner ...

  4. CSS-11-外边距

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Nginx配置及负载均衡

    转载:http://www.cnblogs.com/jingmoxukong/p/5945200.html nginx简易教程   目录 Nginx  概述  安装与使用  nginx 配置实战  参 ...

  6. 配置虚拟环境(virtualenv+virtualenvwrapper)

    安装virtualenv pip3 install virtualenv 安装virtualenvwrapper pip install virtualenvwrapper # Linux使用该条 p ...

  7. CF-528D Fuzzy Search(FFT字符串匹配)

    Fuzzy Search 题意: 给定一个模式串和目标串按下图方式匹配,错开位置不多于k 解题思路: 总共只有\(A C G T\)四个字符,那么我们可以按照各个字符进行匹配,比如按照\(A\)进行匹 ...

  8. Linux 常用工具sysstat之iostat

    命令解释 用于输出CPU和磁盘I/O相关的统计信息:iostat依赖于sysstat软件包 命令格式 iostat [ 选项 ] [<时间间隔> [<次数>]] 常用选项 -c ...

  9. Mybatis框架配置讲解以及使用

    1.什么是Mybatis MyBatis 是一款优秀的持久层框架, 它支持定制化 SQL.存储过程以及高级映射. MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.·MyB ...

  10. MGR监控报警

    一.报警思路 m.conf文件记录配置信息,只需要修改这个文件的内容即可(需要将mysql_stat.sh里面的信息写到这里,进行中) mysql_stat.sh文件作为MGR状态监测脚本,加入定时任 ...