Vue提高篇-模块打包工具webpack

1.准备

高效的开发离不开高效的打包工作,在学习webpack之前我们需要了解一些关于Node.js和NPM相关的知识,在此只会写出基本的用法,以应对接下来要写的重点-webpack。

Node.js官网:https://nodejs.org/en/

NPM中文网:https://www.npmjs.cn/

2.Node.js和NPM相关知识(此乃重点,需专学之,以通小理,贯通古今)

1.安装下载(window版本)

                     32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

                     64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

        2.安装步骤

                     步骤 1 : 双击安装包,如图1所示:

                     步骤 2 : 点击 Run(运行),如图2所示:

                     步骤 3 : 勾选接受协议再点击 next(下一步)  ,如图3所示:

                     步骤 4 : 安装目录选取再点击 next(下一步),如图4所示:

                     步骤 5 : 选择安装模式 , 然后点击下一步 next(下一步),如图5所示:

                     步骤 6 :点击 Install(安装) ,然后并点击 next(下一步),如图6所示:

                     步骤7:等待安装完成,如图7,图8,图9所示:

                     步骤8:检验是否安装成功

                                  检验path中是否存在nodejs:开始=》运行=》输入"cmd" =》 输入命令"path"

                                  检验nodejs版本:开始=》运行=》输入"cmd" =》 输入命令"node --version"

install-node-msi-version-on-windows-step1             install-node-msi-version-on-windows-step2              install-node-msi-version-on-windows-step3

                           图1                                                                    图2                                                                           图3                   

install-node-msi-version-on-windows-step4               install-node-msi-version-on-windows-step5                install-node-msi-version-on-windows-step6

                           图4                                                                   图5                                                                      图6

install-node-msi-version-on-windows-step7              install-node-msi-version-on-windows-step8              

                          图7                                                                      图8                                                                       图9

         3.如图9所示,下载安装完node的同时NPM也被安装,接下来就要撸一撸NPM,开始:

                          1.npm可以理解成一个巨大无比的数据库,里面保存着好多好多的用于开发的包,只需下载就行;

                          2.安装一个包的语句:npm install "包的名称",这里我得费几句话了:

                                            (1)安装位置是当前目录的 node_modules 文件夹里(没有这个文件夹,没关系,它会自己创建的);

                                            (2)安装的版本原则是:package.json的版本为先,如果没有那就下载最新版本;

                                            (3)在node环境中中,可以通过 var bao = require('包名'); 来使用你下载的包呦;

                                            (4)如果想安装全局包,那语句就变了:npm install -g "包的名称";

                          3.管理安装包,还是有所限定的有木有,那就要提到 package.json 了,具体包括:名称,版本,叙述等包相关信息;

3.webpack基础配置

1.本地创建一个文件夹,起名为 vuetest;

2.cmd进入dos系统,并进入刚刚创建的 vuetest文件夹,在此位置进行webpack的基础配置;

3.初始化配置:npm init ,有选的不用在意,回车到底,在 vuetest文件夹下会生成文件版本管理包:package.json;

4.本地安装webpack:npm install webpack --save-dev ,安装完成package 中就会出现webpack的字样了;

5.本地安装webpack-dev-server:npm install webpack-dev-server --save-dev ;这个用来提供启动服务器,接口代理等服务;

6.安装完成,查看package中是否存在 webpack webpack-dev-server;

4.vue组件在webpack中的书写

//一个简单的vue组件示例
<template>                         //自动封装的标签,无需再封装
    <div> 你好,{{name}} </div>    //组件的dom结构
</template>

<script>
    export default{          //ES6语法,导出这个组件的意思
        data:function(){     //组件内的data要写在回调函数中,原因是:组件会创建多个实例,避免共享数据
            name:"yjs"
        }
    }
</script>

<style scoped>            //scoped的作用是避免此css样式会影响其他组件或元素
    div{
        color:red;
    }
</style>

5.官方vue脚手架:vue-cli安装

 

       

展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页