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

本章节主要说的是如何完整的搭建一个项目的开发环境
一、安装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的内容即可

如何完整的搭建一个项目的开发环境？相关推荐

从零搭建一个 Spring Boot 开发环境！Spring Boot+Mybatis+Swagger2 环境搭建
从零搭建一个 Spring Boot 开发环境!Spring Boot+Mybatis+Swagger2 环境搭建本文简介为什么使用Spring Boot 搭建怎样一个环境开发环境导入快速启动 ...
用vs完整的搭建一个项目流程(包括多个项目之间的依赖) 方法一
一个完整的项目应该是这样的图,有一个主程序,依赖其他的项目这边以控制台主程序输出.以Debug x64为例,如果是release的话需要重新配置一下第一步: 将项目配置改成Debugx64,这边 ...
Jenkins搭建Maven项目集成开发环境（源码库 Gitlab）
安装Jenkins 注意:安装路径最好选择没有空格和特殊符号的路径,以避免后面踩坑附:Jenkins官网下载配置Jenkins 安装完成后打开浏览器输入http://安装机器IP:8080等待初始 ...
从零开始搭建SpringBoot项目(一)——开发环境搭建(图文详细)
一.前置条件需要安装下载方法 IDEA 自备 jdk 1.8以上自备 MySQL 5.7 百度网盘下载 , 提取码:8vyi Maven库百度网盘下载 , 提取码:xq2u Navicat 1 ...
(cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
前言书接上一回,在了解cljs基本语法后并在clojurescript.net的奇特错误提示后,我们必须痛定思痛地搭建一个本地的开发环境,以便后续深入地学习cljs. 现有的构建工具由于浏览器 ...
python编程中文版百度百科_1.2 搭建python+pycharm编程开发环境
工欲善其事必先利其器,很多小伙伴在学习编程的道路上,第一步就被编程环境搭建劝退.今天就让我们起来快速搭建一个python的开发环境,开启征服python的第一步. 一.Python安装 1.1pyth ...
pycharm检测不到python编译器_1.2 搭建python+pycharm编程开发环境
工欲善其事必先利其器,很多小伙伴在学习编程的道路上,第一步就被编程环境搭建劝退.今天就让我们起来快速搭建一个python的开发环境,开启征服python的第一步. 一.Python安装 1.1pyth ...
Docker java项目发布/开发环境搭建
Docker java项目发布/开发环境搭建线上部署项目/开发环境搭建命令大全关闭windows10 指定应用安装Docker 安装 docker-compose 关于docker容器导致硬盘耗 ...
用Docker搭建Laravel和Vue项目的开发环境
在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速.轻量级.不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境(开发环境的所有依赖都安装在Docker构建容器 ...

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

如何完整的搭建一个项目的开发环境？相关推荐

最新文章

热门文章