脚本宝典收集整理的这篇文章主要介绍了【Part1】用JS写一个Blog(node + vue + mongoDB),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli
脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse
来做,数据库用mongodb
。总的来说就是 node
+ vue
+ mongodb
开发博客系统,探索前端走向全栈之路。
我会记录下来整个过程在我的专栏,有兴趣的可以关注一下,一起学习,欢迎讨论。
话不多说,先进行前后端项目的初始化。
新建项目的文件夹,并切换到新建的文件夹
安装vue脚手架vue-cli 命令行输入 npm install vue-cli -g
安装完成后,输入 vue inIT webpack blog
// vue初始化,bLOG是项目的名称,可自行更改,初始化的数据可根据自己的的需要选择默认或是自己命名,需要说明的是,vue-router
选项需要选择yes,因为要前后端分离,路由由前端控制。
安装完成后,输入命令 cd blog
切换到项目文件夹后,输入命令 npm run dev
访问一下 http://localhost:8080
,项目初始化完成。(最新版本的vue-cli不用手动安装依赖,他会自动安装,所以没有了 npm install )
下面解释一下项目的目录
build
和config
文件都是关于webpack
的相关配置,暂且先不管它
项目中安装的依赖都存放在node_modules
目录中src
目录就是我们在开发过程中写代码的地方assets
存放一些js
css
图片等资源,可根据需要选择要与不要@R_406_480@s
中放的就是.vue
的文件,每一个文件都是一个组件router
中index.js
就是我们写路由的地方app.vue
就是最终的单页面呈现的组件main.js
就是整个项目的入口文件
这里我用的node的exPress框架,先安装exPRes生成器,用来快速生成express应用骨架
命令行输入 npm install express-generator -g
安装成功后,命令行输入 express blog-server
// 这里blog-server
是后端项目的名称,根据自己需要改变
安装完成后,进入后端项目 cd blog-server
然后执行 npm install
安装项目依赖
安装完成后,启动项目 npm start
打开浏览器访问 localhost:3000
可看到启动成功
前端和后端都启动成功,接下来就正式开始开发。
show time~
以上是脚本宝典为你收集整理的【Part1】用JS写一个Blog(node + vue + mongoDB)全部内容,希望文章能够帮你解决【Part1】用JS写一个Blog(node + vue + mongoDB)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。