现在都流行前后端分离的开发的思想,前端和后台开发是并行进行的,后台负责写接口,前端调用后台接口获取数据,并渲染数据,在这样的开发的环境下,作为一个后台接口开发人员,也有必要了解一下前端的技术,vue是一个轻量级的前端框架,上手相对容易,那么要搭建一个简单的前台Vue开发环境,是学习vue的前提,这里用vue的官方脚手架vue cli3搭建一个简易的开发环境。(初学vue不建议用脚手架)
第一步:安装node开发环境
Node下载地址:http://nodejs.cn/download/ windows下安装按照指示一步一步安装,安装步骤略,注意事项使用vue cli3 ,node的版本要在8.9及以上,推荐使用8.11.0+
第二步:安装vue cli
打开命令行运行工具,输入npm install -g @vue/cli,安装成功后 输入vue --version 验证是否安装成功
第三步:创建项目
vue create 项目名称
把生成好的项目用vs code编辑器打开
在工程目录下新建vue.config.js文件,文件内容如下,更多配置请参考官方文档
官网地址 https://cli.vuejs.org/zh/guide/installation.html
module.exports = {
baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
lintOnSave: true,
productionSourceMap: false,
devServer: {
port: 8075,
host: "localhost",
https: false,
open: true
}};
启动工程
npm run server