vue项目如何部署到服务器

vue项目如何部署到服务器,第1张

第一步配置 vueconfigjs

第二步修改路由,改为 hash模式

第三步文件打包,执行以下,目录中会出现一个dist文件夹,将文件拖到服务器的 root 文件夹中

第四步可以通过域名进行访问 >修改vueconfigjs文件中的proxy,匹配线上接口中所有包含v1字段的接口,重写到线上接口,其他不匹配的继续走mock
注意引用mock数据,是after ,把before改成after,因为这个问题改的生无可恋怀疑人生ing
proxy: {
'/v1': {
target: >

在开发环境,vue-cli 会帮我们创建一个开发服务器( >是的,Element-UI是一个基于Vuejs开发的UI组件库,需要在服务器上运行。如果您想在本地开发调试,可以通过搭建本地服务器进行访问。另外,Element-UI也可以通过CDN引入,但使用CDN会有一定的限制,如无法本地开发调试等。因此,在实际项目中,建议使用服务器部署Element-UI。

数据双向绑定,组件化,单文件组件

全局api: vueextend 、 vueset
实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项
实例属性和方法: vm$on 、 vm$data 、 vm$destroy() 在$都是vue的实例和方法
指令: directive
内置组件: <components></compontents> 、 <keep-alive></keep-alive> 、 <router-view></router-view>

数组中不可用的方法:slice,concat;
直接修改数组list[i] = 值,不可以这样直接修改;
Vueset(数组,索引,{值}) vue的全局方法set来更改数组的某一项的值

标签属性和条件渲染
标签属性: v-bind:href='link"; 等效于 :href="link" 动态绑定;
条件渲染: v-if 、 v-else 、 v-show ;
数据绑定: {{}} 、 v-html (原始-HTML)、 v-text ;

事件绑定-内置事件绑定,自定义事件绑定
v-on:click="run" 等效于 @:click="run" 事件绑定;
自定义事件绑定: 父组件自定义事件
<my-compented @my-event='toggle'></my-compented>
子组件触发 my-event 自定义事件; this$emit('my-event', opation);
父组件执行toggle 函数;

计算属性和数据监听
computed选项 -计算属性:根据我们调用属性来跟新,调用的属性没有变更,我们computed选项里面的方法读取的是缓存;

页面内容响应数据v-once
如果你需要页面内容响应数据的变化,就不加v-once。
如果你需要页面内容渲染后,不随数据的变化而变化,就加上这个。
对于一些固定不变的组件,在调用时我们可以加上v-once,只在第一次渲染执行,保存数据在内存中,后面再调用直接从内容中提取,提高执行效率。

应用

组件的通信
<p:is = "动态的组件名"></p> 等同于 <动态的组件名></动态的组件名> 动态绑定组件
注:Vue有个单项数据流的概念:即父组件传递给子组件的参数,子组件不能直接修改;防止引用类型参数被修改后,如果父组件中其他地方也使用了此参数会受到影响。

子组件 props 接受的两种形式:
数组: ['first-name','two-name'] ,从父组件传递两个属性值;
动态展现: {{firstName}}
对象:

slot:插槽
父组件插件里面定义的内容放到子组件 slot 中:

子组件

vue高级功能--过渡和动画

自定义指令:

使用 vue-cli的优势:
成熟的vue项目架构设计;
本地测试服务器;
集成打包上线方案 webpack

npm install vue-cli -g :全局安装vue-cli
vue init webpack my-project :初始化项目
npm install 安装项目依赖

npm run dev :在localhost启动测试服务器;
npm run bulid :生成上线目录(部署)

a、安装 vue-router

b、配置路由

6、关闭eslint
dev模式下,默认会做eslint检测,若要关闭,打开 config/indexjs ,设置 useEslint: false ,${}占位符,多行字符串

7、生命周期

8、支持es6
es6中很多新特性很好用class、promise、then、catch、(数组转换符号)、函数设置参数默认值等
a、安装babel-polyfill

b、在入口mainjs文件当中引入:

c、找到build文件夹下的webpackbaseconfjs

文章参考: 慕课网-欧米雪儿lyy

vue 中的 proxy 就是利用了 Node 代理,原理还是因为服务器端没有跨域这一说嘛,也是用了这么一个插件 地址

‘/api’:是指遇到这个字符开头的话,在这个字符前面加上target里面的ip或者域名。

举例:
①登录接口: >

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/10344722.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-07
下一篇 2023-05-07

发表评论

登录后才能评论

评论列表(0条)

保存