作者主要是写后端的,所以本文主要以后端的角度,讲如何使用Vue+Tp框架结合,快速打通一个前后端分离的项目部署,可以作为后端学习Vue的入门步骤,通过此教程,你可以学到在生产环境和本地环境中,vue+tp 等框架是如何结合以及部署的。
提示:
1、写本文章时,代码环境在Windows 系统下,本地使用PHPstudy集成环境讲解。
2、本文章主要向初学Vue的后端同学讲解Vue与后端基础的结合使用
3、如果有看过Vue的文档,并且学习过基础语法以及使用,会使你更易理解下面的内容。
一:安装 Node 环境
下载地址为:https://nodejs.org/en/
终端输入以下命令检查是否安装成功:如果输出版本号,说明环境安装成功。
C:\Users\Administrator>node -v
v12.18.3
C:\Users\Administrator>npm -v
6.14.6
二:安装Vue项目环境
全局安装 vue-cli
C:\Users\Administrator>npm install --global vue-cli
- 进入Web项目目录,创建一个基于 webpack 的Vue项目,例如我这边是集成环境的目录下 D:\phpstudy_pro\WWW>
D:\phpstudy_pro\WWW>vue init webpack vue-demo2
//创建一个基于webpack 的Vue项目 vue-demo2 是你自定义的项目名,回车后出现下面选项
? Project name vue-demo2
//项目名,默认回车
? Project description A Vue.js project
//默认回车
? Author xxx //默认回车
? Vue build standalone
// 打包方式 默认回车
? Install vue-router? Yes
//是否使用vue-router,选Y
? Use ESLint to lint your code? No
//js语法检测,教程中不需要
? Set up unit tests No
//单元测试工具,教程不需要
? Setup e2e tests with Nightwatch? No
// 是否需要 端到端测试工具 教程不需要
? Should we run `npm install` for you after the project has been created? (recommended) no
//我们选择手动
vue-cli · Generated "vue-demo2".
# Project initialization finished!
# ========================
To get started:
cd vue-demo2
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
- 进入我们安装好的Vue项目目录下,安装依赖
D:\phpstudy_pro\WWW>cd vue-demo2
D:\phpstudy_pro\WWW\vue-demo2>npm i