后端开发也要知道的Vue.js（上）：准备篇

    大部分的后端开发可能对写页面会有一种天然的抵触，但工作中难免有这样的需求。所以从长远来看，能够编写样式和交互都相对简单的后台管理页面也是每个后端开发的必备技能。
    Vue.js是一套用于构建用户界面的JavaScript框架，其核心思想是数据驱动，只需关注视图层，DOM的内容会随着数据的改变而改变，而不需要像jQuery那样手动操作DOM去更新。相比于其他前端框架，Vue更简单灵活，容易上手，学习成本也相对较低。
    目前流行的前后端分离开发模式，前端大多采用Vue + element-ui编写页面和交互逻辑，后端用Spring Boot编写接口。本篇主要介绍开发Vue项目之前的准备工作，下篇将通过一个简单的前端项目来讲解vue的一些常用知识点：《后端开发也要知道的Vue.js（下）：实战篇》。

一、开发环境搭建：（windows系统）

1. Node.js安装：Node.js是JavaScript 的运行环境，类似于运行java的jvm。安装过程比较简单，直接去官网下载，选择安装路径，一路next下去就好了，如果遇到什么问题，网上有很多教程，不难解决。需要注意的一个点是，安装时选择Add to PATH，不需要手工添加环境变量。
    npm是Node.js下的包管理器，安装Node.js即自带了npm，虽然版本可能不是最新的。
    在命令行执行node -v和npm -v，如果显示版本号，表示已成功安装。
    由于npm服务器在国外，受网络影响大，速度慢且可能出现异常，可以通过npm config set registry=http://registry.npm.taobao.org 命令将node的仓库地址改成淘宝镜像的仓库地址。然后使用npm config get registry 命令检查镜像站是否配置成功。
    镜像配置成功后可以使用npm install npm -g 来安装更新npm，这里-g是指安装到global的全局目录(如果需要，全局目录可通过npm config set prefix “D:\nodejs\node_global” 修改，即之后使用npm安装的包都会安装在该目录下)。

2. 安装vue.js：npm install vue -g
    安装完成输入vue -V，显示版本号则安装成功，如果提示找不到命令，则可能需要编辑环境变量，将vue所在的路径添加到path后面，如下：

3. 安装vue-router：npm install vue-router -g
   vue-router是Vue.js官方的路由管理器，与Vue.js深度集成。Vue应用是基于路由和组件的，路由用于设定访问路径，并将路径与组件映射起来，路径之间的切换，也就是组件之间的切换。
4. 安装vue-cli 脚手架：npm install vue-cli -g
   vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。其中webpack是前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。vue-cli和webpack的关系是：vue-cli 里面包含了webpack， 并且配置好了基本的webpack打包规则。

   至此，准备工作基本完成，除此之外可以安装VScode（Visual Studio Code）作为前端开发环境。VScode的安装也比较简单，网上很多教程，此处不赘述。需要注意的一点是，安装完成的VScode直接打开Vue工程，代码是纯文本，也没有提示，推荐安装Vetur插件，可以轻松实现语法高亮、错误检查、格式化等功能。安装好的插件如图所示：

    开发环境搭建中，详细还可参考：https://www.cnblogs.com/liluxiang/p/9592003.html）

二、Vue项目创建和部署：

1. 项目创建：
    进入指定目录，执行指令：vue init webpack testvue，创建一个基于 webpack 模板的新项目，项目名为testvue。创建过程需要输入项目名称、描述、作者等，本文除了初始化安装了vue-router外，其余选择了“No”，项目中需要的时候再安装。

    初始化完成后，有如下提示：

    刚初始化的项目，目录结构如下：

    目录从上到下介绍如下：
1）build：构建脚本目录，即webpack的相关目录
2）config：构建配置目录
3）mode_modules：依赖包目录
4）src：源码目录
–assets：资源目录
–components：组件目录
–router：路由
–App.vue：主组件，所有页面的切换都是在该组件下进行
–main.js：入口js
5）static：静态资源目录
    其中src目录是开发人员主要关注的目录，代码的编写都在该目录下进行。

2. 本地启动：切换到该工程的目录下，执行 npm run dev 即可在本地运行vue项目：
    在浏览器中访问：http://localhost:8080/

3. nginx部署Vue项目：想要将vue项目部署到服务器，有tomcat部署和nginx部署等方式，前后端分离的项目通常采用nginx作为反向代理转发，方便跨域等问题的解决。
1）使用 npm run build打包，打包成功会在项目目录下生成dist文件夹，该文件夹下的内容即用于部署的静态文件。
2）修改nginx的配置文件，指向编译生成的dist目录：

server {
       listen       8081;
       server_name  localhost;	
       location / {
            root   E:/testvue/dist;  
		    try_files  $uri $uri/ /index.html;	
            index  index.html index.htm;
        }		
}

   启动nginx，即可访问：http://localhost:8081/
（nginx的安装配置及启动等相关知识不了解的小伙伴可以另行查资料获取。另外需要注意的是，路径的斜线方向，写错会访问失败）

    至此，小伙伴们对Vue的开发有一个宏观的认识，大体知道从何入手一个Vue项目，下篇的内容我们将动手完成一个具备相对完善的功能，但是对初学者来说又简单易懂的小项目。