Vue视频课程学习（二）

最新推荐文章于 2025-07-01 10:37:12 发布

xxloocee

最新推荐文章于 2025-07-01 10:37:12 发布

阅读量741

点赞数

CC 4.0 BY-SA版权

分类专栏： ĴS视频课程

本文链接：https://blog.youkuaiyun.com/x1151605848/article/details/84425807

ĴS视频课程专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍Webpack的基本使用，包括处理JS依赖、兼容性问题及配置文件，同时深入探讨如何结合Vue进行项目开发，涵盖组件渲染、路由配置及样式处理等关键知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

七、nrm

八、webpack

webpack的基本使用

//main.js是项目的JS入口文件

// 导入 Jquery
// import *** from *** 是ES6中导入模块的方式
// ES6的代码太高级了，浏览器无法解析，这一行会报错
import $ from 'jquery'
// const $ = require('jquery')


$(function() {
    $('li:odd').css('backgroundColor', 'lightblue')
    $('li:even').css('backgroundColor', function() {
        return '#' + 'D97634'
    })

})


//webpack可以做的事情：
// 1. webpack能够处理js文件的相互依赖关系
// 2. webpack能够处理js的兼容问题，把高级的、浏览器不支持的语法，转化为低级的浏览器能正确识别的语法
// webpack 要打包的文件路径 打包好的输出文件的路径

webpack基本的配置文件

使用webpack-dev-sever工具实现自动打包编译功能

需要更改引入路径：

webpack-dev-sever的常用命令参数

html-webpack-plugin中的两个操作

loader--配置处理css样式表的第三方loader

webpack中url-loader的使用

webpack中使用url-loader处理字体文件

关于webpack和npm中的几点问题

json文件中不能写注释，“不是内部也不是外部命令”一般有两种情况，一是没有安装，二是环境变量

webpack中的babel配置

使用vue实例的render方法渲染组件

在webpack构建的项目中，使用vue开发

或者

在vue中结合render函数渲染指定的组件到容器中

//函数简写为：
render: c => c(login)

总结，在webpack中使用vue

export default和export的使用方式

结合webpack使用vue-router

结合webpack使用children子路由

组件中style标签lang属性和scoped属性

抽离路由模块