如何完整的搭建一个项目的开发环境?

本章节主要说的是如何完整的搭建一个项目的开发环境
一、安装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。
10进入项目目录之后执行命令cnpm i axios --save ,这个命令是用来发ajax请求的。
11.安装所需要的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,后端执行命令npm start。
到现在就到了整理项目的阶段了
前端项目整理:
首先用编辑器打开你的前端文件夹,可以先将App.vue中的内容全部删掉,然后输入个vue模板,创建一个div,内容写一个hello来进行测试一下
然后把views下面的页面都删掉
router删除后的内容如图所示
components(主键)中的内容也删掉
main.js中要导入element-ui 以及vant ui,还要用axios做全局的注册。
main.js配置完成之后,以后需要用axios直接this.$axios即可使用

在这里插入图片描述
在这里插入图片描述

后端项目的整理
更改routes中index.js的内容即可
在这里插入图片描述

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值