一、前端项目搭建流程1、项目初始化前端使用vue-cli3.0+webpack搭建项目结构。首先需要安装vue，可以通过npm安装，所以首先需要安装node。步骤如下（1）进入node官网，下载最新版本。安装完成后，执行node--version和npm--version查看是否安装成功。（2）node安装完成后，可以通过npm安装vue，可以先执行（npminstall-gcnpm--registry=http://registry.npm.taobao.org）将npm指向cnpm（淘宝镜像)然后执行cnpminstall-g@vue/cli全局安装vue-cli脚手架。执行vue--version查看是否安装成功(3)执行vuecreateprojectname创建一个项目，选择对应项目的初始配置，回车等待相关依赖包的安装。安装完成后，cdmy-vue进入项目目录。执行npmrunserve启动服务器。启动成功后如下图，可以通过localhost:8080访问。2.项目结构使用vscode打开我们的项目。结构如下图所示。我们简单分析一下：(1)node_modules:是项目需要的依赖包，我们使用包管理器(npm)下载的文件都在这里(2)public:public文件夹下的任何静态资源都会被简单复制无需通过webpack。您需要通过绝对路径引用它们。具体可以参考vue官方文档公开使用场景（三）src：放我们开发的资源文件，assets放静态文件，components就是我们开发的组件。您可以为我们的视图文件手动创建一个新的视图文件夹。视图：比如一个页面可以拆分成很多组件，最外层的就是视图组件。(4)app.vue：根组件(5)main.js：vue的入口文件，这里可以写一些全局的导入。(6)我们安装的依赖会被写入到package.json中。下次从仓库拉取代码时，执行npminstall，会根据package.json中的依赖安装相应的依赖包。(7).gitgnore：在配置中，我们需要忽略提交到git仓库的文件，比如忽略node_modules等。(8)在src下新建router.js文件。此外，还需要安装路由模块。npminstallvue-router--save安装完成后，在router.js文件中写importVuefrom'vue'importVueRouterfrom'vue-router'constIndex=()=>import('@/views/Index')//index是我们构建的视图，这里是路由的懒加载Vue.use(VueRouter)//配置路由exportdefaultnewVueRouter({mode:'history',//设置为历史模式，默认为hashmoderoutes:[{path:'/',//访问路径名:'index',//路由名component:Index//上面导入的视图组件}]})配置好，需要全局注入，写importrouterfrom'./router'inman.js//引入我们的router.js配置文件newVue({render:h=>h(App),router}).$mount('#app')将router写入vue实例，以便我们可以通过以下方式访问它：to和APIthis.$router.push({path:"/"})。具体可以参考vue-router官方文档3.封装接口请求脚本和跨域代理由于项目是前后端分离的，所以存在跨域请求在不同服务器的问题。在开发过程中，我们可以配置vue.config.js来解决。在项目一级目录下新建vue.config.js文件（即和src同级）（1）在vue.config.js中写入devServer:{proxy:{'/api':{target:'http://127.0.0.1:7001/api',//要代理的后端服务器地址changeOrigin:true,ws:true,pathRewrite:{'^/api':''}}}}(2)在src目录下新建一个api文件夹，然后分别新建两个文件api.js和api_config.jsapi_config.js这个文件用来配置前端请求接口的类型和urlexportdefault{//登录接口login:{url:'/api/login',method:'post'}}api.js这个文件遍历配置文件，然后使用promise封装axios，然后导出整个对象（这里不多解释，就是异步处理解决方案)importapiConfigfrom'./api_config'importaxiosfrom'axios'constobj={}for(letiinapiConfig){letconfig=apiConfig[i]obj[i]=(params)=>{returnnewPromise((resolve,reject)=>{letopt={method:config.method||'get',url:config.url}if(config.method==='post'){opt.data=params}else{opt.params=params}axios(opt).then(res=>{if(res.data.code===1){resolve(res.data)}else{console.log(res.data.msg)reject(res.data)}}).catch(error=>{console.log(error)})})}}exportdefaultobj(3)GlobalimportapiImportAPIfrom'@/api/api.js'inmain.jsVue.prototype.API=API(4)如何使用API.login({}).then(res=>{}).catch(_=>{});then是请求成功后的回调，res是返回结果catch是请求失败的回调，_这里为了返回结果，前端项目基本搭建完成，接下来就是配置后端，以便前端请求接口2.后端项目构建1.项目初始化后端使用egg.js构建项目结构，数据库等插件会不考虑显示.这只是前后端接口交互的简单实现。搭建步骤如下：（1）我们使用脚手架搭建项目，分别执行以下命令$mkdiregg-example&&cdegg-example$npminitegg--type=simple$npmistarttheproject：$npmrundev$openhttp://localhost:7001这样服务就在本地服务器的7001端口启动2.项目结构（1）在app目录下的controller（控制器）中，新建home.js文件并定义一个控制器函数，代码如下'usestrict';constController=require('egg').Controller;classHomeControllerextendsController{asynclogin(){const{ctx}=this;ctx.body={code:1,msg:"登录成功"};}}module.exports=HomeController;(2)在router.js中配置接口'usestrict';/***@param{Egg.Application}app-eggapplication*/module.exports=app=>{const{router,controller}=app;router.post('/api/login',controller.home.login);};这样，当我们在前端调用相应的接口时，就可以得到我们相应的返回内容。有很多鸡蛋含量。如果想了解更多，可以参考egg官方文档。这里就不详细介绍了。
