【转载】Vs2019开发Vue前端项目

1、关于为什么使用vs2019

由于平时使用vs2019写后台服务，已经非常熟悉此IDE，不想再熟悉其他IDE如vscode。

2、前期准备

首先需要在vsinstaller中选择Node.js功能，VUE项目需要node做后台，所以在vs中选择Node.js开发后，需要下载Node.js客户端。

图1 选择vs功能

图2 下载Node.js客户端

3、创建项目

打开vs2019，直接搜索vue，选择第一个即创建一个vue项目。

图3 创建Vue项目

4、项目结构介绍

npm：相当于.net项目中的引用，可以在这里添加第三方开发包，例如前端架构vant、elementui等。

dist：项目生成成功后会在这个文件夹中生成各种打包好的文件和目录，用于以后部署到托管服务中。

public：开放的静态资源目录，不会被编译到项目中，部署后会查看到public目录中的内容，程序中可以通过根目录直接引用。经常变化的资源可以放到这里，比如经常修改的图片或者css都可以放到这里。

src：程序的所有代码都在这里编写，主入口文件是main.js，在这里可以配置起始页，一般都是配置为App.vue，也就是我们的第一个vue页面。

src/assets：静态资源文件目录，可以存放icon、image、css等，在程序代码中可以通过相对路径引用，会随程序代码一起打包，部署后不可见。

components：组件目录，存放vue页面文件的目录。

图4 项目结构

5、架构搭建

Vue项目架构需要各种插件来搭建，主要分为：前端架构插件、持久化插件、路由插件。

前端架构：我是选择的Vant，Vant主要功能就是集合了很多好用的前端控件，直接用标签使用就可以，非常方便。

持久化插件：使用Vuex，Vuex主要功能为了持久化， Vue页面跳转后会销毁页面中的变量，为了保存数据持久化就要用到这个。

路由插件：使用Router，Router可以配置所有页面的路径，在页面跳转时使用它进行跳转。

首先在npm中查找插件，安装就可以。在入口文件main.js中，引入这些插件，语法很简单，import引入需要的插件包，然后使用Vue.use添加。在项目之后的使用中会时不时的要增加其他插件，都可以用这种方式添加。添加后就可以使用插件的相关功能，详细使用方法可以参照插件的使用说明文档。

其他需要自己创建的主要有两个功能，一个是工具类，一个是http请求类，因为平时编写代码经常会使用数据类型转换，或者判断数据是否空值等，最好封装一个类库。现在项目基本都是前后端分离的，所以肯定需要http请求，这个也最好封装成一个类。下面介绍下这两个类：

工具基类：base.js，在这里我把经常用到的方法和静态变量都存到这里，比如类型判空、获取随机数、生成时间戳等。

http请求类：httpUtil.js,在这里需要使用一个插件叫axios，它封装了http的get、post等方法，非常方便。在这个类里处理请求头、入参、出参的格式等，并判断好成功、失败，以及日志输出。

引入自定义类库后，不用Vue.use，而用Vue.prototype.$baseutil这种方式，这相当于自定义了一个全局变量，在需要使用的时候直接this.$baseutil就可以了（this代表vue）。

图5 添加插件包

6、配置文件

项目写完后，需要配置一下跨域访问，最好再配置一下开发环境及生产环境。这样可以实现在debug和部署环境下使用不同的服务地址。

跨域：根目录下创建文件vue.config.js，在devServer中配置需要访问后台的url地址，使用这个地址时要用固定的路径。当然可以配置多个跨域地址。

开发环境：根目录下创建文件.env.development，配置webapiurl、webapi2url。

生产环境：根目录下创建文件.env.production，配置webapiurl、webapi2url。

图6-1 跨域

图6-2 环境变量

7、部署

创建的项目在成功生成后会生成dist文件内容，里面就是需要发布的全部文件。而发布的托管服务可以选择iis、nginx，我选择iis，因为基本.net服务都是部署到iis中。nginx部署也非常简单，可以找找资料。

iis部署：

其实与其他.net一样的，部署成功后访问会报错，跨域问题，这里需要配置iis的url重写。这里需要下载两个iis包，Application Request Routing Cache、url rewrite，这是两个包，一个下载下来是rewrite_x64_zh-CN.msi，一个是ARRv3_0.exe。安装好之后，在iis功能中会多出两个，用于配置跨域。

图7-1 iis新增功能

URL重写：选择部署好的网站，点击右侧的“添加规则”,选择"空白规则"确定。随意起个名字，匹配这里选择“与模式匹配”，使用“通配符”,模式输入“*webapi/*”，最后填写操作属性，重写URL：“https://202.10.1.1:9001/{R:2}”，点击右侧“应用保存”，可以填写多个重写URL。当然url需要与实际一致。

图7-2 url重写配置

图7-3 url重写配置列表

设置代理：点击iis根目录，选择ApplicationRequestRoutingCache，右侧选择Proxy下的ServerProxySettings，然后勾选Enableproxy，右侧点击应用。至此全部设置完成，可以跨域请求其他服务后台了。

作者：MetM
链接：https://www.jianshu.com/p/6764a9db0823
来源：简书