如果下载缓慢请配置npm淘宝镜像npm config set registry http://registry.npm.taobao.org
全局安装 @vue/cli npm install -g @vue/cli
切换到创建项目的目录,使用命令创建项目vue create xxx
选择使用vue的版本
启动项目npm run serve
打包项目npm run build
暂停项目 Ctrl+C Vue脚手架隐藏了所有webpack相关的配置,若想查看具体的webpack配置,请执行 vue inspect > output.js
vue脚手架隐藏了所有webpack相关配置,若想查看具体的webpack配置,执行
vue inspect > output.js
.文件目录
├── 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: 包版本控制文件
主要功能:将App组件放入容器中
new Vue({
el:'#app',
//render函数完成了这个功能:将App组件放入容器中
render: h => h(App),
// render:q=> q('h1','你好啊')
// template:`你好啊
`,
// components:{App},
})
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函数去指定具体内容。
输入vue inspect > output.js
可以查看Vue脚手架的默认配置;使用vue.config.js可以对脚手架进行个性化定制,和package.json同级目录,可在Vue Cli查看详细配置。
module.exports = {
pages: {
index: {
//入口
entry: 'src/main.js',
},
},
lintOnSave:false, //关闭语法检查
//开启代理服务器(方式一)
/* devServer: {
proxy: 'http://localhost:5000'
}, */
//开启代理服务器(方式二)
devServer: {
proxy: {
'/atguigu': {
target: 'http://localhost:5000',
pathRewrite:{'^/atguigu':''},
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值
},
'/demo': {
target: 'http://localhost:5001',
pathRewrite:{'^/demo':''},
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值
}
}
}
}
ref被用来给元素或子组件注册引用信息(id的替代者)
应用在html标签上获取的是真实DOM元素,应用在组件标签上获取的是组件实例对象vc
使用方式
props让组件接收外部传过来的数据
//简单声明接收
// props:['name','age','sex']
//接收的同时对数据进行类型限制
/* props:{
name:String,
age:Number,
sex:String
} */
//接收的同时对数据:进行类型限制+默认值的指定+必要性的限制
props:{
name:{
type:String, //name的类型是字符串
required:true, //name是必要的
},
age:{
type:Number,
default:99 //默认值
},
sex:{
type:String,
required:true
}
}
功能:可以把多个组件共用的配置提取成一个混入对象
使用方式
定义混入
const mixin = {
data() {....},
methods: {....}
....
}
使用方式
备注
功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
定义插件(见下 src/plugin.js)
使用插件:Vue.use()
Vue中的webpack并没有安装最新版,导致有些插件也不能默认安装最新版,如 npm i less-loader@7,而不是最新版
存储内容大小一般支持 5MB 左右(不同浏览器可能还不一样)
浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
相关API:
备注
一种组件间通信的方式,适用于:子组件 ===> 父组件
使用场景:子组件想给父组件传数据,那么就要在父组件中给子组件绑定自定义事件(事件的回调在A中)
绑定自定义事件
第一种方式,在父组件中
第二种方式,在父组件中this. r e f s . x x x . refs.xxx. refs.xxx.on(‘事件名’,方法)
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法
触发自定义事件this.$emit(‘事件名’,数据)
解绑自定义事件this.$off(‘事件名’)
组件上也可以绑定原生DOM事件,需要使用native修饰符 @click.native=“show” 上面绑定自定义事件,即使绑定的是原生事件也会被认为是自定义的,需要加native,加了后就将此事件给组件的根元素
注意:通过this. r e f s . x x x . refs.xxx. refs.xxx.on(‘事件名’,回调函数)绑定自定义事件时,回调函数要么配置在methods中,要么用箭头函数,否则 this 指向会出问题
绑定自定义事件在父组件中,触发自定义事件在子组件中
一种组件间通信的方式,适用于任意组件间通信。
安装全局事件总线:
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this *//安装全局事件总线,$bus就是当前应用的vm*
},
......
})
使用事件总线:
接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
提供数据:this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
注意:使用全局事件总线必须满足的条件:
$on
$emit
$off
方法取绑定、触发、解绑事件。一种组件间通信的方式,适用于任意组件间通信。
使用步骤:
npm i pubsub-js
import pubsub from 'pubsub-js'
methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
提供数据:pubsub.publish('xxx',数据)
最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)
去取消订阅。
$nextTick是一个生命周期钩子,在下一次DOM更新结束后执行器指定的回调。
语法:this.$nextTick(回调函数)
作用:在下一次 DOM 更新结束后执行其指定的回调。
什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
写法:
准备好样式:
元素进入的样式:
元素离开的样式:
使用
包裹要过度的元素,并配置name属性,此时需要将上面样式名的v换成name。
你好啊!
,且每个元素都要指定key
值。注:若想让也页面一开始就显示动画,需要添加appear。第三方动画库Animate.css
需要先下载axios库:npm install axios
方法一:在vue.config.js中添加如下配置
devServer:{
proxy:"http://localhost:5000"
}
优点:配置简单,请求资源时直接发给前端(8080)即可。
缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
方法二:编写vue.config.js配置具体代理规则
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
*/
优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
缺点:配置略微繁琐,请求资源时必须加前缀。
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 。
分类:默认插槽、具名插槽、作用域插槽
使用方式:
默认插槽:
父组件中:
html结构1
子组件中:
插槽默认内容...
具名插槽:父组件指明放入子组件的哪个插槽slot="center"
,如果是template标签可以写成v-slot:footer
父组件中:
html结构1
html结构2
子组件中:
插槽默认内容...
插槽默认内容...
作用域插槽:scope用于父组件往子组件插槽放的html结构接收子组件的数据。
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
父组件中:
- {{g}}
{{g}}
子组件中:
如果觉得对你有帮助的话,点个赞呗~
如需转载,请注明出处Hoki802