本章节主要说的是如何完整的搭建一个项目的开发环境
一、安装vue脚手架
首先创建一个文件夹并且在本文件夹的黑窗口(cmd命令进入)安装Vue的脚手架,使用:cnpm i -g @vue/cli 命令进行安装
检查是否安装成功 :vue --version 命令
二、前端vue项目创建
- 创建前端项目文件夹 vue create 项目名
例如:vue create kigo-web
2.选择Man…(手动安装)
3.选择需要的样式
4.用2.0x
5.Use history mode for router?(是否使用history 模式?)
回复y yes
6.选择Sass/SCSS(with node-sass)模式
7.选择In package.josn
8.是否保存模板 回复n (no)
9.等待安装,等待安装结束之后 cd 进入项目目录,例如:cd kigo-web,进入项目目录之后执行命令cnpm i axios --save ,这个命令是用来发ajax请求的。 10.安装所需要的UI组件库 例如:cnpm i element-ui --save , cnpm i vant --save
三、后端项目创建
1.在项目目录下打开黑窗口
- express 项目名
例如express kigo-admin - cd kigo-admin
进入kigo-admin之内 - 执行cnpm i 命令 安装所有的依赖
- 执行cnpm i mongoose --save命令操作数据库
- cnpm i cors --save 解决跨域问题
整个项目完成之后需要更改一些配置
1.在后端package.json中将“start”中的node改为nodemon
2.在后端app.js文件中引入cors解决跨域问题
到现在你的项目开发前准备工作就已经完成啦,然后通过你前后端的命令窗口启动就可以了,前端执行命令npm run serve,后端执行命令np start。
到现在就到了整理项目的阶段了
前端项目整理:
- 首先用编辑器打开你的前端文件夹,可以先将App.vue中的内容全部删掉,然后输入个vue模板,创建一个div,内容写一个hello来进行测试一下
- 然后把views下面的页面都删掉
- router删除后的内容如图所示
- components(主键)中的内容也删掉
- main.js中要导入element-ui 以及vant ui,还要用axios做全局的注册。
- main.js配置完成之后,以后需要用axios直接this.$axios即可使用
后端项目的整理
- 更改routes中index.js的内容即可