.el-row.contentpadding16px.titlefont-size28px.el-inputmargin12px0.el-buttonwidth100%小白的全栈开发1介绍从新手的角度（了解vue、Koa和Express。）从0开始搭建一个RESTfulAPI提供数据，由vue组成的单页面前端项目。希望对和我一样是全栈新手的你有所帮助（我看了很多关于如何搭建全栈的文章，有些可以参考）。马上就要毕业了，我毕业设计的主题是XXX课程网站，这是一个类似B站的网站，同学们可以看视频，文档（暂定word和pdf），对视频和文档进行评论。视频和文档由老师上传。因为要独立完成，所以开始了自己的全栈之旅。分享我的全栈经验，记录下我的完成进度（逃~）。-?当时，我想象自己的网站是这样的：是一个spa，vueexpress提供接口apimongodb，开启全栈之旅。首先，你需要这些东西，nodevue-cliwebpackmongodb，等我们准备好之后，我们就开始整个流程我们开始创建一个项目，cd到你要创建目录的文件夹，然后使用命令linevueinitwebpackvuefile(你自己的项目名)这里讲一下这个ESLint。这是一个代码风格检查的插件。你的缩写输入两个空格或四个空格，无论你是否使用：当你的代码不符合ESLint的规则时，即使你的代码语法和逻辑是正确的，也会报错。根据您的喜好选择是或否。如果你不小心按回车，选择是。稍后我会告诉你如何解决它。然后如上截图那样cd到vuefile，然后npminstall一键安装依赖，最后npmrundev你的vue就可以运行了。大概就是这样来弥补之前的坑吧。如果你的ESLint选择Yes，在vuefile>build>webpack.base.conf.js中找到eslint-loader并注释代码块。项目已创建。接下来，我们需要将项目更改为spa ，并构建登录界面。进入我们的vue工作区（src文件夹）找到main.js，改成这样。importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importElementUIfrom'element-ui'//importelement-uiimport'element-ui/lib/theme-default/index.css'Vue.config.productionTip=falseVue.use(ElementUI)//如果全局使用ElementUI，可以在其他.vue文件中使用element-ui/*eslint-disableno-new*/newVue({mode:'history',//开启history模式，保证spa可以和之前的网页一样前进后退el:'#app',router,template:'',components:{App}})在componentslogin-登录注册.el-row.contentpadding16px.titlefont-size28px.el-inputmargin12px0.el-buttonwidth100%这一步运行需要npminstallstylus和stylus-loader为新的login.vue添加路由到router下的index.js//...前面的就不写了，介绍其他需要的东西importLoginfrom'@/components/Login'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'Hello',component:Hello},{path:'/login',name:'Login',component:Login},]})如果我们在浏览器中输入http://localhost:8080/#/login像上面这样，估计它成功了。未完待续 荆轲刺秦王
