vue学习整理
2024-10-09 18:52:36
1、webpack+vue自定义路径别名
vue-cli 用的是webpack,也可以使用webpack自定义别名这个功能,自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径,直接使用自定义别名就可以找到文件的位置。
设置方法:
**设置地址:**build文件夹下面的webpack.base.conf.js文件
具体设置:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'static':path.resolve(__dirname, '../static'),//增加这一行代码
}
},
使用方式:
使用的时候要像下方截图的B处一样前面要加上一个’~’,这里的webstorm虽然提示报错,我们可以不用管,代码运行是正常的。
- 加载不同类型的模块,配置module.rules
module.rules制定了一系列不同文件格式的加载方式和解析方式
module: {
rules: [
{
test: /\.css/,
use: ['style-loader','css-loader'],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
每个规则可以分为三部分 - 条件(condition),结果(result)和嵌套规则(nested rule)。
这其中rules数组就是loader用来的匹配和转换资源的规则数组。
test代表匹配需转换文件的正则表达式。
而use数组代表用哪些loader去处理这些匹配到的文件。
此时再运行webpack,打包后的文件bundle.js就包含了css代码。
其中css-loader负责加载css,打包css到js中。
而style-loader负责生成:在js运行时,将css代码通过style标签注入到dom中。
最新文章
- (十四)Maven聚合与继承
- C++小项目:directx11图形程序(三):graphicsclass
- MicroERP软件更新记录1.1
- 转发 java数据结构之hashMap详解
- Android Studio使用org.apache.http报错
- .net 操作sftp服务器
- 用java页面下载图片
- git中ssh配置方法
- mysql DDL时出现的锁等待状态
- UI设计基础百科
- HTTP 1.1与HTTP 1.0的比较
- jquery设置元素readonly和disabled(checkbox只读)
- RouterOS的MikroTik脚本从DNS更新IPSEC端的IP地址
- 理解C++ 宏
- jQuery插件制作
- Hadoop技术之Hadoop HA 机制学习
- Git - git tag - 查看当前分支 tag 版本&;说明
- webpack6--css 背景图片处理
- 【Mac】小技巧:实现ssh服务器别名免密登录
- Smarty之html_options使用心得