脚手架文件

本文介绍了Vue项目的脚手架结构,对比Vue.js和vue.runtime的区别,讲解了ref属性、props配置、mixin混入、插件、scoped样式、TodoList案例以及开发配置中的代理设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.脚手架文件结构:

├── node_modules

├── public │

├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json:包版本控制文件

二.关于不同版本的Vue:

1.vue.js与vue.runtime.xxx.js的区别:

(1)vue.js是完整版的Vue,包含核心功能+模板解析器

(2)vue.runtime.xxx.js是运行版本的Vue,只包含:核心功能,没有模板解析器

2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。

三.ref属性

1.被用来给元素或子组件注册引用信息(id的替代品)

2.应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc)

3.使用方法:

打标识:<h1 ref=''xxx''>......<h1>或<School ref=''xxx''></School>

获取:this.$refs.xxx

四.配置项props

功能:让组件接收外部传来的数据

(1.)传递数据:

<Demo name =''xxx''>

(2.)接收数据

2. 读取方式一: 只指定名称 props: ['name', 'age', 'setName']

读取方式二: 指定名称和类型 props: { name: String, age: Number, setNmae: Function }

读取方式三: 指定名称/类型/必要性/默认值 props: { name: {type: String, required: true, default:xxx}, }

备注:props是只读的,Vue底层会检测到你对props的修改,如果进行了修改就会发出警告。

若业务要求确实需要修改,那么请复制props的内容到data中一份,然后去data中修改数据。

五:mixin混入

功能:可以把多个组件公用的配置提取成一个混入对象

使用方法:

第一步定义混入:例如:

export const mixin=

{

methods:{

showName(){

alert(this.name)

}

},

mounted(){

console.log('你好啊!')

},

}

export const mixin2={

data(){

return{

x:1,

y:2

}

}

}

第二步使用混入,例如:

(1.)全局混入:Vue.mixin{xxx}

(2.)局部混入:mixin:{'xxx'}

六.插件

功能:用于增强Vue

本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

七.scoped样式

scoped原理:给子组件盒子添加一个自定义属性data-v-xxxx,然后通过属性选择器来增加css权重

作用:让样式在局部生效,防止冲突

写法:<style scoped>

还有一个顺嘴一说的<style lang="less">

八.todos案例

|总结TodoList案例

1.组件化编码流程:

(1,拆分静态组件:组件要按照功能点拆分,命名不要与htm1元素冲突。

(2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用, 还是一

些组件在用:

1).-一个组件在用:放在组件自身即可。

2). -些组件在用:放在他们共同的父组件上(状态提升) .

()实现交互:从绑定事件开始。

2. props适用于:

()父组件==>子组件通信

(2).子组件==>父组件通信(要求父先给子一个函数)

3.使用v-model时要切记: v-model绑定的值不能是props传过来的值, 因为props

是不可以修改的!

4. props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推

荐这样做。

5.nextTick

语法:this.$nextTick(回调函数)

作用:在下一次DOM更新结束后执行其指定的函数

什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

九.脚手架配置代理

方法一

在vue.config.js中添加如下配置:

devServer:{

  开启代理服务器(方式一)

  proxy:'http://localhost:5000'

}

说明:

1.优点:配置简单,请求资源时直接发送给前端(8080)即可

2.缺点:不能配置多个代理,不能灵活的控制请求是否走代理

3.工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么请求会发送给服务端(优先匹配前端资源(8080))

方法二

编写vue.config.js配置具体代理规则:

devServer: { //开启代理服务器 (方式1) 配置多个代理

proxy: {

'/atguigu': { //'/atguigu'是自行设置的请求前缀,匹配所有以'/atguigu'开头的请求路径

target: 'http://localhost:5000',//代理目标的基础路径

pathRewrite:{'^/atguigu':''}, //路径重写,(正则)匹配以api开头的路径为空(将请求前缀删除)必须写

// ws: true,//用于支持websocket

changeOrigin: true //用于控制请求头中的host值

},

'/demo':{

target:'http://localhost:5001',

pathRewrite:{'^/demo':''},

changeOrigin:true

}

}

}

changeOrigin设置为true时,服务器收到的请求中的host为:localhost:5000(撒谎了,本来是8080的)默认值就是true

changeOrigin设置为false时,服务器收到的请求中的host为:localhost:8080(没撒谎,本来就是8080的)

说明:

1.优点:可以配置多个代理,且可以灵活的控制请求是否走代理

2.缺点:配置略微繁琐,请求资源时必须加前缀

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值