初识VUE

最新推荐文章于 2023-08-28 23:20:24 发布

loveZyourself

最新推荐文章于 2023-08-28 23:20:24 发布

阅读量701

点赞数

分类专栏：前端学习之路文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46041371/article/details/125855966

版权

前端学习之路专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初识vue

一、基本语法

1、let声明变量

let 声明的变量有局部作用域
let只能声明一次（不能有相同的变量名）

2、const声明常量（只读变量）

用const定义，变量名最好用大写
声明就必须初始化，而且不能修改

3、结构赋值

解构赋值是对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

//1、数组解构
let [cc, d, e] = [1, 2, 7];//ES6
let a = 1, c = 2; //传统

//2、对象解构
let user={name: 'hello',age: 18}
//ES6
let {name,age}=user;//注意：解构的变量必须是user中的属性
//传统
let name1=user.name,age1=user.age;
console.log(name,age)

4、模板字符串

模板字符串相当于加强版的字符串，用反引号``除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式

  // 1、多行字符串 ``
    let string = `你好啊
    ，
    嘿嘿嘿`
    console.log(string);
    // 你好啊
    // ，
    // 嘿嘿嘿

    //2、字符串插入变量和表达式
    let name2 = "loveyourself"
    let age2 = 18
    let info = `我叫 ${name2},我明年 ${age2 - 1}岁.`
    console.log(info)

    //3、字符串里面可以调用函数
    function f() {
        return '调用f函数'
    }
    let str2 = `你好,${f()}`;
    console.log(str2);//你好调用f函数

5、声明字符串

let age=18;
let name= "loveyourself"
//ES6
let person={name,age};
 console.log(person);//{name: 'loveyourself', age: 18}
//传统
let peroson2={name,age};
 console.log(person2);//{name: 'loveyourself', age: 18}

6、定义方法简写

// 传统
const person1 = {
    sayHi:function(){
        console.log("Hi")
    }
}
person1.sayHi();//"Hi"

// ES6
const person2 = {
	sayHi(){
        console.log("Hi")
    }
}
person2.sayHi()  //"Hi"

7、对象拓展运算符（…）

 //1、拷贝对象
    let stu = { name: 'stu1', age: 18 };
    let coptStu = { ...stu };
    console.log(coptStu);//{name: 'stu1', age: 18}
    //2、合并对象
    let sno = { sno: 001 };
    let className = { className: 'soft' };
    let coptStu2 = { ...sno, ...className };
    console.log(coptStu2);//{sno: 1, className: 'soft'}

8、箭头函数

   //ES6 let 函数名=(参数1，参数2)=>{函数体}
    let sum = (a, b) => {
        let c = a + b
        return c
    }
    console.log(sum(1, 2))
    //只有一个参数
    let oneParameter = a => {
        console.log("只有一个参数：" + a);
    }
    oneParameter("one");
    //没有参数
    let noNumber = () => {
        return "无参数"
    }
    console.log(noNumber())
    //当箭头函数体有多行语句用{}包裹起来，表示代码块
    //当只有一行语句，并且需要返回结果时可以省略{},结果会自动返回。
    let noNumber2 = () => "没有参数啊"
    console.log(noNumber2())

二、VUE入门

1、Vue.js 是什么

Vue (类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、初始化VUE.js

<body>
    <!-- id标识vue作用的范围 -->
    <div id="app">
        <!-- {{}}插值表达式，绑定vue中的data数据 -->
        {{message}}
    </div>
</body>
<script>
    new Vue({
        el: '#app',//绑定vue作用的范围
        data: {
            //定义页面中显示的模型数据
            message: 'Hello Vue!'
        }
    })
</script>

3、基本语法

数据渲染和指令v-blind特性被称之为指令。指令带有前缀v-除了使用插值表示进行数据渲染，也可以用v-bind指令，她的简写的形式就是一个冒号（:）

v-bind

    <div id="app">
        <!-- v-bind绑定一个数据在这不用插值表达式了{{}} -->
        <h1 v-bind:title="message">
            {{content}}
        </h1>
        <!-- 简写 -->
        <h1 :title="message">
            {{content}}
        </h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '标题',
                message: '页面加载与' + new Date().getTime().toLocaleString(),

            }
        })
    </script>

双向数据绑定 v-model

<div id="app">
        <!-- 单向绑定，这里改变最下面不改变 -->
        <input type="text" v-bind:value=" map.key"></input>
        <!-- 双向绑定有点像地址指向，这里改变下面显示的也会改变 -->
        <input type="text" v-model=" map.key"></input>

        你要查询的是：{{map.key}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                map: {
                    key: 'you'
                }
            }
        })
    </script>

事件 v-on

<div id="app">
        <!-- 单向绑定，这里改变最下面不改变 -->
        <input type="text" v-bind:value=" map.key"></input>
        <!-- 双向绑定有点像地址指向，这里改变下面显示的也会改变 -->
        <input type="text" v-model=" map.key"></input>
        你要查询的是：{{map.key}}
        <!-- v-on事件 -->
        <button v-on:click="search()">搜索</button>
        <button @click="search()">搜索</button>
        <!-- 没有参数可以省略括号 -->
        <br>
        <button @click="search">搜索</button>
        <p><a v-bind:href="result.URL" target="_blank">{{result.title}}</a></p>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                map: {
                    key: 'you'
                },
                result: {}
            },
            //注意这里是methods
            methods: {
                search() {
                    console.log("搜索");
                    this.result = {
                        "title": '查询结果',
                        "URL": "/http"
                    }
                }
            }
        })
    </script>

修饰符prevent

<div id="app">
        <!-- 修饰符用于指出一个指令应该以特殊方式绑定。这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：即阻止表单提交的默认行为 -->
        <form action="save" v-on:submit.prevent="onSubmit">
            <label for="username">
                <input type="text" id="username" v-model="user.username">
                <button type="submit">保存</button>
            </label>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user: {}
            },
            methods: {
                onSubmit() {
                    if (this.user.username) {
                        console.log('提交表单')
                    } else {
                        alert('请输入用户名')
                    }
                }
            }
        })
    </script>

条件渲染

v-if 条件指令,v-show指令

v-if是真正的条件渲染，她会确保在切换过程中条件块内的时间监听器和子组件适当地被销毁和重建。
v-id也是惰性的：如果在初始条件为假，则什么也不做–知道条件第一次变为真时，才会开始渲染条件块。
v-show不管初始条件是什么，元素总会被渲染，并且只是简单的基于css进行进行简单的切换。
一般来说v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此如果需要非常频繁的切换，则使用v-show。如果在运行时条件很少改变，则使用v-if较好。

<div id="app">
        <input type="Checkbox" v-model="ok" label="">同意 </input>
        <h4 v-if="ok">选中了</h4>
        <h4 v-else="ok">没有选中</h4>
        <h3 v-show="ok">选中了</h3>
        <h3 v-show="!ok">没选中</h3>
    </div>
    <script src=" vue.min.js">
    </script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: false
            }
        })
    </script>

列表渲染指令 v-for

例1：简单的列表渲染

<div id="app">
        <!-- 1、简单的列表渲染 -->
        <li v-for="n in  10">{{n}}</li>
        <!-- 如果想获取索引，则使用index关键字(从0开始)，注意，圆括号中的index必须放在后面-->
        <li v-for="(n,index) in 5">{{index}} ---{{n}}</li>
</div>
<script>
        new Vue({
            el: '#app'
        })
</script>

例2：遍历数据列表

<div id="list">
        <table border="1">
            <tr v-for="(user,index) in userList">
                <td>{{index}}</td>

                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#list',
            data: {
                userList: [{ id: 1, username: '刘洪涛', age: 10 },
                { id: 2, username: '红桃六', age: 15 },
                { id: 3, username: 'Hongtao Liu', age: 20 }]
            }
        })
    </script>

三、VUE 进阶

1、组件

组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象称为一个组件树。
在这里插入图片描述

局部组件

<div id="app">
        <navBar></navBar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            // 定义局部组件，这里可以定义多个局部组件
            data: {},
            components: {
                //组件的名字
                'Navbar': {
                    //组件的内容
                    template: '<ul><li>首页</li><li>学员管理</li></ul>'
                }
            }
        })
    </script>

全局组件

// 定义全局组件
Vue.component('nav', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

<div id="app">
    <Navbar></Navbar>
</div>
<script src="vue.js"></script>
<script src="nav.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>

2、实例生命周期

页面到加载到销毁过程。
在这里插入图片描述

 <div id="app">
        <button v-on:click="update()">更新</button>
        <p id="p">{{message}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: '周杰伦'
            },
            methods: {
                show() {
                    console.log("执行show方法");
                },
                update() {
                    this.message = 'JayZhou'
                }
            },
            //1初始化最开始加载的,是在data和method加载之前执行
            beforeCreate() {
                //debugger;
                //console.log(this.message);
                //this.show();
            },
            //2是在method加载之后执行，在data之前
            created() {
                // debugger;
                // console.log(this.message);
                // this.show();
            },
            //3 beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
            beforeMount() {
                // debugger;
                console.log(document.getElementById('p').innerText) //{{ message }}
            },
            //4此时数据渲染到页面中
            mounted() {
                console.log(document.getElementById('p').innerText)
            },
            //5 数据更新的前一刻，内存中更新了但是数据没有渲染
            beforeUpdate() { // 数据更新的前一刻

                console.log('界面显示的内容：' + document.getElementById('p').innerText)
                console.log('data 中的 message 数据是：' + this.message)
                // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
            },
            //6数据更新
            updated() {
                debugger
                console.log('界面显示的内容：' + document.getElementById('p').innerText)
                console.log('data 中的 message 数据是：' + this.message)
                // updated执行时，内存中的数据已更新，并且页面已经被渲染
            },
        //7.生命周期第七个函数,该函数执行时,Vue中【所有数据 methods componet 都没销毁】
		beforeDestory(){
        },
            //8.生命周期的第八个函数,该函数执行时,【Vue实例彻底销毁】
        destoryed(){ 
        }
        })
    </script>

3、路由

vue.js路由允许我们通过不同的URL访问不同的内容。通过vue.js可以实现多视图的单页web应用。vue.js路由需要载入vue-router库。

 <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <router-view></router-view>
    
</body>
<script src="vue-router.js"></script>
    <script src="vue.min.js"></script>
    <script>
        //1、定义（路由）组件，可以从其他文件import进来
        const Welcome = { template: '<div>欢迎</div>' }
        const Student = { template: '<div>studentlist</div>' }
        const Teacher = { template: '<div>teacherList</div>' }
        //2、定义路由 每个路由应该映射一个组纪检
        const routes = [{ path: '/', redirect: '/welcome' },//设置默认指向路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
        ]
        //3、创建router 实例，然后传`routes`配置
        const router = new VueRouter({
            routes: routes
        })
        //4、创建和挂在根实例。使整个应用都有路由功能
        const app = new Vue({
            el: '#app',
            router
        })
    </script>

4 、axios

模拟后台数据 data.jaon

{
    "success": true,
    "code": 20000,
    "message": "成功",
    "data": {
        "items":[
            {"name": "刘洪涛","age": 15},
            {"name": "红桃六","age": 20},
            {"name": "Hongtao Liu","age": 25}
        ]
    }
}

<div id="app">
        <table>
            <!-- table必须打，不打的话无法for循环 -->
            <tr v-for="a in memberList">
                <td> {{a.name}}</td>
                <td>{{a.age}}</td>
            </tr>
        </table>
    </div>
    <script src="vue-router.js"></script>
    <script src="vue.min.js"></script>
    <script src="axios.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                memberList: []
            },
            methods: {
                getList() {
                    //axios.get("/后台地址")
                    axios.get('data.json')//获得数据
                        .then(response => {
                            console.log(response);
                            console.log(response.data);
                            console.log(response.data.data);
                            console.log(response.data.data.items);
                            this.memberList = response.data.data.items
                        })
                        .catch(error => {
                            console.log(error);
                        })
                }
            },
            created() {
                this.getList()
            },
        })
    </script>

这里可以查看控制台输出的数据

5、element-ui

官网：[]((https://element.eleme.cn/#/zh-CN)

编写页面,引入组件库。注意引入ele.js的时候必须先引入vue.js.

<div id="app">
        <el-row>
            <el-button>默认按钮</el-button>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
    <script src="vue-router.js"></script>
    <script src="vue.min.js"></script>
    <script src="axios.js"></script>
    <!-- 引入elementui时候需要先引入vue -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }]
                }
            }
        })
    </script>

四、Node.js

1、下载

官网：https://nodejs.org/en/

中文网：http://nodejs.cn/

LTS：长期支持版本,稳定

Current：最新版

2、安装

node地址
在这里插入图片描述

设置环境变量：目的是在任何目录都可以自行node命令和vue命令。

path中增加D:\software\node\node_global
在这里插入图片描述

查看node版本 node -v

如果无法查看可以试一下更改文件权限

3、快速入门

创建 01-hello.js

console.log('Hello,Node.js')

在vs打开命令行终端，进入到程序所在的目录，输入

cd 文件夹
node 01-hello.js

Node.js是脱离浏览器环境运行的JavaScript程序，基于V8 引擎（Chrome 的 JavaScript的引擎）。

4、服务器端应用开发（了解）

创建 02-server-app.js

const http = require('http');
http.createServer(function (request, response) {
    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    response.end('Hello Server');
}).listen(88);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:88/');

运行服务器程序

node 02-server-app.js

服务器启动成功后，在浏览器中输入：http://localhost:88/ 查看webserver成功运行，并输出html页面

停止终端服务：ctrl + c

五、NPM包管理器

1、介绍

npm全称Node Package Manager,是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具相当于Maven。通过npm可以方便的下载js库，管理前端工程。

在命令行输入npm-v可查看当前npm版本

2、使用npm管理项目

新建一个文件夹，项目初始化

#建立一个空文件夹，在命令提示符进入该文件夹,执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y
#返回上一级
cd ..
##进入该文件
cd 文件名 
#创建文件夹
mkdir 文件名

3、修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

4、npm install命令的使用

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目

#如果安装时想指定特定的版本
npm install jquery@3.5.0


#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint


#全局安装
#Node.js全局安装的npm包和工具的位置：E:\program\nodejs\node_global\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack

5、其它命令

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

六、Babel的使用

1、安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install --global babel-cli
#查看是否安装成功
babel --version

2、创建文件

src/example.js

下面是一段ES6代码：

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)

3、创建并配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

{
    "presets": [],
    "plugins": []
}

presets字段设定转码规则，将es2015规则加入 .babelrc：

  {
    "presets": ["es2015"],
    "plugins": []
}

4、安装转码器

在项目中安装

npm install --save-dev babel-preset-es2015

5、转码

# 转码结果写入一个文件
mkdir dist //创建文件夹

# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist/compiled.js
# 或者简写
babel src/example.js -o dist/compiled.js

# 整个目录转码
mkdir dist2 //创建新文件夹
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者简写
babel src -d dist2

七、模块化简介

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）了。

一、模块化开发

传统非模块化开发有如下的缺点：

命名冲突
文件依赖

模块化规范：

CommonJS模块化规范（es5）
ES6模块化规范

二、CommonJS模块规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

1、创建“modules”文件夹

2、导出模块

创建 es5/f1.js

//定义成员
const m1 = function(){
    return '方法1'
}
const m2 = function(){
    return '方法2'
}

//导出模块中的成员
module.exports = {
    m1: m1,
    m2: m2
}
//简写
module.exports = {
    m1,
    m2
}

3、导入模块

创建 es5/f2.js

//引入模块，注意：当前路径必须写 ./
const m = require('./f1.js')
console.log(m)
console.log(m.m1)
console.log(m.m2)

4、运行程序

node es5/f2.js

CommonJS使用 exports 和require 来导出、导入模块。

三、ES6模块化规范

ES6使用 export 和 import 来导出、导入模块。

注意：ES6的模块化无法在Node.js中执行，需要用Babel转换成ES5后再执行。

创建es6目录，执行：

npm init -y

复制上一节的.babelrc

在项目中安装

npm install --save-dev babel-preset-es2015

1、导出模块

创建 es61/f1.js

export function m1(){
    return '方法1'
}

export function m2(){
    return '方法2'
}

export function m3(){
    return '方法3'
}

2、导入模块

创建 es61/f2.js

//只取需要的方法即可，多个方法用逗号分隔
import { m1, m3 } from "./f1.js"
console.log(m1())
console.log(m3())

3、转码

mkdir es61-dist
babel es61 -d es61-dist

4、运行程序

node es6/es61-dist/f2.js

四、ES6模块化的另一种写法

1、导出模块

创建 es62/f1.js

export default {
	m1(){
		return '方法1'
	},
    m2(){
		return '方法2'
	},
	m3(){
		return '方法3'
	},
}

2、导入模块

创建 es62/f2.js

import m from "./f1.js"
console.log(m.m1())
console.log(m.m2())

3、转码

mkdir es62-dist
babel es62 -d es62-dist

4、运行程序

node es6/es62-dist/f2.js

八、什么是Webpack

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack可以将多种资源js，css，less转换成一个静态文件，减少了页面的请求。
在这里插入图片描述

webpack安装

## 全局安装
npm install -g webpack webpack-cli
##安装后查看版本号
webpack -v

初始化项目

1、创建webpack文件夹

进入webpack目录，执行命令

npm init -y

2、创建src文件夹

3、src下创建common.js

exports.info = function (str) {
    document.write(str);
}

4、src下创建utils.js

exports.add = function (a, b) {
  return a + b;
}

5、src下创建main.js

const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

JS打包

1、webpack目录下创建配置文件webpack.config.js

以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块
module.exports = {
  entry: './src/main.js', //配置入口文件
  output: {
    path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
    filename: 'bundle.js' //输出文件
  }
}

2、命令行执行编译命令

webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并执行了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
    //...,  
  "dev": "webpack --mode=development"
}

运行npm命令执行打包

npm run dev

3、webpack目录下创建index.html

引用bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

4、浏览器中查看index.html

CSS打包

1、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
      path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
      filename: 'bundle.js' //输出文件
    },
    module: {
      rules: [ 
        {
          test: /\.css$/,    //打包规则应用到以css结尾的文件上
          use: ['style-loader', 'css-loader']
        }
      ]
    }
}

3、在src文件夹**创建style.css

body{
	background:pink;
}

4、修改main.js*

在第一行引入style.css

require('./style.css');

5、浏览器中查看index.html

loveZyourself

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识VUE

学习：https://www.bilibili.com/video/BV1eM4y1w7uA?share_source=copy_web&vd_source=05b9ea678050c758b28718dc65d28a01
复制链接

扫一扫

专栏目录