ZhengXingchi commented 3 years ago

参考文档

项目创建：

yarn global add @vue/cli@next
vue create writer_zone
vue ui 命令以图形化界面创建和管理项目

ZhengXingchi commented 3 years ago

jest单元测试

参考文档

holylovelqq/vue-unit-test-with-jest

vue项目单元测试教程（jest）前端测试框架 Jest 使用 Jest 进行 Vue 单元测试使用Jest实现Vue自动化测试你为什么选择React而不选择Vue？

ZhengXingchi commented 3 years ago

UI库

vuetify iview element antd 最后选择了iview因为vue ui支持按需配置，而且项目会自动生成例子能够快速入门

问题：博主，我脚手架用的是最新的4.5.6，引入elementui项目启动后页面报Uncaught TypeError: Cannot read property 'prototype' of undefined，您能帮我解决下吗 cli版本4.x，使用Vue版本2.x, 适配于Vue3.x的elementui还在开发，你可以去git看

不行：只有antd-vue目前支持vue3X，所以最后选择ant-design-vue

更新： Element Plus for Vue 3.0 是一个使用 TypeScript + Composition API 重构的全新项目。Element 团队几乎重写了每一行 Element 的代码，用最 Vue 3 的方式呈现了最完美的 Element。Element Plus 项目仍在大力开发中，相信很快就能再次用上了。具体信息可移步 Element Plus 官网： https://element-plus.org/#/zh-CN/guide/design Vue3.0 官网： https://vue3js.cn/docs/

移动端

滴滴的cubeUI

ZhengXingchi commented 3 years ago

Vue中import from的来源：省略后缀与加载文件夹

参考Vue中import from的来源：省略后缀与加载文件夹

Vue使用import ... from ...来导入组件，库，变量等。而from后的来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的：

module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src') } } ... }

这里的extensions指定了from后可导入的文件类型。

而上面定义的这3类可导入文件，js和vue是可以省略后缀的：

import test from './test.vue'

等同于：

import test from './test'

同理：

import test from './test.js'

等同于：

import test from './test'

json不可以省略后缀：

import test from './test.json'

省略为：

import test from './test'

则编译出错。

那么，若test.vue，test.js同时存在于同一个文件夹下，则import的导入优先级是：

js>vue

from后的来源除了文件，还可以是文件夹：

import test from './components'

该情况下的逻辑是：

if(package.json存在 && package.main字段存在 && package.main指定的js存在) { 取package.main指定的js作为from的来源，即使该js可能格式或内容错误 } else if(index.js存在){ 取index.js作为from的来源 } else { 取index.vue作为from的来源 } 因此若from的来源是文件夹，那么在package.json存在且设置正确的情况下，会默认加载package.json；若不满足，则加载index.js；若不满足，则加载index.vue。

注意加载文件夹的形式，与上面省略后缀的形式是完全相同的。所以一个省略后缀的from来源，有可能是.vue，.js，或者文件夹。

例：

查看Vue-Element-Admin的源码，其中有个Layout.vue：

里面调用import导入了3个组件：

import { Navbar, Sidebar, AppMain } from './components'

这里，from的路径'./components'就是个文件夹。

于是，按照前面的规则，首先查看文件夹下是否有package.json：

并没有package.json。

package.json不存在，那么查找index.js。index.js是存在的，于是加载。

打开index.js：

export { default as Navbar } from './Navbar'

export { default as Sidebar } from './Sidebar'

export { default as AppMain } from './AppMain' 可以看到3个export，都没有后缀，所以其类型vue，js和文件夹都是有可能的。

同一级目录下，存在AppMain.vue和Navbar.vue，没有同名js，所以可以判断出这两个都是加载的vue文件，即：

export { default as Navbar } from './Navbar.vue'

export { default as AppMain } from './AppMain.vue' 而Sidebar只有一个文件夹，所以是加载的文件夹。打开Sidebar文件夹：

优先找package.json。不存在。

然后找index.js，不存在。

最后找index.vue，存在。

于是：

export { default as Sidebar } from './Sidebar'

相当于：

export { default as Sidebar } from './Sidebar/index.vue'

这样，Layout.vue就通过加载一个文件夹，获得了3个vue组件。

ZhengXingchi commented 3 years ago

The Keyword import is Reserved (SublimeLinter-contrib-eslint)

参考文献Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)

[Parsing error: The keyword 'import' is reserved #655](https://github.com/babel/babel-eslint/issues/655)

ZhengXingchi commented 3 years ago

eslint忽略

Use // eslint-disable-next-line to ignore the next line.

Use /* eslint-disable */ to ignore all warnings in a file.

ZhengXingchi commented 3 years ago

ts用法

ts 特殊符号用法

参考ts 特殊符号用法

ZhengXingchi commented 3 years ago

vue-class-component

旧版本vue : 对 vue-class-component 的个人理解

8.0版本，文档目前没有 [[Vue v3] Changes for @Component decorator and Vue base class](https://github.com/vuejs/vue-class-component/issues/406)

[Composition functions support andthisvalue changes #416](https://github.com/vuejs/vue-class-component/issues/416)

[New way to definepropsandemitsoptions #447](https://github.com/vuejs/vue-class-component/issues/447)

没有文档不知道怎么用改用Vue Class Component Vue Class Component

route

Vue Router

vuex

typescript支持

最开始用的vuecli里面的手动安装vue的typescript选项不太好用，最后参考了文档TypeScript 支持

vue3例子

Vue3全家桶 + Vite + TS + TSX尝鲜，先人一步! Vue3与TSX尝鲜版 ibwei/vue3-ts-base

vue3教程

使用Vue 3.0做JSX(TSX)风格的组件开发

测试

vuecli手动安装可以选择cypress以及jest

ZhengXingchi commented 3 years ago

vue 项目@change多个参数传值多个事件

参考vue 项目@change多个参数传值多个事件

@change="(checked)=>handleChange(checked,'123')"

ZhengXingchi commented 3 years ago

eslint装饰

Delete␍eslint(prettier/prettier) 参考Delete ␍eslint(prettier/prettier)

vscode右下角点击ctrl然后改为lf

ZhengXingchi commented 3 years ago

watch

vue的watch监听数组和对象，监听到的新值旧值一样解决办法

watch: {
     messageList(newVal,oldVal) {
         console.log("newVal");
         console.log(newVal);
         console.log("oldVal");
         console.log(oldVal);
     },
     deep: true
 },

所以需要修改代码如下

watch: {
    messageData(newVal,oldVal) {
        console.log("newVal");
        console.log(newVal);
        console.log("oldVal");
        console.log(oldVal);
    },
    deep: true
},
computed: {
    messageData() {
        return [...this.messageList]
    }
}

上面做的操作的添加一个computend属性方法，返回展开后的数组，注意，返回的是展开的数组，而不是直接返回数组，直接返回数组会结果与上面一致

如果的监听数组修改代码如下即可

computed: {
    messageData() {
        return Json.parse(JSON.stringify(xxx))
    }
}

Vue使用watch监听一个对象中的属性

Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如

 queryData: {
     name: '',
     creator: '',
     selectedStatus: '',
     time: [],
 },

现在我需要监听这个queryData，我可以这样做：

watch: {
     queryData: {
         handler: function() {
            //do something
         },
         deep: true
     }
}

里面的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性，比如name，这个时候可以这样

watch: {
     'queryData.name': {
         handler: function() {
            //do something
         },
     }
}

或者还可以这样巧用计算属性

computed: {
    getName: function() {
        return this.queryData.name
    }
}
watch: {
     getName: {
         handler: function() {
            //do something
         },
     }
}

ZhengXingchi commented 3 years ago

行内元素的垂直居中

方法1：设置块元素的 height,line-height为相同的值：

作用于单行文字，使文字垂直居中显示；

实现原理： line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。（可以包含这些内容的最小框就是行框。）实现了单行文字居中；

方法2：vertical-align

适用于在块元素里存在大于一个行内元素需要垂直居中时（如图片和文字需要垂直居中显示时），可以通过对图片的标签或文字的标签（行内元素）设置vertical-align，可以达到效果；

vertical-align属性的定义：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。如：


          <span></span>

          <img src="***">

 </div>

span {vertical-align: middle;} 表示图片的基线相对于span文字的垂直方向上的中部对齐；

方法3：设置display: table-cell;vertical-align: middle;达到垂直居中；

适用于在块元素内存在行内元素，块元素的混合元素时，且需要将它们垂直居中；

注：此方法存在兼容性问题；ie7和ie6都不能识别 display: table-cell;（但是支持display: block等css1的属性！） ie8以及以后版本可以识别；使用display:inline-block属性代替display:table-cell就完全ok的啦！

方法4：绝对定位+负外边距；

使某个行内元素垂直居中，可以先绝对定位，设置top:50%,margin-top:-2/height;(假设元素在顶部；)

ZhengXingchi commented 3 years ago

nginx 500报错

查找Nginx.conf的位置：

执行 sudo nginx -t 就可以获取配置文件的路径。同时如果你的配置文件nginx.conf修改后有错，该命令执行后也会有相应提示，例如“参数无效”

nginx的配置文件

vim /etc/nginx/nginx.conf

找到错误日志路径

error_log /var/log/nginx/error.log

查看nginx错误日志

vim /var/log/nginx/error.log

查看最后100行的数据

cat filename | tail -n 100

ZhengXingchi / ZhengXingchi.github.io

writer_zone #108

参考文档

项目创建：

jest单元测试

参考文档

UI库

移动端

Vue中import from的来源：省略后缀与加载文件夹

The Keyword import is Reserved (SublimeLinter-contrib-eslint)

eslint忽略

ts用法

ts 特殊符号用法

vue-class-component

route

vuex

typescript支持

vue3例子

vue3教程

测试

vue 项目@change多个参数传值多个事件

eslint装饰

watch

vue的watch监听数组和对象，监听到的新值旧值一样解决办法

Vue使用watch监听一个对象中的属性

行内元素的垂直居中

nginx 500报错

查找Nginx.conf的位置：

nginx的配置文件

找到错误日志路径

查看nginx错误日志

查看最后100行的数据