【Vue全家桶+SSR+Koa2全栈开发】（七） 项目搭建与配置

写在开头

大家好，这里是 lionLoveVue，基础知识决定了编程思维，学如逆水行舟，不进则退。金三银四，为了面试也还在慢慢积累知识，Github上面可以直接查看所有前端知识点梳理， github传送门，觉得不错，点个Star★，好运连连，Offer终究鼠于你，持续更新中。另外，也可以关注微信公众号： 小狮子前端Vue，源码以及资料今后都会放在里面。

项目搭建开始

---

配置环境

• node
• vue
• npm
• webpack
• nuxt

创建项目

npm install -g npx

npx create-nuxt-app loveVueApp

使用 npx 可以帮助我们更快速的搭建项目环境，在你需要创建项目文件夹的地方 shift+鼠标右键 打开 powershell 窗口，执行上述命令，然后按照下列图片选择对应的模块：

安装完成后，会提示你执行如下命令：

这里我们就执行开发环境的指令就好了

cd loveVueApp
npm run dev

另附上，生产环境的指令：

cd loveVueApp
npm run build
npm run start

访问：http://localhost:3000/ 会有一个nuxtjs的图标出现，代表环境搭配成功 ✿✿ヽ(°▽°)ノ✿

此时，再 ctrl+c 退出当前服务

执行如下命令，重新安装一下，防止版本问题等

npm install  --update-binary

重装之后，再跑一次服务，看能不能打开界面

npm run dev

增加 babel-node 处理（使用ES6的import指令问题）

创建好我们的基本项目后，我们还需要对我们所需要的模块进行更改。

例如，对应目标文件的第一行代码：

改为如下代码

import Koa  from 'koa'

于是，就会出现报错，无法识别

在上文讲解 nuxtjs基础 我们是可以直接用 import 操作的，但当我们使用官方脚手架时，是没有处理这个 bug 的。下面来解释一下为什么会出现这个问题：

当我们使用命令 npm run dev 的时候，其实是用了 npm 的 script 的方法，如下图所示：

可见使用了 node，并且不支持 import 操作，上文是因为使用了 babel 进行了处理，在这里官方脚手架时使用 node 来启动服务，没有经过 babel 处理，因此就不会识别 import 指令了。

解决上述问题

上文提到了是因为没有 babel处理，执行服务程序，那就自己加上去咯，具体如下：

在 dev 和 start 后面添加 --exec babel-node

或者直接使用下面代码覆盖你的 scripts

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
    "generate": "nuxt generate"
  },

然后，在根目录下创建一个 .babelrc 的配置文件，然后给它指定一个指令集

{
    "presets":["es2015"]
}

有了代码还不行，还要再安装插件，执行如下命令

npm install babel-preset-es2015
npm install babel-cli -S

好了，有了 babel-node 后我们就能启动服务程序了，改成了我们常用的 ES6语法了

npm run dev

访问：http://localhost:3000/ 会有一个nuxtjs的图标出现，代表环境搭配成功 ✿✿ヽ(°▽°)ノ✿

解决 sass 导致编译出错问题

这个问题也依旧是脚手架带来的问题，解决方式就是安装几个插件，执行命令如下：

npm install sass-loader node-sass

PS：可能会有下述 warn

npm install eslint@^(版本号)  //（注意，这里是当你出现对应warn才执行）

我的是这种警告，因此依葫芦画瓢，执行下述命令

npm install sass@^1.3.0 fibers@>= 3.1.0

辅助工具安装

• MongoDB
• redis
• Robo 3T

（上文基础部分有介绍安装教程，可以往回看一看对应模块 ↑）

远程仓库常用指令（整理）

• 查看分支：git branch

• 查看项目的分支们(包括本地和远程) git branch -a

• 创建分支：git branch

• 切换分支：git checkout

• 创建+切换分支：git checkout -b

• 合并某分支到当前分支：git merge

• 提交 git commit -m ‘简介’

• git push -u origin master

首页开发

需求分析

• 模板设计（解决复用问题）

• 组件设计（如何拆分组件）

如何节省网络请求？

上述流程图共进行了两次请求，另外，异步获取数据时，还会有闪一下，影响用户体验，同时浪费一次网络请求。解决办法就是当浏览器去请求服务器的时候，当浏览器去请求文档的时候，服务端 ip已经知道了，那个时候就可以拿到对应的城市，立即返回数据给浏览器。做法就是通过 vuex 来同步状态，然后通过 SSR 异步请求就能得到数据。

类似于上文流程图，也是可以通过 vuex 来做

属于静态模块，不需要我们异步获取数据，直接用 SSR 下发一下就ok。

• 数据结构设计（依赖于数据和组件）

pois表 城市推荐数据库

• 接口设计（与数据结构相对应）

首页开发Header-城市定位服务设计

根据 Header 布局情况来看的话，我们在components文件夹下创建如下几个文件夹和文件（水印遮住的是 README）

导入css，然后打开 nuxt.config.js 进行配置

结尾

---

如若本文有瑕疵需修改的地方，请提出来，谢谢您的贡献！

欢迎关注微信公众号：小狮子前端Vue

谢谢您的支持！✿✿ヽ(°▽°)ノ✿

学如逆水行舟，不进则退