Lan's World 兰兰想世界 - 2019年12月
type: channel
link: https://blog.lanhaoo.club/index.php/2019/12/
description: Think and explore！
items: git添加gitignore后还是会提交目录
items: vue 打包设置到网站子目录 vue cli 3 配置路径
items: Vue 取得本地json值
items: Vue 图片变量
items: Vue router link 动态路由 链接写法
items: Vue 跳坑 Vue-router error: TypeError: Cannot read property 'matched' of undefined
items: wordpress迁移typecho ( 包括图片链接的转换 )

git添加gitignore后还是会提交目录
type: item
date: 2019-12-23T11:16:54+08:00
description: 需要先清除目录缓存git rm -r --cached 文件或文件夹名 然后再提交就行了或者直接全部清除掉,然后重新添加git rm -r --cached . git add -A git commit -m '提交信息:添加gitignore'

vue 打包设置到网站子目录 vue cli 3 配置路径
type: item
date: 2019-12-03T22:17:00+08:00
description: 前言vue cli 打包好的dist目录中的文件, 默认是根目录的, 像这样: lanhaoo.club/index.html现在想要将文件放到子目录,比如myApps, 想要的效果是这样: lanhaoo.club/myApps/index.htmlVue cli 3版本里的config build 的文件夹都没了vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构，3 的设计更加抽象和简洁（此处后续可以详细介绍）vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3 vue-cli 3 的设计原则是“0配置”vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化修正assets文件的引用 在根目录下新建 vue.config.js文件, 在这里面我们写配置 去掉路由的 history 模式 把那些图片啊之类的资源文件(在 assets 文件夹下的)整顿好, 在配置里面写好别名, 然后修改引用 vue.config.jsmodule.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'components': '@/components', 'views': '@/views', } } }, } 将 vue 界面里的涉及到 assets 的链接都改下 例如:'../assets/xx.png' 改为 '@/assets/xx.png'配置子文件夹路径在 configureWebpack 上插入官方文档里提供的 publicPath 示例代码(baseUrl已弃用), 一个表达式, 检测是否是生产环境(还不错), 把子文件夹名换成你想要的, 然后重新 build 一遍,上传到对应目录,就OK了,整个 vue.config.js 文件类似下面module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/子文件夹名/' : '/', configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'components': '@/components', 'views': '@/views', } } }, } 参考:https://cli.vuejs.org/zh/config/#publicpathhttps://segmentfault.com/a/1190000016135314https://segmentfault.com/a/1190000016101954

Vue 取得本地json值
type: item
date: 2019-12-03T21:44:00+08:00
description: 嗯..一开始是想让 vue 路由直接返回json,不过好像有点难,如果是直接用xhr还好说,直接拿过来就行这里说的是本地的,根据stackoverflow上的是,将变量从另一个js引入json.jsexport const jsonInput = [ { id: "1", title: "Mars" }, { id: "2", title: "Venus" }, { id: "3", title: "Pluto" } ]; Hello.vue import { jsonInput } from './jsonInput'; export default { data(){ return { jsondata : jsonInput } } } 然后就能引用jsondata的数据了(也就是在jsonInput里的数据)参考:https://stackoverflow.com/questions/46699064/returning-json-with-vue-router

Vue 图片变量
type: item
date: 2019-12-03T17:58:00+08:00
description: 传值时使用require就可以拿到图片了

Vue router link 动态路由 链接写法
type: item
date: 2019-12-03T17:29:00+08:00
description: 写好的路由是(关键是/Drawing/:id那个)export default new Router({ mode:'history', routes: [ { path: '/', name: 'home', component: App}, { path: '/hello', name: 'Main', component: Hello }, { path: '/Drawing/:id',name:'drawing',component:Drawing} ] }) 会把所有的/Drawing/1 或/Drawing/2都导向一个界面然后对应的Drawing组件里直接用$route.params.id 就能拿到链接后的Id,但是router-link这里比较发愁,要怎么生成一个链接上网搜了一下, 咳咳原来直接..按js写就好 字符串 + 变量 没毛病!记得to前面的冒号参考:https://blog.csdn.net/sangjinchao/article/details/70888259

Vue 跳坑 Vue-router error: TypeError: Cannot read property 'matched' of undefined
type: item
date: 2019-12-03T17:11:00+08:00
description: 最近想要在vue cli创建的项目里使用vue router,感觉一切正常结果却报错原来是因为 在vue里面直接使用必须要用router这个名字例如:import router from './routes.js' const app = new Vue({ el: '#app', router, render: h => h(App) }) 如果你真的想起其他的名字也可以:import routes from './routes.js' const app = new Vue({ el: '#app', router: routes, render: h => h(App) }) 所以这又是一个坑参考: https://stackoverflow.com/questions/44618761/vue-router-error-typeerror-cannot-read-property-matched-of-undefined

wordpress迁移typecho ( 包括图片链接的转换 )
type: item
date: 2019-12-01T14:55:00+08:00
description: Typecho 很轻便而且加载速度比wordpress快很多, 所以最后还是迁移了,有几点需要注意将/wp-content/uploads/放到Typecho的 /usr/uploads(图片和附件之类的),然后在typecho数据库执行查询UPDATE typecho_contents SET text = REPLACE(text,'https://你的博客域名/wp-content/uploads/','https://你的博客域名/usr/uploads/');安装wordpress to typecho插件, 中间可能会出错,一般是wordpress里的草稿有问题,删掉这些未发布的草稿, 重新开始转换就行,插件会跳过前面重复的文章,不用担心重复导入永久链接的转换, 将现在的链接格式改为wordpress的, 在设置-永久链接 里面使用自定义即可