VSCode搭建vue环境并打包部署到nginx服务器

目录

• 前言
  • VSCode
  • Vue
  • nginx
• 配置过程
  • 1. 安装node.js、npm
  • 2.VSCode配置
• 总结

前言

年初的时候学习了Spring、Mybatis、SpringMVC及它们之间的整合，却一直没有进行过项目开发，就直奔了Springboot学习去了。现在打算将数据库课程里的选课系统通过SSM框架实现。打算前端使用Vue及ElementUI进行开发，Web服务器使用nginx，先尝试部署vue项目到服务器中。

VSCode

Visual Studio Code (简称 VSCode / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

nginx

Nginx 是一个很强大的高性能Web和反向代理服务，它具有很多非常优越的特性： 在连接高并发的情况下，Nginx是Apache服务不错的替代品：Nginx在美国是做虚拟主机生意的老板们经常选择的软件平台之一。能够支持高达 50,000 个并发连接数的响应，感谢Nginx为我们选择了 epoll and kqueue作为开发模型。

配置过程

1. 安装node.js、npm

node.js去https://nodejs.org/en/download/下载

安装教程网上有很多，这里就跳过node.js和npm的安装过程了。

2.VSCode配置

1. 官方下载链接https://code.visualstudio.com/ 安装完成后可以选择性安装中文插件

1. 打开一个文件夹，右键 在集成终端打开 ，在终端里输入以下指令，安装webpack及vue-cli脚手架。

npm install -g vue-cli 
npm install -g webpack 

• 1
• 2

1. 接下来就可以使用vue-cli来构建项目

vue init webpack myvue
# myvue 即为项目名

• 1
• 2

将会自动生成vue项目

终端输入以下命令在开发环境下运行vue项目

npm run dev

• 1

点击链接查看显示效果

1. 打包vue项目并上传到服务器中

npm run build

• 1

打包完毕后，会生成dist目录，将目录上传到服务器nginx文件目录下，再配置代理，即可访问。

总结

这只是一次vue框架的使用测试，能够正常访问。接下来就是去使用ElementUI的UI库搭建前端页面，进行前端开发。