机壳的要塞

转眼又到了年末，这个博客也开了有两年了，不过在更新上今年比去年更加怠惰……唔，基本上没有写什么新文章，非常惭愧。

去年的这个时候，我在年末总结的文章里立下了目标，不再浮躁，回归原点，向死而生，在之后的400多天期限里去接受自己。现在2019年结束了，这一年里所遇到的人们，所尝试做的事情，终于让我心灵平静下来，并触碰混沌的内心，给予我来年再度前行的动力。

虚拟世界的缘

我一直都是一个没什么朋友的人，这也让我对任何多余的人际关系抱着一种默认的拒绝态度，或者说是处于一种矛盾的状态，想要扩宽人缘的愿望和接触他人产生的自卑感与畏惧感的矛盾。

这让我很多时候弄不清楚，自己到底是想要朋友还是不想要朋友，不过今年的缘却让我觉得，先不论自己有没有这些愿望，能有合得来的朋友一起玩耍确实是一件愉快的事情。

契机是一个叫做『平行世界』的社交app，我是17年开始玩的，因为这个app标榜着“反社交”的概念才让我能够安心地去使用它，那里就像是每个人心灵的后花园，把表面社交网络里不想发出来的想法记录在平行世界的卡片上，并让随机的其他人捡到这张卡片。所以一般来说在上面的人是不会去加其他社交联系方式的，直到2019年的1月。

1月的时候，『平行世界』发出了公告说2月开始将会转为付费，由于价格让很多人不太接受，包括我在内很多用户都离开了平行世界，也就是在这种情况下，原本只是在平行世界里交流的人们开始疯狂交QQ之类的其他社交联系方式，平行世界与基准世界的界限就这样被破坏了。

但也因此，原本在虚拟世界里绝缘体的我，获得了难以言喻的缘。

独乐乐不如众乐乐

最开始的时候，我并没有去那么重视从『平行世界』来的QQ好友们，失去了那个可以满不在乎地自言自语的平台的我，已经没有办法去和他们有效交流了，最后只会慢慢减少联系从而躺列吧。

确实，这批好友里大部分都没有几天就不再有新消息了，或许这样会让我感到开心？不过，其中有一个破坏了我安宁日常的存在，大大改变了这年的命运。

就叫它玲吧，一只从第一天开始就不断在发消息的猫。很明显玲是一个习惯于虚拟世界社交的家伙，有自己的人设，有自己的口癖，好友列表也不少，而玲原本在『平行世界』里的卡片，可以说是个十足的中二病了。

一个比我还要严重的中二病？！

不过，非常难得的自己的QQ图标偶尔会跳动了，面对每天都能找到新话题的家伙，一开始只能被动地做些应答，但是逐渐熟悉之后，慢慢变得能和玲聊得开了。

就这样过了几个月，某一天，玲提议要不要联机玩些游戏，在那之前我是一个纯粹的单机玩家，几乎没有碰过联机游戏，但是当时，我真的很想去尝试一下，和朋友联机玩游戏的感觉。

于是，我终于体会到了那句话——『独乐乐不如众乐乐』，结果原本莫不关心的游戏联机内容成了我选购游戏时的重要参考指标之一，我也终于理解了为什么现在厂商们都在想方设法的加入联机游玩内容。

最开始是《人类：一败涂地》，然后是《神界：原罪2》！还有《战斗方块剧场》和《胡闹厨房》，下半年则一起沉迷在《泰拉瑞亚》里。

这真是奇妙的缘分，要知道我从来没有想过能有一起玩游戏的伙伴，何况是能一起玩《神界：原罪2》这样的硬核CRPG游戏。并且通过玲，我还认识了它的一些朋友，包括一个和我一样喜欢P社游戏的家伙。

这便是人际关系的奇妙吗，认识了一个好友之后，也可能产生新的契机。玲真的是一个非常好的朋友，和玲的交流也让我不断地反思自己，我是否也能像玲一样去关心自己的朋友呢，我是否也要去尝试建立自己的人际圈呢，也是因为玲，让我的2019不再是一个人在泥潭里痛苦挣扎，而是真正能够稍微抬头向前看看了。

我看到了光，或许玲就是光，但我不能一直依赖着这束光啊，如果要成就一番事业的话，必须让自己也成为光。

或许也能发光

5月，我在B站第一次投稿了视频，其实这件事也是因为受到了玲的鼓励，虽然一直以来都有做游戏视频的想法，但以前都没有好尝试过。

那时P社的新作《统治者：罗马》刚刚发售，其中有一个叫做『背信的阿尔比恩』的成就几乎不可能完成，却被P社归类为普通难度的成就，于是我决定挑战一下，如果成功的话就用来做第一个视频。

我原本以为作为新人投稿的第一个视频只能要寥寥数十的播放，投稿后第二天醒来时却发现播放居然有了四位数，不过之后的投稿就没有这么好运了。

到10月为止，我陆陆续续投了十几个游戏视频，获得了100多个关注，也体会到了up主们做视频确实不是一件容易的事情，特别是才能，我很难想到有趣的点子。

不过2020年我还是想认真来做一下这方面的事情，也是为了辅助之后真正想要进行的工作，总之是作为兴趣来做视频的佛系up，如果能交到朋友就更好了。

再度前行

2019算是休息的一年，这一年里我认识了新朋友，尝试了各种事情，对自己的心理状况也有了更全面更深入的认识，这么说的话当初的目标已经达成了，我现在能接受我的不足，并在此基础上慢慢前近。

我想做的事情，我的原点，就是制作游戏，或许我在其他弯路上浪费了太多的时间，但那些弯路难道不也是人生的一种必经之路吗？至少现在我知道了，有些道路一个人是无法走下去的，我想要前进，我想要去结实志同道合的同伴，就像认识了玲而得到的契机一样，我也想要帮助玲和其他可能的同道们，2020，我想和诸位一起前行。

Luxnk，记于2019年12月31日。

郭嘉奉孝〔路希楠卡·贝鲁特森〕

基本

性别：女

身高：152cm

阵营：人

地域：中国

出处：《三国演义》

指令卡：Quick Arts Arts Arts Buster

属性：混沌·善

特性：人型、从者

昵称：郭战神 路希

初始HP：1882

最终HP：12833

初始ATK：1828

最终ATK：11828

羁绊点数

羁绊奖励

NP获取率

指令卡Hit数

数值

隐藏数值

宝具

泛滥的苍炎炼狱 对城宝具 A

指令卡：Buster

• 对敌方全体发动强大的攻击<宝具升级效果提升>
• 付与敌方全体灼伤状态
• 付与敌方全体延烧状态（5回合）
• 一定概率减少充能

技能

持有技能

军师的忠言 A+

冷却时间：8回合→6回合

• 己方全体的防御力提升（3回合）
• 付与被伤害减免状态（3回合）
• NP少量增加

认知妨碍 B

冷却时间：5回合→3回合

• 付与己方单体回避状态（1回合）

幻影无限 EX

冷却时间：9回合→7回合

• 除自身以外的所有单位无法行动（1回合）
• 敌方全体付与宝具封印状态（3回合）
• 敌方全体付与技能封印状态（3回合）

职阶技能

对魔力 A+

自身的弱化状态耐性提升

单独行动 EX

自身的暴击威力提升

遗计 A

自身撤退后敌方全体攻击力防御力下降

濒死充能 A

自身HP低于30%时付与自身每回合获取NP状态

资料

角色详情

路希楠卡·贝鲁特森，

出生于瑞典，活跃于19世纪并为大英帝国魔术特务机关工作的魔术师，但没有留下任何相关记录，即便是魔术界也对其人知之甚少。

这次被作为英灵郭嘉奉孝从者化被召唤。

羁绊故事一

身高/体重：152cm/43kg

出典：三国演义

地域：中国

属性：混沌·善 性别：女性

身高、体重、性别都是依代者的。

羁绊故事二

郭嘉奉孝是中国东汉末年群雄曹操帐下的军师，在曹操从中原的一个小势力发展到击败河北豪杰袁绍的过程中发挥了重要作用，但却在远征辽东的路上病逝，曹操后来在赤壁之战大败后曾哀叹“若奉孝在则不至于此”。

羁绊故事三

幻影无限：EX

路希楠卡·贝鲁特森在英国被称作幻影的魔术师，由于其对幻术的研究与运用远超其他魔术师，从而受到情报机关重用，最早的从军履历是1814年的拿破仑战争最后阶段，之后又多次前往法国、奥地利、意大利、俄罗斯、埃及、印度甚至遥远的中国和日本收集情报。

但路希楠卡在克里米亚战争后便离开了英国，从此变为无人知晓的在野魔术师，1904年多格尔沙洲事件爆发时魔术机关曾一度将其认作最大嫌疑人，但本人表示“那么麻烦又没好处的事情傻子才会去做”

羁绊故事四

遗计：A

郭嘉奉孝死于曹操远征辽东的军中，在去世前曾留下最后的计策，劝告曹操不要急于进攻辽东，这样辽东的公孙康和投奔他的袁家兄弟一定会内讧，到时辽东自然便会平定。

最后果然公孙康杀了袁氏兄弟，并将二人的脑袋送给曹操。

羁绊故事五

泛滥的苍炎炼狱

等级：A 种类：对城宝具

几乎没有人会认为一个只会玩小花招的幻术师能够使用大规模攻击魔术，但这似乎只是路希楠卡·贝鲁特森所会魔术的一种，因为从者化的限制绝大部分魔术无法使用，最终变成宝具的是以烧毁巴比伦的烈焰为原型的魔术“苍炎炼狱”。

蓝色的火焰无法被熄灭，它会烧尽一切直至能量耗尽为止。

最终故事

“真是无聊啊，明明这个时代的文明如此灿烂，却还要打打杀杀吗。”

比起战斗对现代文明更加感兴趣的路希楠卡，不知道是自身性格如此还是郭嘉奉孝的影响，痴迷于研究迦勒底的各种装置和道具以及抽卡游戏，如果出去战斗影响了游戏里的活动会相当不爽。

不管是作为英灵、魔术师还是人类来说，这家伙都是相当奇怪的存在。

语音

召唤和强化

召唤：吾辈名为路希楠卡……不对！是郭嘉奉孝！请为吾辈提供一个舒适的单人间和愉快的6小时工作制。

升级：稍微变强了一点点？但吾辈可不会因此就去加班的。

灵基再临1：嘁，并没有什么变化嘛。

灵基再临2：要不要来一次十连庆祝呢。

灵基再临3：这件新洋装也不错啊，不过还是有点怀念之前的那件。

灵基再临4：终于也到这个阶段了吗……吾辈明明不想工作的。

战斗

开始1：啊啊啊啊，麻烦死了麻烦死了，明明活动就剩两小时了，赶紧解决吧。

开始2：决斗！……说笑的。

技能1：来做些有趣的事好了。

技能2：稍微睡一觉吧。

指令卡1：怪兽召唤！

指令卡2：魔法卡发动！

指令卡3：不要老是让吾辈打工啊。

宝具卡：偶尔也认真一下好了。

攻击1：Attack！

攻击2：直接攻击！

攻击3：哼。

Extra：汤姆逊波纹疾走！

宝具：为大地上的愚者们给予制裁，将巴比伦烧毁的炼狱之火啊，在此显现——Void Flood！

受击1：切……。

受击2：呜……。

无法战斗1：居然……被……这种程度，计算之外啊。

无法战斗2：可恶……到此为止了吗。

胜利1：看来活动应该还能赶上呢。

胜利2：工作结束，真是无趣。

个人空间

羁绊Lv.1：哼哼哼，这还真是有趣的魔术道具，再多拿一些给吾辈看看吧，M·A·S·T·E·R。

羁绊Lv.2：啊，这个时代怎么会如此的美妙，这种叫“电子游戏”的东西简直是天才的发明！与计算机无限的可能性相比吾辈的魔术简直就是小孩的戏法一般……

羁绊Lv.3：恩？汝问这满房间的盒子和卡片是什么？连这个都不知道吗？！这不是这个时代流行的卡牌游戏吗，简直太有意思了。对了这次为了抽红碎罕贵度稍微花的多了一些，给，这是账单~

羁绊Lv.4：Master，因为下周要去美国所以吾辈要请假。什么？汝问去美国干啥？居然连一年一度的电子游戏大展都不知道吗！放心吧，吾辈即使和御主离得太远也不会出问题。

羁绊Lv.5：Master啊，感觉汝如果在Galgame里出场的话会是主人公那种类型呢，哈哈哈哈，简直太有意思了。怎么？要走郭嘉路线吗？……开玩笑的。

对话1：可恶啊啊啊啊啊啊——一百连抽沉船了！

对话2：哈？是Master啊，先说一声加班的话吾辈是拒绝的。

对话3：事象记录电脑魔、拟似地球环境模型、守护英灵召唤系统、近未来观测透镜，还有灵子演算装置……这个时代的魔术也很有意思呢，真想把这些设施解体后研究个透呢。

对话4：这不是伦敦举世闻名的大侦探先生吗！唔……总觉得和吾辈认识的那位有点不太一样。（持有夏洛克·福尔摩斯）

对话5：这便是时钟塔现在的魔术师吗……没想到居然会以从者的身份这样见面，这个世界真是不可思议呢。（持有诸葛孔明〔埃尔梅罗Ⅱ世〕或司马懿〔莱妮丝〕）

对话6：皇帝陛下吗……那时的吾辈还是个连魔术都没法好好使用的少女呢，虽然确实吾辈曾为那个“拿破仑·波拿巴”的敌对阵营效力，但陛下的威光即便在百年之后也没有消散哦，所以这里吾等就友好相处吧。（持有拿破仑·波拿巴）

对话7：居然是花之魔术师？！虽然吾辈自认为在幻术方面同时代无人能敌，但如果是和遥远时代的最高位魔术师相比的话又会怎么样呢……（持有梅林）

喜欢的东西：那还用问吗？当然是电子游戏！或者一切复杂且有趣的东西~如果准备不出这种礼物的话，多买些甜食给吾辈也行。

讨厌的东西：唔……果然还是战斗吧，比起厮杀吾辈更喜欢具有建设性的活动，但如果人类文明毁灭的话就玩不到电子游戏了，可恶。

关于圣杯：真是……有意思的术式啊，虽然吾辈以前也有过和其他魔术师一样以追求“根源”为目标的时期，但现在已经觉得那种东西无所谓了，或许吾辈已经魔术师失格了吧。

活动举行中：有趣的事情发生了呢，这个现象是魔术还是单纯的异常呢……总之这段时间可能会忙起来呢。

生日：生日啊——把自己出生的日子作为特殊之日来庆祝，也就是找个理由向大家要礼物吗。可惜的是吾辈并没有什么可送的礼物呢……要不要一起来打电玩呢？

突然发现这个坑一下子就已经一个月了……赶紧更新一下以表示我还没忘记。、

新手在使用Vue的时候可能会有这么一个疑惑，那就是在Vue里要如何使用ajax去请求后端。毕竟使用jQuery的时候直接就能用方便的$.ajax()方法。

然而Vue里是没有实现ajax的，所以要么自己去实现一个，要么去使用第三方实现，而Vue官方推荐的便是axios。

Vue中使用axios

axios是一个基于promise的HTTP库，项目地址是https://github.com/axios/axios。

要在Vue中集成axios，首先我们进入Vue项目的根目录，使用npm安装：

npm install --save axios

然后，在main.js中就可以引入axios，并将其添加到Vue的原型属性中：

// main.js
import Axios from 'axios'
Vue.prototype.$axios = Axios;

然后就可以在项目中使用axios访问后端接口了！

详细的使用方式可以参考这个文档：https://www.kancloud.cn/yunye/axios/234845

这里只举几个示例代码：

// get方式
this.$axios.get('/story/getStory', {
          params: {
            storyId: this.storyId
          }
        })
          .then(response => {
            // do something
            })
          .catch(error => {
            // do something
          });
 
// post方式
this.$axios.post('/user/login',{
            username: this.username,
            password: this.password,
            captcha: this.captcha
          })
            .then(response => {
              // do something
            })
            .catch(error => {
              // do something
            })

开发环境下临时解决跨域问题

在开发的时候很可能我们的服务端程序和客户端程序不是用同一个web容器运行的，这样就会出现跨域问题，如果实际上线时并不会分开部署前后端，那么可以用下面的方法在开发环境下临时解决跨域问题。

1.修改vue.config.js文件的配置

// vue.config.js
module.exports = {
    lintOnSave: false,
    devServer: {
        port: 8181,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

主要关注的是devServer配置项下的proxy一项，这里的配置意为将所有/api的地址代理到http://localhost:8080，这个target地址就填写服务端的对应地址。

这样，运行Vue-Cli测试时，访问http://localhost:8181/api/user/login就相当于访问http://localhost:8080/user/login。

2.修改axios的配置

之前我们并没有修改axios的默认配置，现在创建一个http.js用于管理axios的配置：

// http.js
import axios from "axios";
 
// 此处可添加axios配置
axios.defaults.baseURL = '/api';
 
export default axios;

这样我们用axios访问后端时就不需要一个个加上/api，并且部署测试的时候也可以直接修改这里的baseURL的值即可。

然后main.js就改为从http.js中获得axios对象。

// main.js
import axios from "./http";
Vue.prototype.$axios = axios;
 
// ...
 
new Vue({
  router,
  store,
  axios,
  render: h => h(App)
}).$mount("#app");

这样配置完毕之后，在开发环境下应该就没有跨域问题了。

至于想要在前后端分开部署的情况下解决跨域问题，就不在这篇文章的讨论范围内。（明目张胆的坑掉233）

尾巴

axios还有很多可以配置的东西，不过我现在都还没用到233，总的来说习惯之后用axios来做请求还是写的很舒服的~

这两天我回顾了自己在这一年里写下的文字，当然不止是指博客里的，还包括私人日记中的。

记得1月1日那天，这个博客正式上线，作为自己的新年礼物……但一年过去了，仅仅诞生了十二篇文章（不包括这篇），其中一半（六篇）还是中二病的胡言乱语，可以说是相当懒惰了。

那我2018年想要做的事情有完成吗？

好像……一件都没有啊？！

于是……在这寒冷的新年前夕，我不得不再次思考起来，自己的道路，自己的未来……到底要怎样才能磨练出主观能动性呢？

滑稽的工作

今年上半年一直在一个互联网小企业工作，这段经历可以说十分滑稽和糟心了，让我再次感受到国内的小型软件公司是多么的不靠谱。

基本上，在这公司总共工作的一年来，可以说我都不知道自己参与的这些项目究竟有何意义，很多时候都感受不到自己的生产力。

这便是小企业，老总总是心比天高、自信满满，但在各种细枝末节的事情上挑挑拣拣，而不肯多支出一分钱预算；而员工们虽然表面上对老总毕恭毕敬，但背地里却总是和老总形近神离。

打一开始向心力就没有存在过，本身项目的构思就一塌糊涂了，然后出现的问题一个接一个，需求长期无法明确，在没有任何设计文档的情况下就被要求开发，功能改了又改一切全凭老总的感觉，总共就没几个程序员但项目要的功能却越来越多，这也让原本就缺乏项目管理的代码变得更加混乱。

结果这个项目既没有规划，也看不到尽头。员工们每天为了干活而干活，为了解决不存在的用户痛点而瞎写功能代码，丝毫没有生产力，久而久之，员工和老总的矛盾就会产生，公司里的戾气也变得更重……于是一个一个的员工离开了。

我是6月底递交的离职申请，那时候公司已经没剩多少人了，但老总似乎对此毫不在意。总之，今年8月，我终于离开了这个穷山恶水之地，变回了自（无）由（业）职（游）业（民）。

总体来说……在这个公司的经历不但没有学到什么技术，反而觉得代码都不会写了（因为要配合其他人写代码的风格……那个代码太惨了）。不过也有好事，至少认识了一些人嘛，以及再次认清了自己必须要提升技术水平的这个现实。

如果我的能力还是这种半桶水状态的话，再去找下一份工作恐怕也只能进一些半斤八两的公司，与其拿自己的生命去换那么一点点钱，我更愿意将时间投资到自己身上。

——靠打工，是买不起房子翻不了身的！

……然而，把时间用在提升自己而不是虚度……我真的能做到吗？

回归原点

没有工作会让人懈怠。

原本，今年的后四个月里，我想做的事情非常多。

想进一步学习编程技能，想补一下计算机科学基础知识，想尝试做视频，想尝试写小说，想尝试交朋友，想尝试做计划，想尝试进行时间管理，想尝试调整心态。

……但是，现在已经到了2018年即将结束的日子，回过头看，我什么都没做成。

不是三分钟热度，就是压根没开始做。

更甚的是，买的《异度神剑2》也一直没有开始玩……简直懒到家了。

这种感觉……或许可以用“虚无”来形容吧。

有时候想想，可能去工作至少每月还有点零花钱，但是……这样真的好吗？

在孤独、绝望、黑暗的心灵世界里，那个声音对我说话了。

——“回归初心吧，然后找回自信，重新开始。”

其实这个声音就是我自己啦。活了二十多年，却一直都没有搞清楚我自己到底是什么样的人，弄得我都“精神分裂”了2333

其实，改变已经慢慢进行着……今年是我留下文字最多的一年，在平行世界里我确实的记下了每一天有意思的事情，在笔记里确实的记下了对自己的每一个想法。

——“果然，我还是想做游戏啊。”

那里是我的起点，连接了我记忆的事物，我永远热爱的——电子游戏。

因为整天烦恼这个焦虑那个，搞得连游戏都懒得打开，这简直一点都不像我啊2333

烦恼什么的就让中二之魂吞噬吧！我还是要做那个我行我素，脑洞略大于黑洞，最喜欢游戏，最喜欢编程，最喜欢研究稀奇古怪知识的Luxnk！

说起来我已经有多久没有完整的阅读过一本书了呢？简直了！2019，既然有了充裕的时间，至少要恢复中学时的阅读量才行嘛~

向死而生

如果一个人没有一些紧迫感的话，很可能就不能好好地行动起来。

“向死而生”，这个想法是临近年末时诞生的，也将成为我2019年的关键词。

因为我已经退无可退了，如果2019年不能让自己的状态有所转变，不能让我自己真正认同自己的话，最后会发生什么我也不知道。

国人大多都不喜欢轻易谈论“死亡”，但是我反倒觉得“不知死，焉知生？”。

如果我的人生只剩下最后的387天（这个倒计时是从11月22日开始的，那天是崩坏倒计时425天），我还会像现在这样虚度光阴，荒废时间吗？

平凡的工作苟活下去也是一生，按自己的心情做自己想做的事活着也是一生，那我为什么不去选择更符合自己理想的人生呢？我为什么不去试试在短暂的生命中在世界留下足迹，创造自己的价值呢？

时间……对每个人都是平等的，年轻的时候我们可能会感觉人生还很漫长，但在不经意间，已经度过了一生的四分之一。

祈愿吧——我坚信每个人都有获得属于自己的那一份微小幸福的权力，即使是糟糕如我这样的人类，也是有资格对未来保持希望的吧，虽然消极的我现在无法用这种心态思考，但一定……在时间的彼端，在另一个平行世界之中，有那样的我存在着吧！

2019，绝对不会再止步不前了，我必须要给自己一个答案才行，我必须……向平行世界的那个“我”证明——我在这个世界上活过，并且我会活得像“我”一样，不留遗憾。

最近几天学习了Vue全家桶，对于我这个主后端的程序员来说，Vue确实相对于Angular更容易上手，各种插件和中文文档十分齐全，而且如果使用Vue-Cli脚手架的话真的可以说是达到“开箱即用”的效果~

有了Vue，就可以彻底告别以前jQuery那一套了，双向绑定简直不能太好用，整个前端开发变得流畅起来。所以各位想要走前端路线的程序员，或者是像我这样主要关心后端但自己开发项目想用一个方便的前端框架，那么我强烈推荐学习Vue。

官方的教程已经很清晰明了，在里面可以了解Vue的基本使用方法：

https://cn.vuejs.org/v2/guide/

所以我们这里就不抄文档了233，下面的内容偏向实战踩坑，不过注意这系列文章严格来说不是教程，只能说是我自己学习和使用时遇到问题的记录吧。

Vue-Cli3脚手架

虽然完全可以通过引入js文件到页面的方式来快速使用Vue的功能，但如果想要构建大型单页应用（SPA）的话，推荐使用官方提供的Vue-Cli工具来快速搭建项目。

SPA

什么是SPA？单页应用和传统多页面Web应用最大的区别就是页面跳转全部由前端控制，所以能够达到无刷新的流畅体验。

传统的Web项目，在页面跳转时，是由前端去请求后端地址，然后由后端返回要显示的页面；而在SPA项目里，公共资源会在第一次载入时加载一次，之后前端仅仅从后端获取必要的数据，然后局部刷新页面内容，而不需要重新载入整个页面。

使用Vue-Cli3搭建项目

要实现SPA需要前端框架的支持，对于Vue来说有Vue-Router这个项目来实现前端路由，这种开发方式下前端项目也需要相对工程化的结构，而Vue-Cli脚手架可以一键生成前端工程并完成配置，即便不懂webpack也可以开心使用，因为Vue-Cli都已经配置好了~

首先我们需要有nodeJs环境，然后就可以使用npm来安装Vue-Cli，这里我们选择全局安装，现在Vue-Cli的最新版本是3，这系列文章也都是以Vue-Cli3为基础来进行讲解的。

# 安装vue-cli
npm install -g @vue/cli
 
# 查看vue-cli版本看看是否安装成功
vue -V
# 3.2.1

安装完毕后，我们切到工作目录来新建项目：

# 新建项目
vue create my-app

执行之后，Vue-Cli会提示选择一个预设，刚刚安装完毕的话应该只有一个叫做default的预设（default上面两个是我自己加的），这个预设里是没有集成Vue-Router的，所以我们选择最后一个选项来自定义预设。

然后就列出了Vue-Cli可以自动集成的插件，按空格键选择需要的，比如前端路由Router、状态管理Vuex，最后按下回车。

如果有选择集成Router的话，这里会询问要不要使用history模式，关于history模式的优劣可以查看Vue-Router的官方文档，当然，如果以后有机会可能我也会讲讲233。

总只，一般来说我是推荐使用history模式的。

如果有选择集成Linter/Formatter的话，这里需要选择默认配置，根据自己的需求选择吧，我是选的ESLint + Prettier。

什么时候进行拼写检查。

最后，选择这些配置是分别放在独立的文件中还是一起挤在package.json里面。

是否保存预设，保存的话下次就可以在第一步的时候选择这个预设而不用上面一步步配置了。一切就绪后，Vue-Cli就开始自动工作了。略微等待它跑完，会是这个样子：

好了，现在我们就得到了一个Vue单页应用项目了！

目录结构

打开项目后的目录结构大概是这个样子的，十分清晰明了。main.js 便是程序的入口，.vue文件则是Vue组件的一种文件格式，需要webpack来进行编译，所幸这方面的配置Vue-Cli已经帮我们做好了~

运行和编译

运行和编译打包相当简单，运行以下命令即可：

# 运行
npm run serve
 
# 编译打包
npm run build

默认的端口是8080，运行后访问的效果就是这个样子啦~

配置文件

Vue-Cli提供了一个叫做vue.config.js的配置文件，不过这个文件在搭建项目时并不会被创建出来，所以需要自己手动在和package.json同级目录下新建这个文件。

可用配置项可以参考官方文档：https://cli.vuejs.org/zh/config/

比如，如果想要更改默认端口，就可以这么配置：

module.exports = {
    devServer: {
        port: 8181
    }
}

漂亮的MD风格UI框架：Vuetify

有非常多支持Vue的前端UI框架，这次我选用的是近年的一个后起之秀：Vuetify。

Vuetify实现了Google的Material Design设计规范，可以在PC和手机上获得不错的用户体验，并且还提供了Vue-Cli一键集成的插件：

# 加入vuetify组件
vue add vuetify

只要跑一下这个命令，vuetify便集成到项目中了，注意要在一个新项目里这么做，因为它会替换一些文件。

然后我们用npm run build方法运行一下项目看看效果：

关于Vuetify的各种特性，可以去看官方文档，有中文哦：

https://vuetifyjs.com/zh-Hans/

尾巴

这篇的内容就到这了，下次会讲讲正式开发里遇到的坑，虽然我也不知道自己什么时候会更新就是了233