Vue学习之四(webpack+项目搭建)

标签: webpack 最简单的项目搭建
8人阅读 评论(0) 收藏 举报
分类:

过滤器

  • 局部过滤器:写在组件的对象中 和data同级.filter()
  • 全局过滤器: 组件定义外部Vue.filters()

webpack学习

是什么?

  • 前端资源化模块化管理和打包工具;
  • 按照依赖关系打包生成符合生产环境的静态资源;
  • 异步按需加载;

核心概念

  • entry 入口; 项目的打包入口文件
  • output 出口; 经webpack打包生成结果
  • Loader 模块资源转换器(需npm安装); 让webpack打包非.js文件
    • webpack.config.js 配置文件 默认会搜索当前目录下的该文件
      • devDependencies开发版第三方库
      • dependencies生产版第三方库
      • dev脚本,开启node run dev运行它的代码
  • plugins 插件
//安装到本地node_modules
var webpack = require('webpack')
const path = require('path')

module.exports = {
    entry: './entry.js', //配置打包的入口文件
    output: { //出口
        path: path.join(__dirname), //打包的东西放在哪个文件夹下
        filename: 'bundle.js' //最终打包生成文件名称
    },
    module: { //loader的配置
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] //从右到左执行  先读取,加到头部
        }]
    },
    plugins: [
        new webpack.BannerPlugin('这个文件是zhaolin创建的')
    ]
}

第三包的信息package.json文件

  • npm init -y创建package.json文件 记录第三方包文件;在黑窗执行npm install 自动安装node_modules;
  • 安装本地 webpack npm i webpack @3.11.0 -D开发版本

webpack打包时的参数

  • webpack –progress 查看进度条
  • –config 文件名 配置文件webpack.config.dev.js
  • –p 压缩
  • –watch 监控(内容更改时自动重新打包)

  • npm i -D/-S -D:开发环境;-S:生产环境

webpack + vue 搭建项目(页面看到Hello Vue)

  • 1.创建必要的文件和文件夹
    * |-src
    *    |-App.vue 项目根组件
    *    |-main.js 项目打包的入口文件
    * |-package.json 项目记录文件,记录安装哪些第三方包
    * |-webpack.config.dev.js 配置文件
    * |-template.html
  • 2.写上必要代码
    App.vue 根组件
<template>
  <div>
      <h1>Hello Vue!</h1> 
      <p>测试热重载</p>
  </div>
</template>

main.js 导入根组件,利用vue框架创建的render函数渲染根组件

import Vue from 'vue'  //相当于var Vue=require('vue')

//导入根组件
import App from './App.vue'
//创建根实例
new Vue({
    el:"#app",
    //利用vue框架创建的render函数渲染根组件
    render:function(createElement){
        return createElement(App);
    }
})

webpack.config.dev.js 配置文件

const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    entry:'./src/main.js',//入口
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    plugins:[
        /* 以template.html文件为参照文件,生成index.html;
        并且发布到webpack-dev-server开启的node服务器上 */
        new HtmlWebpackPlugin({
            template:'./template.html'
        })
    ]
}
  • 3.使用webpack-dev-serverhtml-webpack-plugin

    • html-webpack-plugin
      a.以一个参考文件为模版,生成index.html,并且会自动发布到webpack-dev-server开启的node服务上面去
      b.创建template.html文件,包含#app标签;
      c.配置文件中写plugins数组

    • webpack-dev-server 写package.json中的scripts中

      • webpack-dev-server --progress --config webpack.config.dev.js --port 6008 --open --hot
      • --hot 热重载(更改内容后不刷新页面更改)
  • 4.最终运行 根目录下 执行npm run dev

需要安装的第三方包

  • 第一次安装
    包:vue
    应用场景:我们要去运行App.vue
    安装方式:npm i vue -S
  • 第二次安装
    包:vue-loader vue-template-compiler css-loader style-loader
    应用场景:我们要打包.vue结尾的文件
    安装方式:npm i vue-loader vue-template-compiler css-loader style-loader -D
  • 第三次安装(两个版本应该对应)
    包:html-webpack-plugin webpack@3.11.0 webapck-dev-server@2.11.1
    应用场景:我们到时候运行打包出来的bundle.js
    安装方式:npm i html-webpack-plugin webpack@3.11.0 webpack-dev-server@2.11.2 -D
查看评论

Esper学习之四:Context

Context是Esper里一个很有意思的概念,要是理解为上下文,我觉得有点不妥。以我的理解,Context就像一个框,把不同的事件按照框的规则框起来,并且有可能有多个框,而框与框之间不会互相影响。不...
  • luonanqin
  • luonanqin
  • 2013年09月04日 20:51
  • 12991

vue项目搭建步骤

一. vue-cli初始化 1. 全局安装 vue-cli npm install --global vue-cli 2. 创建一个基于 webpack 模板的新项目 vue init webpack...
  • echo008
  • echo008
  • 2017年08月11日 15:49
  • 1935

Vue.js系列之项目搭建(1)

今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩的,现在项目要上线了,所以记录一些...
  • u013778905
  • u013778905
  • 2016年12月24日 17:26
  • 7891

webpack+搭建vue开发环境配置(二)

webpack开发环境配置步骤 ps: 手动搭建vue, 配置开发环境webpack * 搭建项目目录结构 * 安装 &amp; 配置 * html-webpack-plugin生成...
  • Smile_ping
  • Smile_ping
  • 2018年04月01日 20:27
  • 3

vue项目搭建

安装vue-cli,搭建vue项目
  • qq_27965129
  • qq_27965129
  • 2017年01月12日 20:24
  • 325

浅谈Vue(Vue项目搭建)

vue项目环境搭建,vue脚手架搭建。vue-cli
  • github_37847992
  • github_37847992
  • 2017年07月26日 17:27
  • 241

Vue项目搭建

好吧,很久没碰过这个blog。有什么笔记我都是记在现实的笔记本上面,无奈有时候记得乱,找不到,这边mark down。 最近在做Vue项目,搭建环境避免不了。一开始学习的时候,还是先学webpack...
  • yxmanyxman
  • yxmanyxman
  • 2017年02月12日 14:15
  • 1241

十分钟搞定Vue搭建

既然你来到了这里,肯定你知道vue是什么,具体我也就不说了。 废话不多说。 Vue推荐开发环境Node.js 6.2.0、npm 3.8.9、webpack 1.13、vue-cli 2.5...
  • sinat_29412671
  • sinat_29412671
  • 2016年12月16日 11:08
  • 19882

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作之前写的博客没有采用打包工具,而是直接引用js的方式来做的。这种方式很扯淡,也因此,我写了三篇博客之后就没有再写了。通过几个月...
  • FungLeo
  • FungLeo
  • 2016年11月15日 14:43
  • 51415

cordova学习之六插件安装

以下是一些插件的安装,会不定时更新 1.cordova FileTransfer cordova plugin add cordova-plugin-file-transfer 2.cordova...
  • ying_zcx
  • ying_zcx
  • 2017年06月27日 10:27
  • 230
    个人资料
    等级:
    访问量: 0
    积分: 70
    排名: 0
    文章分类
    文章存档