折腾毕设记（一）—— 搭建环境

前言

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

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

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

后端使用nodejs的express。

之所以开始更新这系列文章，因为看了这篇文章 => 技术人如何提升自己（推荐必读）--IT大飞说

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

开发环境配置

1.找个模板

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

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

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

非常方便！感谢作者！模板 => github传送门

有兴趣了解具体的大佬们可以看这个 => 打通前后端 -- 构建一个 Vue + Express 的开发环境

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 = true
Vue.config.productionTip = false
Vue.prototype.$axios = axios
new Vue({  
    el: '#app',  
    router: router,  
    store: store,  
    template: '<App/>',  
    components: { App }
})复制代码

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

npm i element-ui --save

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

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

终端执行npm start

打开浏览器，地址输入：

localhost:3000

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

即可看到画面。

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

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