"Part1" with JS write a blog (node + vue + MongoDB)

Learning JS also has a period of time, ready to try to write a blog project, the front and back end of the development, the backend with node only provide data interface, the front end with vue-cli scaffolding, routing also by the front-end control, data asynchronous interaction with Vue a plug-in vue-resourse to do, database use mongodb . Overall is node + vue + mongodb Development Blog system, explore the front-end to the full stack of the road.

I will record the whole process in my column, interested in can pay attention to, study together, welcome to discuss.

Not much to say, first the front-end project initialization.

Front-End Project initialization

Command Line Input command cd your_project //switch to the folder you want to switch to
Installing VUE Scaffolding vue-cli command line inputnpm install vue-cli -g
After the installation is completed, input vue init webpack blog //Vue initialization, blog is the name of the project, can change itself, the initialization of the data can be based on their own needs to choose the default or their own name, it should be explained that the vue-router option needs to choose Yes, because to the front and back end separation, the route is controlled by the front end.

After the installation is complete, after the input command cd blog switches to the project folder, enter the command to npm run dev access http://localhost:8080 it and project initialization is complete. (the latest version of VUE-CLI does not have to be manually installed, he will automatically install, nineth Cinema so no npm install)

The following is an explanation of the project directory

buildand config files are all about webpack the relevant configuration, for the first
Dependencies installed in the project are stored in the node_modules directory
srcThe directory is where we write code in the development process.
assetsStore some js css pictures and other resources, you can choose to and do not want to
componentsIn the .vue file, each file is a component
routerindex.jsis where we write the route.
app.vueIs the final component of single-page rendering
main.jsIs the entry file for the entire project.

Back-end project initialization

Here I use node's Express framework, first install the Expres generator, used to quickly generate express application skeleton
Command Line Input npm install express-generator -g
After the installation succeeds, the command line input express blog-server www.dijiuyy.com here blog-server is the name of the backend project, changing according to your needs
When the installation is complete, enter the backend projectcd blog-server
Then perform the npm install installation project dependencies
After the installation is complete, start the projectnpm start
Open browser access localhost:3000 to see startup success

Both front-end and back-end are successful, and the next step is to start developing formally.
Show time~

"Part1" with JS write a blog (node + vue + MongoDB)