Skip to content

V
vue-demo

Kwan的解忧杂货铺@新空间代码工作室 / vue-demo

通知 2
Star 0
Fork 0
V
vue-demo
提交 6bd72d20 编写于 作者: Kwan的解忧杂货铺@新空间代码工作室's avatar Kwan的解忧杂货铺@新空间代码工作室 🐭
浏览文件
操作

Initial commit

上级
展开全部 隐藏空白更改
内联 并排
Showing with 218 addition and 0 deletion
change-rows-color/babel.config.js 0 → 100644
浏览文件 @ 6bd72d20
module.exports = {
// 声明 babel 可用的插件
// 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}
change-rows-color/package-lock.json 0 → 100644
浏览文件 @ 6bd72d20
此差异已折叠。
change-rows-color/package.json 0 → 100644
浏览文件 @ 6bd72d20
{
"name": "change-rows-color",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/plugin-proposal-decorators": "^7.14.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"style-loader": "^3.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.42.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
change-rows-color/src/css/index.less 0 → 100644
浏览文件 @ 6bd72d20
html,
body,
ul {
margin: 0;
padding: 0;
li {
line-height: 30px;
padding-left: 20px;
font-size: 12px;
}
}
change-rows-color/src/index.html 0 → 100644
浏览文件 @ 6bd72d20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./index.js"></script> -->
<!-- <script src="../dist/main.js"></script> -->
<!-- <script src="../dist/bundle.js"></script> -->
<!-- 加载和引用内存中的 bundle.js -->
<!-- <script src="/bundle.js"></script> -->
</head>
<body>
<ul>
<li>这是第 1 个 li</li>
<li>这是第 2 个 li</li>
<li>这是第 3 个 li</li>
<li>这是第 4 个 li</li>
<li>这是第 5 个 li</li>
<li>这是第 6 个 li</li>
<li>这是第 7 个 li</li>
<li>这是第 8 个 li</li>
<li>这是第 9 个 li</li>
</ul>
<!-- 需求：把 /src/images/logo.jpg 设置给 src 属性 -->
<img src="" alt="" class="box">
</body>
</html>
\ No newline at end of file
change-rows-color/src/index1.js 0 → 100644
浏览文件 @ 6bd72d20
// 1. 使用 ES6 导入语法，导入 jQuery
import $ from 'jquery'
// 导入样式（在 webpack 中，一切皆模块，都可以通过 ES6 导入语法进行导入和使用）
// 如果某个模块中，使用 from 接收到的成员为 undefined，则没必要进行接收
import '@/css/index.css'
import '@/css/index.less'
// 导入 src/js/test/info.js
import '@/js/test/info.js'
// 1. 导入图片，得到图片文件
import logo from '@/images/logo.jpg'
console.log(logo)
// 2. 给 img 标签的 src 动态赋值
$('.box').attr('src', logo)
// 2. 定义 jQuery 的入口函数
$(function () {
// 3. 实现奇偶行变色
// 奇数行为红色
$('li:odd').css('background-color', 'red')
$('li:even').css('background-color', 'pink')
// 0 是偶数
// 1 是奇数
})
// 定义装饰器函数
function info(target) {
target.info = 'Person info.'
}
// 定义一个普通的类
@info
class Person {}
console.log(Person.info)
change-rows-color/src/js/test/info.js 0 → 100644
浏览文件 @ 6bd72d20
// import msg from '../../msg'
import msg from '@/msg.js'
// 建议大家使用 @ 表示 src 源代码目录，从外往里查找；不要使用 ../ 从里往外查找
// @/msg.js
console.log(msg)
change-rows-color/src/msg.js 0 → 100644
浏览文件 @ 6bd72d20
export default {
msg: 'hello Vue.'
}
change-rows-color/test/test.html 0 → 100644
浏览文件 @ 6bd72d20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img src="./logo.jpg" alt="" />
<!-- 精灵图 -->
<img
src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAASABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAMEBQIG/8QAJhAAAgICAgEBCQAAAAAAAAAAAQIAAwQRBSExBhITFCIjMkFRYf/EABgBAAIDAAAAAAAAAAAAAAAAAAQFAQID/8QAHREAAgMAAgMAAAAAAAAAAAAAAAECAxEEMRIyM//aAAwDAQACEQMRAD8ArcZwXtoMhGpINnulF7eW0D11/ZfxbGsutw8mlPl3sEb0QdESDE5tMTjhRS1RuFxsDsFYKNAdb/PUp05DPmF1tJZlYsQ3kkiAybeN9jiEUtSzCPkPT9nxROGv0mG9E/af1E6yeXai41h3Ygd6Y9GJvGVudAs66PJ6zEoZluUqSDvyDNzMZlw2ZWIOvIMRIv8AdFuJ85Hn/MRELFx//9k="
alt=""
/>
</body>
</html>
change-rows-color/webpack.config.js 0 → 100644
浏览文件 @ 6bd72d20
const path = require('path')
// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
// 指定要复制哪个页面
template: './src/index.html',
// 指定复制出来的文件名和存放路径
filename: './index.html'
})
// 注意：左侧的 { } 是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 使用 Node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
// 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
// devtool: 'eval-source-map',
// 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
devtool: 'nosources-source-map',
// mode 代表 webpack 运行的模式，可选值有两个 development 和 production
// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；
// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！
mode: 'development',
// entry: '指定要处理哪个文件'
entry: path.join(__dirname, './src/index1.js'),
// 指定生成的文件要存放到哪里
output: {
// 存放的目录
path: path.join(__dirname, 'dist'),
// 生成的文件名
filename: 'js/bundle.js'
},
// 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
plugins: [htmlPlugin, new CleanWebpackPlugin()],
devServer: {
// 首次打包成功后，自动打开浏览器
open: true,
// 在 http 协议中，如果端口号是 80，则可以被省略
port: 80,
// 指定运行的主机地址
host: '127.0.0.1'
},
module: {
rules: [
// 定义了不同模块对应的 loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理 .less 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件的 loader
// 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
// 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
// 使用 babel-loader 处理高级的 JS 语法
// 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
// 因为第三方包中的 JS 兼容性，不需要程序员关心
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
},
resolve: {
alias: {
// 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
'@': path.join(__dirname, './src/')
}
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或