aSuncat: Github pages搭建博客/ 个人网站的日常

20190417（Wed）：

一、想搭个前端博客，作为长期维护的项目，希望自己技术不断进步，日常开开心心。
二、想搭个粉色系的，对ui不怎么敏感，暂时还未定rgb，这个粉色不知道可以不可以哇。
1、最近买了条紫灰色的阔腿裤，感觉这个紫色也挺好看的，也想用一下这个紫灰色。
三、macos
暂定vue + iview + nodejs + mongodb + sass，用git搭吧
hexo
四、1、程序。2、偶像（刘雯）+ 生活（小熊） + 植物 + 宠物

20190418（Thu）：

用惯了svn，使用git的时候特别不习惯，暂存区，develop,feature,release的管理都很不熟悉，因为版本上传出现的问题太多，就把之前的repository删除，重新建了一个，今天也终于是弄成功了，实现了将不同代码放在了我想要放置的文件夹中，还是很开心的呢

项目启动init：v0.1.0

一、git，mac上用的是sourceTree
1、提交
（1）创建develop分支：
git工作流，创建develop分支，
（2）develop分支上创建feature：
git工作流，创建feature：index
（3）暂存，并提交
（4）合并回develop分支：
git工作流，完成当前版本并删除分支
（6）发布
①创建release分支（可用来测试、q&a、bug修改)：
git工作流，建立新的发布版本，release version：v0.1.0
②修改文件后，完成当前版本，会提示打一个标签tag：v0.1.0，打到master分支上
（6）推送
2、线上bug修复
master建立hotfix
（1）创建hotfix分支
master, git工作流，建立新的修复补丁，修复版本：bug_index，
（2）修改文件后，完成当前版本，修复补丁版本：bug_index，此消息打标签v0.1.1

20190419（Fri）:

一、在想是自己写css，还是从hexo，jelly找模板。
1、如果自己写css，没有设计功底，怕最后搭出来的页面不好看。
2、最近想用iview、sass，了解到大华用的基本是iview，有关vue的ui框架也没怎么用过，所以想用来练练手。如果是找模板，基本用不到ivew。
3、这次搭还是还自己写css吧。可能以后会再改变博客的风格。
二、想用到粉色的樱花元素，页面背景樱花飘落，或者是鼠标点击后出现樱花再消散。
三、ui可能会借鉴https://www.anotherhome.net
1、他是动漫主题，我想整个萌宠主题的，就是想要的图不知道该怎么p哇，嘻嘻。
2、捕捉到了他的hexo themes:https://github.com/DIYgod/hexo-theme-sagiri 。仔细想了想，我还是想搭个个人网站，而不是博客网站，我的博客会记录在csdn。
3、自己动手写css吧，ui风格可借鉴其他博主的themes
四、莫兰迪色，可能我可以用到哟
五、个人主页搭完之后，可以加上这篇博客：https://diygod.me/message/ ，挺吸引人的哟。

项目配置setting:0.1.1

一、.eslintrc.js
rules增加下列这项，总感觉在可执行语句后面加个分号是很有必要的。嗯，所以就留着这个吧。

'semi': ['error','always'], // 语块结尾要加分号

之前还会加上下面两项，后来发现没必要，可以使用默认配置，之前function与()没有空格，现在要改变这个习惯了，主要是我懒得每次都来配置，哈哈。

'eol-last': 0, // 非空文件的末尾至少执行一个换行符
'space-before-function-paren': 0 // function左边是否要加空格

eslint的rules可参考：https://cloud.tencent.com/developer/chapter/12618
二、sass
1、npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像）：若已安装则忽略
2、cnpm install node-sass --save （使用淘宝镜像安装node-sass）
3、npm install --save-dev sass-loader style-loader css-loader
4、webpack.base.config.js里添加

{
  test: /\.scss$/,
  loaders: ["style", "css", "sass"]
},

5、
variable.scss

$highlight-color:#f00

helloWorld.vue

<style lang="scss" scoped="" type="text/css">
// URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析
// 一定要添加后缀名.scss，不然会报错：File to import not found or unreadable: 
@import '~assets/css/variable.scss'; 
assets/css/variable.
.test{
	color:$highlight-color
}
</style>

三、vue2.0
1、router/ index.js部分配置：没什么特别之处，就是想看起来更清爽一点

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
];

const router = new Router({
  mode: 'history',
  routes: routes
});

router.afterEach((to, from, next) => {
  document.title = to.name;
  next();
});

export default router;

四、模拟线上运行
1、config/ index.js
build中增加port: 9000
2、项目根目录增加prod.server.js

var express = require('express');
var config = require('./config/index');

/*入口*/
app.use(express.static('./dist'));

/*端口号监听*/
var port = process.env.PORT || config.build.port;
module.exports = app.listen(port, function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log('listening at http://localhost:' + port + '\n');
})

3、terminal运行node prod.server.js
4、浏览器输入localhost:9000就能看到网页了。
五、iview引入，修改iview主题
1、npm install iview --save
npm install less –save
npm install less-loader –save
2、build/ utils.js
less: generateLoaders('less'), 修改为
less: generateLoaders('less',{ javascriptEnabled: true }),
3、src新建theme/index.less

@import '~iview/src/styles/index.less';
// Here are the variables to cover, such as:
@primary-color: #8c0776;

4、main.js

// import 'iview/dist/styles/iview.css'; // 不更改主题
import './theme/index.less'; // 更改主题
import iView from 'iview';
Vue.use(iView);

20190421

一、iview
报错：Parsing error: x-invalid-end-tag
原因： iView将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。
解决：eslintrc.js下的rules，加上：“vue/no-parsing-error”: [2, { “x-invalid-end-tag”: false }]

20190422

1、配色这玩意儿，好难。
2、背景已经试遍了莫兰迪色。
3、硬是学会用ps裁剪动图。
一、vue
1、现象：main.js引入import ‘./assets/css/index.scss’;时报错，
terminal报错：This relative module was not found
页面报错：Can’t resolve ‘style’ in ‘/Users/yquanmei/ee/blog/webRoot’
BREAKING CHANGE: It’s no longer allowed to omit the ‘-loader’ suffix when using loaders.You need to specify ‘style-loader’ instead of ‘style’。
原因：不建议使用[“style”, “css”, “sass”]
解决：build/ webpack.base.conf.js中，修改sass的loader为[“style-loader”, “css-loader”, “sass-loader”]
2、报错：Invalid CSS after “…load the styles”: expected 1 selector or at-rule, was “var content = requi”
原因：（1）build/ webpack.base.conf.js中有scss相关loader

{
	test: /\.scss$/,
	loaders: ['style-loader', 'css-loader', 'sass-loader']
},

（2）build/ utils.js也有相关loader

 sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),

（3）报错是loader重复引起的。
解决：删除build/ wepack.base.conf.js中的scss相关loader