blog: 删除过时文章
This commit is contained in:
xugaoyi
parent
990c1fea1d
commit
31bd1dc060
|
|
@ -10,7 +10,7 @@ module.exports = [
|
|||
text: '前端文章',
|
||||
items: [
|
||||
{ text: 'JavaScript', link: '/pages/8143cc480faf9a11/' },
|
||||
{ text: 'Vue', link: '/pages/5d463fbdb172d43b/' },
|
||||
// { text: 'Vue', link: '/pages/5d463fbdb172d43b/' },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,129 +0,0 @@
|
|||
---
|
||||
title: Vue CLi3 修改webpack配置
|
||||
date: 2020-02-22 15:00:36
|
||||
permalink: /pages/5d463fbdb172d43b
|
||||
categories:
|
||||
- 前端
|
||||
- Vue文章
|
||||
tags:
|
||||
- null
|
||||
author:
|
||||
name: xugaoyi
|
||||
link: https://github.com/xugaoyi
|
||||
---
|
||||
# Vue CLi3 修改webpack配置
|
||||
|
||||
## 审查项目的 webpack 配置
|
||||
|
||||
因为 `@vue/cli-service` 对 webpack 配置进行了抽象，当你想查看webpack的配置时可以使用 `inspect`命令：
|
||||
<!-- more -->
|
||||
```sh
|
||||
vue inspect # 在终端打印 webpack配置信息
|
||||
```
|
||||
|
||||
```sh
|
||||
vue inspect > output.js # 把webpack配置信息生成到output.js文件
|
||||
```
|
||||
|
||||
注意，`output.js` 文件不是一个有效的 webpack 配置文件，仅用于审查。
|
||||
|
||||
|
||||
|
||||
## 修改webpack配置
|
||||
|
||||
以**修改路径别名**为例：
|
||||
|
||||
1. 项目根目录创建文件 `vue.config.js`
|
||||
|
||||
2. 参考如下代码修改路径别名：
|
||||
|
||||
```js
|
||||
// vue.config.js
|
||||
const path = require('path')
|
||||
const resolve = dir => path.resolve(__dirname, dir)
|
||||
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
config.resolve.alias
|
||||
.set('styles', resolve('src/assets/styles'))
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 参考
|
||||
|
||||
* [官方文档](https://cli.vuejs.org/zh/guide/webpack.html)
|
||||
* [官方 vue.config.js 参数说明](https://cli.vuejs.org/zh/config/#vue-config-js)
|
||||
* [vue.config.js 设置接口代理示例](https://github.com/ustbhuangyi/vue-music/blob/master/vue.config.js)
|
||||
|
||||
* 配置示例：
|
||||
|
||||
```js
|
||||
const path = require('path')
|
||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
|
||||
const ProxyAgent = require('proxy-agent')
|
||||
const resolve = dir => path.resolve(__dirname, dir)
|
||||
module.exports = {
|
||||
outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
|
||||
runtimeCompiler: true,
|
||||
assetsDir: 'static',
|
||||
productionSourceMap: false, // 生产环境的 source map
|
||||
parallel: require('os').cpus().length > 1,
|
||||
configureWebpack: config => {
|
||||
// 公共配置
|
||||
// cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
|
||||
config.externals = {
|
||||
'vue': 'Vue',
|
||||
'vue-router': 'VueRouter',
|
||||
'element-ui': 'ELEMENT',
|
||||
'vuex': 'Vuex',
|
||||
'axios': 'axios'
|
||||
}
|
||||
config.resolve.alias = Object.assign({}, config.resolve.alias, {
|
||||
'src': resolve('src/common'),
|
||||
'common': resolve('src/views/common'),
|
||||
'static': resolve('static')
|
||||
})
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
// 为生产环境修改配置...
|
||||
config.optimization = {
|
||||
minimizer: [
|
||||
new UglifyJsPlugin({
|
||||
uglifyOptions: {
|
||||
compress: {
|
||||
drop_console: true, // console
|
||||
drop_debugger: false,
|
||||
pure_funcs: ['console.log']// 移除console
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
} else {
|
||||
// 为开发环境修改配置...
|
||||
}
|
||||
},
|
||||
css: {
|
||||
loaderOptions: {
|
||||
css: {
|
||||
importLoaders: 1 // @import 引入的文件可被一个loader处理 （2 可被两个loader处理）
|
||||
}
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
port: 80,
|
||||
disableHostCheck: true, // 可使用本地host配置的域名访问
|
||||
proxy: {
|
||||
'/api': {
|
||||
agent: new ProxyAgent('http://132.128.11.12'),
|
||||
target: 'http://132.128.11.12',
|
||||
ws: false,
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
---
|
||||
title: Vue中的scoped和scoped穿透
|
||||
date: 2020-02-23 10:54:23
|
||||
permalink: /pages/c80d2751cf1f4268
|
||||
categories:
|
||||
- 前端
|
||||
- Vue文章
|
||||
tags:
|
||||
- null
|
||||
author:
|
||||
name: xugaoyi
|
||||
link: https://github.com/xugaoyi
|
||||
---
|
||||
# Vue中的scoped和scoped穿透
|
||||
|
||||
## 什么是scoped？
|
||||
|
||||
在Vue文件中的style标签上有一个特殊的属性`scoped`。当一个style标签拥有`scoped`属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了`scoped`属性，相当于实现了样式的模块化。
|
||||
<!-- more -->
|
||||
```html
|
||||
<style lang="less" scoped>
|
||||
```
|
||||
|
||||
## scoped的实现原理
|
||||
|
||||
Vue中的`scoped`属性的效果主要是通过`PostCss`实现的。以下是转译前后的代码:
|
||||
|
||||
转译前:
|
||||
|
||||
```html
|
||||
<style lang="less" scoped>
|
||||
.example{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="example">scoped测试案例</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
转译后:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.example[data-v-5558831a] {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="example" data-v-5558831a>scoped测试案例</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
`PostCSS`给一个组件中的所有DOM添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的DOM,这种做法使得样式只作用于含有该属性的DOM元素(组件内部的DOM)。
|
||||
|
||||
**总结：`scoped`的渲染规则**：
|
||||
|
||||
1. 给HTML的DOM节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个DOM 元素
|
||||
2. 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式
|
||||
|
||||
## scoped穿透
|
||||
|
||||
`scoped`看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库的样式，而又不想去除`scoped`属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
|
||||
|
||||
**stylus的样式穿透 使用 `>>>`**
|
||||
|
||||
```stylus
|
||||
外层 >>> 子组件元素
|
||||
样式
|
||||
|
||||
.wrapper >>> .swiper-pagination-bullet-active
|
||||
background: #fff
|
||||
```
|
||||
|
||||
**sass和less的样式穿透 使用`/deep/`**
|
||||
|
||||
```less
|
||||
外层 /deep/ 子组件元素 {
|
||||
样式
|
||||
}
|
||||
.wrapper /deep/ .swiper-pagination-bullet-active{
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
## 在组件中修改第三方组件库样式的其它方法
|
||||
|
||||
上面我们介绍了在使用`scoped` 属性时，通过`scoped`穿透的方式修改引入第三方组件库样式的方法，下面我们介绍其它方式来修改引入第三方组件库的样式：
|
||||
|
||||
* 在vue组件中不使用`scoped`属性
|
||||
|
||||
* 在vue组建中使用两个style标签，一个加上`scoped`属性，一个不加`scoped`属性，把需要覆盖的css样式写在不加`scoped`属性的style标签里
|
||||
|
||||
* 建立一个reset.css(基础全局样式)文件，里面写覆盖的css样式，在入口文件main.js 中引入
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
---
|
||||
title: Vue项目使用mock数据的几种方式
|
||||
date: 2020-02-26 14:06:58
|
||||
permalink: /pages/bd1af2f75fd361fc
|
||||
categories:
|
||||
- 前端
|
||||
- Vue文章
|
||||
tags:
|
||||
- null
|
||||
author:
|
||||
name: xugaoyi
|
||||
link: https://github.com/xugaoyi
|
||||
---
|
||||
# Vue项目使用mock数据的几种方式
|
||||
|
||||
本文是基于vue/cli 3.0创建的项目进行讲解
|
||||
|
||||
首先我们来说一说vue/cli 3.0 与 2.0 的一些不同：
|
||||
|
||||
1. 3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源，静态数据（如json数据、图片等）需要存放在这里。
|
||||
<!-- more -->
|
||||
> 放在`public`目录下的静态资源可直接通过(http://localhost:8080/+ 文件名称)来访问，不需要在前面加一个`/public`路径
|
||||
|
||||
2. 3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建` vue.config.js` 进行配置。
|
||||
|
||||
## 方式一：使用mockjs插件实现本地mock数据
|
||||
|
||||
1. 安装`mockjs`插件
|
||||
|
||||
```sh
|
||||
npm i mockjs -D
|
||||
```
|
||||
|
||||
2. 在src目录下创建一个`mock`文件夹，在`mock`文件夹下创建一个`index.js`和一个`data`文件夹（用于存放项目需要的模拟数据）
|
||||
|
||||
```
|
||||
.
|
||||
├── src
|
||||
│ ├── mock
|
||||
│ │ └── data
|
||||
│ │ │ └── test.json
|
||||
│ │ └── index.js
|
||||
. .
|
||||
```
|
||||
|
||||
3. `mock`目录下的`index.js`示例如下：
|
||||
|
||||
```js
|
||||
const Mock = require('mockjs')
|
||||
|
||||
// 格式： Mock.mock( url, 'post'|'get' , 返回的数据)
|
||||
Mock.mock('/api/test', 'get', require('./data/test.json'))
|
||||
Mock.mock('/api/test2', 'post', require('./data/test2.json'))
|
||||
```
|
||||
|
||||
4. 在`main.js`入口文件中引入mock数据，不需要时，则注释掉
|
||||
|
||||
```js
|
||||
require('./mock') // 引入mock数据，不需要时，则注释掉
|
||||
```
|
||||
|
||||
5. 最后，在vue模板中使用即可
|
||||
|
||||
```js
|
||||
axios.get('/api/test')
|
||||
.then(function(res){
|
||||
console.log(res);
|
||||
})
|
||||
.catch(function(err){
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 方式二：在public文件夹放mock数据（无需使用mockjs插件）
|
||||
|
||||
1. 在`public`文件夹下创建一个`mock`文件夹，用来存放模拟数据的json文件
|
||||
|
||||
```
|
||||
.
|
||||
├── public
|
||||
│ ├── mock
|
||||
│ │ └── test.json
|
||||
. .
|
||||
```
|
||||
|
||||
> 放在`public`目录下的静态资源可直接通过(http://localhost:8080/ + 文件名称)来访问，不需要在前面加一个`/public`路径。
|
||||
|
||||
|
||||
|
||||
2. 在`vue.config.js`里进行路径配置，如下:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
devServer: {
|
||||
proxy: {
|
||||
'/api': { // 代理接口
|
||||
target: 'http://localhost:8080',
|
||||
ws: true, // proxy websockets
|
||||
changeOrigin: true, // 是否开启跨域
|
||||
pathRewrite: { // 路径重写
|
||||
'^/api': '/mock'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
[devServer.proxy官方文档](https://cli.vuejs.org/zh/config/#devserver-proxy)
|
||||
|
||||
3. 最后，在vue模板中使用即可
|
||||
|
||||
```js
|
||||
axios.get('/api/test.json') // 注意这里需要.json后缀
|
||||
.then(function(res){
|
||||
console.log(res);
|
||||
})
|
||||
.catch(function(err){
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
> 这方式貌似不支持`post`请求，有待研究。
|
||||
|
||||
|
||||
|
||||
## 方式三：前端本地启动一个nodejs服务，vue项目向nodejs服务请求mock数据
|
||||
|
||||
1. 创建一个node项目（为了方便，本例直接在vue项目根目录创建，当然也可以是其它任何地方）
|
||||
|
||||
```
|
||||
.
|
||||
├── 项目根目录
|
||||
│ └── serve.js
|
||||
. .
|
||||
```
|
||||
|
||||
2. `serve.js`示例
|
||||
|
||||
```js
|
||||
const http = require('http')
|
||||
// url模块用于处理与解析 前端传给后台的URL，适用于get请求（不适用于post请求），详情参见文档
|
||||
const urlLib = require('url')
|
||||
|
||||
http.createServer(function (req, res) {
|
||||
const urlObj = urlLib.parse(req.url, true) // 注意：这里的第二个参数一定要设置为：true, query才能解析为对象形式,可以更加方便地获取key:value
|
||||
const url = urlObj.pathname
|
||||
const get = urlObj.query
|
||||
console.log(url)
|
||||
// 模拟的mock数据
|
||||
const data = {
|
||||
"code": 200,
|
||||
"list": [
|
||||
{
|
||||
"id": '0001',
|
||||
"name": "test"
|
||||
},
|
||||
{
|
||||
"id": '0002',
|
||||
"name": "test2"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// console.log(get.user)
|
||||
if (url === '/test') { // 接口名
|
||||
res.write(JSON.stringify(data))
|
||||
}
|
||||
res.end()
|
||||
}).listen(9000)
|
||||
```
|
||||
|
||||
3. 启动node服务
|
||||
|
||||
```sh
|
||||
node serve.js
|
||||
```
|
||||
|
||||
4. 配置`vue.config.js`的`proxy`，解决跨域
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
devServer: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:9000',
|
||||
ws: true, // proxy websockets
|
||||
changeOrigin: true, // 是否开启跨域
|
||||
pathRewrite: { // 路径重写
|
||||
'^/api': ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
5. 最后，在vue模板中使用即可
|
||||
|
||||
```js
|
||||
axios.get('/api/test')
|
||||
.then(function(res){
|
||||
console.log(res);
|
||||
})
|
||||
.catch(function(err){
|
||||
console.log(err);
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 总结
|
||||
|
||||
方式二目前来看只支持get方式请求，对于post请求还有待研究。方式三虽然也是一种实现方式，但实现起来比较麻烦。个人建议使用方式一，灵活、方便。
|
||||
|
||||
|
||||
|
||||
## 相关文章
|
||||
|
||||
[《Vue CLi3 修改webpack配置》](https://xugaoyi.com/pages/5d463fbdb172d43b/)
|
||||
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
---
|
||||
title: 混入(Mixins)
|
||||
date: 2020-02-23 15:47:03
|
||||
permalink: /pages/9f15c1a281d8bedb
|
||||
categories:
|
||||
- 页面
|
||||
- stylus
|
||||
tags:
|
||||
- null
|
||||
author:
|
||||
name: xugaoyi
|
||||
link: https://github.com/xugaoyi
|
||||
---
|
||||
# stylus混入(Mixins)
|
||||
|
||||
## 混入(Mixins)
|
||||
|
||||
混入和函数定义方法一致，但是应用却大相径庭。
|
||||
|
||||
一个简单的混入应用，定义一个超出显示省略号的`ellipsis()`方法，在需要用到的地方只需插入这个方法，其样式会扩展并复制到选择器中。
|
||||
|
||||
<!-- more -->
|
||||
|
||||
```stylus
|
||||
ellipsis()
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
```
|
||||
|
||||
```stylus
|
||||
p
|
||||
ellipsis()
|
||||
```
|
||||
|
||||
|
||||
|
||||
下面有定义的`border-radius(n)`方法，其却作为一个*mixin*（如，作为状态调用，而非表达式）调用。
|
||||
|
||||
当`border-radius()`选择器中调用时候，属性会被扩展并复制在选择器中。
|
||||
|
||||
```stylus
|
||||
border-radius(n)
|
||||
-webkit-border-radius n
|
||||
-moz-border-radius n
|
||||
border-radius n
|
||||
|
||||
form input[type=button]
|
||||
border-radius(5px)
|
||||
```
|
||||
|
||||
编译成：
|
||||
|
||||
```css
|
||||
form input[type=button] {
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
使用混入书写，你可以完全忽略括号，提供梦幻般私有属性的支持。
|
||||
|
||||
```stylus
|
||||
border-radius(n)
|
||||
-webkit-border-radius n
|
||||
-moz-border-radius n
|
||||
border-radius n
|
||||
|
||||
form input[type=button]
|
||||
border-radius 5px
|
||||
```
|
||||
|
||||
注意到我们混合书写中的`border-radius`当作了属性，而不是一个递归函数调用。
|
||||
|
||||
|
||||
|
||||
更进一步，我们可以利用`arguments`这个局部变量，传递可以包含多值的表达式。
|
||||
|
||||
```stylus
|
||||
border-radius()
|
||||
-webkit-border-radius arguments
|
||||
-moz-border-radius arguments
|
||||
border-radius arguments
|
||||
```
|
||||
|
||||
现在，我们可以像这样子传值：`border-radius 1px 2px / 3px 4px`!
|
||||
|
||||
另外一个很赞的应用是特定的私有前缀支持——例如IE浏览器的透明度：
|
||||
|
||||
```stylus
|
||||
support-for-ie ?= true
|
||||
|
||||
opacity(n)
|
||||
opacity n
|
||||
if support-for-ie
|
||||
filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')
|
||||
|
||||
#logo
|
||||
&:hover
|
||||
opacity 0.5
|
||||
```
|
||||
|
||||
渲染为：
|
||||
|
||||
```css
|
||||
#logo:hover {
|
||||
opacity: 0.5;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
来源：<https://www.zhangxinxu.com/jq/stylus/mixins.php>
|
||||
Loading…
Reference in New Issue