【转载】Vs2019开发Vue前端项目
npm:相当于.net项目中的引用,可以在这里添加第三方开发包,例如前端架构vant、elementui等。dist:项目生成成功后会在这个文件夹中生成各种打包好的文件和目录,用于以后部署到托管服务中。public:开放的静态资源目录,不会被编译到项目中,部署后会查看到public目录中的内容,程序中可以通过根目录直接引用。经常变化的资源可以放到这里,比如经常修改的图片或者css都可以放到这里。
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
来源:简书
更多推荐
所有评论(0)