阅读 644

折腾毕设记(一)—— 搭建环境

前言

我今年九月刚入大四,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

即可看到画面。

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

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

感谢阅读,下期不定期更新,まだ!


文章分类
前端