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开发环境已搭建起来了。

PHP CI框架+VUE开发环境搭建，tnpm搭建VUE环境相关推荐

【Vue基本指令】一.什么是Vue；二.Vue开发的方式；三.Vue的基本指令（重点）
目录一.什么是Vue 1.前端技术的发展(html.CSS.JavaScript) (1)JQuery:是对JavaScript进行了封装,使得操作DOM.事件处理.动画处理.Ajax交互变得非常简 ...
炫酷超拽！推荐一款Vue开发的OA系统，功能还不错哟！！！
推荐一款Vue开发的OA系统,功能还不错基于Ant Design Pro 开发 ,项目名:OA-System 基于 Ant Design of Vue 开发的OA办公系统 Vue 开发的OA系统具 ...
云音乐vue开发日记
云音乐vue开发日记前言 2020-11-21 1.vue中sass的配置 2.页面布局 3.引组件 2020-11-22 1.el-menu的使用 2.css经验 3.element-ui修改默认 ...
vue做混合式app_Vue Cordova教程-Vue+Cordova打造跨平台可安装的混合APP视频教程（大地）...
Vue+Cordova打造跨平台可安装的混合APP视频教程必看说明: 目前购买此教程送Html5+Cordova+Ionic智能电视(TV)应用开发教程视频教程: 购买过Ionic的同学可以直接在( ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
vue服务端渲染——项目搭建、开发、生产环境的部署、浏览渲染、SEO优化
几个月前,公司要求(服务端渲染)--用vue-ssr做了个服务端渲染,从起搭建.开发.部署.浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习.--几个月过去了,公司又 ...
Vue开发环境搭建和vue-cli脚手架
vue本质是一个js脚本,提供了一个前端框架.在开发时,可以直接引入这个js脚本,也可以使用脚手架工具,在本地搭建一个项目. Vue.js安装方法一.在 Vue.js 的官网上直接下载 vue.mi ...
Vue2.x-03使用vue-cli搭建Vue开发环境
文章目录概述安装npm 安装vue-cli 建立工程 npm i安装脚手架项目的基本支持包 npm run dev运行由脚手架构建的基本 Vue.js 程序工程结构概述脚手架 vue-cli ...

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

PHP CI框架+VUE开发环境搭建，tnpm搭建VUE环境相关推荐

最新文章

热门文章