折腾毕设记（一）—— 搭建环境-白红宇

前言

我今年九月刚入大四，IT日语专业（主修日语，辅修IT）。

大学最后一年，毕业设计的目标是做一个跟日语有关系的SPA应用。

前端使用Vue全家桶，目前我是用浅薄的底子生啃官方文档。

后端使用nodejs的express。

之所以开始更新这系列文章，因为看了这篇文章 =>

我会把觉得hard和nice的地方写出来，加深印象。

开发环境配置

1.找个模板

为了省去配置各种东西的时间成本，我暂时没有学习webpack（强行为懒惰找理由）。

所以直接找到了一个配置好的基于Vue-cli脚手架整的，前后端都能热加载的项目模板。

而且已经配置好了Vue-loader（能用单文件组件.vue文件），vue-router，vuex，axios。

非常方便！感谢作者！模板 =>

有兴趣了解具体的大佬们可以看这个 =>

2.了解模板目录

解释一下各个部分的功能：

于是，开发过程中，一般可以无视红色部分的文件：

进入src目录，再熟悉一下开发文件夹的内容：

一个是客户端文件夹，一个是服务端文件夹，展开两个文件夹

3.安装项目依赖的模块

终端进入项目所在目录，执行npm install

系统会根据package.json文件自动安装本模板所需要的模块到文件夹/node_modules中，该步骤需要等待较长时间。

4.配置UI组件库

选择基于Vue的组件库Element-UI，全局配置组件库需要在前端入口加三句话：

坐标src>client>index.js

import Vue from 'vue'import App from './App'import router from './router/index'import store from './store/store'import axios from 'axios'//加入这三句↓↓↓import ElementUi from 'element-ui';//组件JS代码import 'element-ui/lib/theme-chalk/index.css'//组件样式代码Vue.use(ElementUi)//必须加这句，不然用不了Vue.config.debug = trueVue.config.productionTip = falseVue.prototype.$axios = axiosnew Vue({      el: '#app',      router: router,      store: store,      template: '
     ',      components: { App }})复制代码

除此之外，一定要安装element-ui需要的模块，在终端执行以下命令：

npm i element-ui --save

现在就可以在任何组件里面写Element-UI 了。

5.启动开发模式下的服务

终端执行npm start

打开浏览器，地址输入：

localhost:3000

（这里的端口号3000，是在/src/server/index.js中的SERVER_PORT）

即可看到画面。

至此，可以开始开发，实时修改代码查看运行效果。

以上就是为毕设开发的准备工作。