1、最终目的
使用vue构建前端项目页面,前后端分离,前端项目需要发布在node服务器上。
2、所用技术有
客户端使用:vue+webpack
服务端则使用:node+koa.js
3、项目搭建步骤如下:
客户端搭建(开发时搭建)
》新建项目文件夹,文件夹取名随便你,最好使用英文小写。我这里叫ambers
》在项目文件夹下,新建两个文件夹:
1、client文件夹:用于开发
2、server文件夹:用于发布
》进入client文件夹使用
npm install vue-cli -g 全局安装vue
》项目初始化
vue init webpack
》运行项目并打包
npm run dev
使用localhost:8080打开,即可运行项目
服务端搭建(用于项目发布,可在项目完成后发布时再搭建)
》进入server文件夹使用以下命令进行初始化
npm init
》安装koa
npm i koa --save-dev
》安装依赖
npm i koa-static --save-dev
》新建app.js文件夹,将打包好的client里面打包好的dist文件夹copy到server文件夹下。
app.js文件配置如下:
修改package.josn配置
》服务端运行项目:
进入server文件夹使用:
npm run start
使用localhost:端口号即可访问发布好的项目啦!
第一次搭建vue项目和node服务,写得不是很好,请见谅。