PHP CI框架+VUE开发环境搭建，tnpm搭建VUE环境

背景：

CI框架本身作为前端框架已经能很好支持MVC结构，前端VIEW展示也能实现，但是由于项目需要，需要将前后端分离开发，前端用VUE实现，后端仍然使用CI框架。

 

环境安装：

1.node.js安装

官网下载https://nodejs.org/zh-cn/download/

根据自身开发环境下载，我是在WIN64上开发的，因此选择的Windows 安装包 (.msi) 64-bit，一路下一步默认安装，安装node之后npm也在其中；node -v和npm -v查看版本是否安装成功

 

2.tnpm安装

npm很多被墙或者下载特别慢超时，因此推荐用公司内tnpm镜像，使用npm安装tnpm：npm install @tencent/tnpm -g --registry=http://r.tnpm.oa.com --proxy=http://r.tnpm.oa.com:80 --verbose

安装后升级tnpm：tnpm install -g tnpm

参考：http://tnpm.oa.com/

3.VUE脚手架安装

tnpm install vue-cli -g

安装过程中选择版本，注意全家桶都选一个版本就好了

4.安装yarn

yarn跟npm本质是一样的东西，但是好在速度快，并且更新项目的时候能够保证依赖包的一致性

yarn install

安装完成版本查看yarn -version

 

 

实现：

1.运行

代码设置

 

yarn serve运行

 

点击链接即可进入

2.编辑vue前端代码、路由

Vue框架结构及实现介绍的很多这里不赘述了，编辑src/router/modeules路由下的地址信息，浏览器键入你配置的路由信息即可

3.数据交互

src/api 下配置你的接口信息

 

浏览器键入，发现报错，开发网内不能获取到，这里是因为CI的鉴权信息不全不能获取到，需要在开发时将鉴权代码去掉即可。

7.打包

yarn build

运行后会生成vue/dist文件夹，将其中的dist.zip复制到CI的根目录下解压，覆盖掉CI本身的static文件夹，因为前端都会走vue就用不到CI自身的了。浏览器中键入CI

至此CI+VUE开发环境已搭建起来了。