小白上学のwebpack+vue初级使用指南

PascalXie 发布于2019-08-20 11:38 / 2166人阅读

摘要：但我们今天学的是，原因我还不会而且新手还是学习为主吧。原因中文文档全，学习曲线简单，很容易上手。后续总结在学习打包工具过程中由于出现的问题各种蛋疼，让很多人都半途而废。大家互相学习共同进步本节讲的都是很基础的东西，自己可以延展一下。

写这篇文章的时候先说一下原因：
webpack：现在很流行的打包工具；推荐原因：学习成本比gulp，fis3等简单，就是这么直接！
vue：国人开发的MVVM框架，一点都不逊于recat，vue2.0的执行速度比recat都快！推荐原因：http://www.cnblogs.com/terry0...这里很权威。但我们今天学的是vue1.0，原因：vue2.0我还不会(^_^)!而且新手还是vue1.0学习为主吧。原因：中文文档全，学习曲线简单，很容易上手。

课程开始：
需要技能：
1>.node.js环境
2>.npm 会使用 (我的笔记中有smart-npm可以解决npm慢的问题)
3>.vue 最基本的{{}}符号会用（不会的去vue官网看5分钟教程就会）
4>.ES6 基本知道import是什么东西就行

适用学习人群：用过vue，但不知道如何和webpack一起结合使用的迷茫者；
项目创建
这里已经安装过nodejs，npm，webpack
1.用命令行工具进入你需要创建模板文件夹输入：

$ mkdir myvuetest
$ cd myvuetest
$ npm init

你会发现文件中出现了package.json暂时不用管；

2.在项目目录下新建index.html




    
    Vue example


    {{message}}

3.在根目录创建src文件夹，并在该文件夹下建立main.js

import Vue from "vue"
new Vue({
    el:"body",
    data:{
        message:"test success!"
    }
});

设置webpack
1.安装webpack，webpack-dev-server以及相关的loaders

# 全局安装webpack，webpack-dev-server，全局安装因为其他项目也会使用到这两个包
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 为项目安装其他依赖 下面i是install的简写，注意vue@1.0是安装vue1.0版本的不然会出错；-D是--save-dev的简写，用于生成package.json中对应的包名称，便于日后管理
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue@1.0 vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

这里解释一部分包的作用：
webpack-dev-server：用户建立node的服务器环境，就是可以用lacalhost：8080等端口方式浏览文件
webpack-merge：开发环境和生产环节的webpaak配置文件的配置合并
css-loader：编译写入css
style-loader：把编译后的css整合进html
file-loader：编译写入文件，默认情况下生成文件的文件名是文件名与MD5哈希值的组合
vue：vue主程序
vue-laoder：编译写入.vue文件
vue-html-loader：编译vue的template部分
vue-style-loader：编译vue的样式部分
vue-hot-reload-api：webpack对vue实现热替换
babel-core：ES2015编译核心

babel-loader：编译写入ES2015文档
babel-preset-es2015：ES2015语法
babel-preset-stage-0：开启测试功能
babel-runtime：babel执行环境

2.配置webpack.config.js
在根目录下建立webpack.config.js，配置如下：

var path = require("path");
module.exports = {
  entry: "./src/main.js",
  //定义webpack输出的文件，这里设置了让打包后生成的文件放在dist文件夹下的build.js文件中
  output: {
    path: "./dist",
    publicPath:"dist/",
    filename: "build.js"
  },
  module: {
    loaders: [
      //转化ES6语法
      {
        test: /.js$/,
        loader: "babel",
        exclude: /node_modules/
      },
      //图片转化，小于8K自动转化为base64的编码
      {
        test: /.(png|jpg|gif)$/,
        loader:"url-loader?limit=8192"
      }
    ]
  },
  //这里用于安装babel，如果在根目录下的.babelrc配置了，这里就不写了
  babel: {
     presets: ["es2015","stage-0"],
     plugins: ["transform-runtime"]
  }
}

完成该配置我们在命令中运行：

$ webpack

打开index.html就可以看到浏览器中看到我们刚刚写的文字了。

后续总结：在学习打包工具过程中由于出现的问题各种蛋疼，让很多人都半途而废。我经历了半途而废又重新捡起来，搜别人的问题解决自己的问题，然后就慢慢学会了。大家互相学习共同进步！本节讲的都是很基础的东西，自己可以延展一下。还有我推荐的是webpack+ES6+vue的新手学习模式！这样你就不会被互联网技术淘汰！可以关注我，我这个人挺懒的很久才写一篇，但都是用最基础的讲通大家学习的疑惑！值得关注哦！^_^

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80676.html

小白上学のWebpack零基础学习指导

摘要：以上代码功能很简单，就是把定义为一个模块，在中引用，最终两文件中要添加的内容都显示在中。我们的任务完成了，成功生成，合并，引入了，被执行了。安装，处理文件。前言：本套教程是零基础学打包工具webpack；后面会结合gulp+webpack搞定所有你得需求；闲谈：百度搜了一下，虽然教程多，但是杂乱无章，实用的没多少，都是匆匆了事，所以我就自己学了两天，现在从最底层教大家完成we...

陈伟 2019-08-21 10:56 评论0 收藏0
小白上学のWebpack零基础学习指导

摘要：以上代码功能很简单，就是把定义为一个模块，在中引用，最终两文件中要添加的内容都显示在中。我们的任务完成了，成功生成，合并，引入了，被执行了。安装，处理文件。前言：本套教程是零基础学打包工具webpack；后面会结合gulp+webpack搞定所有你得需求；闲谈：百度搜了一下，虽然教程多，但是杂乱无章，实用的没多少，都是匆匆了事，所以我就自己学了两天，现在从最底层教大家完成we...

spademan 2019-08-29 11:03 评论0 收藏0
小白上学のWebpack零基础学习指导

摘要：以上代码功能很简单，就是把定义为一个模块，在中引用，最终两文件中要添加的内容都显示在中。我们的任务完成了，成功生成，合并，引入了，被执行了。安装，处理文件。前言：本套教程是零基础学打包工具webpack；后面会结合gulp+webpack搞定所有你得需求；闲谈：百度搜了一下，虽然教程多，但是杂乱无章，实用的没多少，都是匆匆了事，所以我就自己学了两天，现在从最底层教大家完成we...

Galence 2019-08-01 15:32 评论0 收藏0
小白上学のcanvas零基础

摘要：二次以及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。绘制三次贝塞尔曲线，为结束点，为控制点一，为控制点二。下边的图能够很好的描述两者的关系，二次贝塞尔曲线有一个开始结束点蓝色以及一个控制点红色，而三次贝塞尔曲线使用两个控制点。元素看起来和元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，标签只有两个属性—— width和height。当没有...

zhaot 2019-08-29 11:05 评论0 收藏0