第十二节
12.1vue-cli脚手架
1、vue-cli是vue的脚手架,对项目的搭建,打包都很方便;
2、在安装Vue-cli之前,首先先安装node,安装node的教程见Node
3、安装完成node后安装淘宝镜像和webpack
4、由于国内访问速度较慢,建议将NPM源设置为国内的镜像,可以大幅提升安装速度
#安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
#安装webpack
cnpm install webpack-cli -g
12.2vue2.X安装
#npm安装vue2.X
npm install vue-cli -g
#淘宝镜像安装vue2.X
cnpm install vue-cli -g
查看是否安装成功:vue -V
12.3vue3.X安装
(一)桥接工具安装
#使用npm安装桥接工具
npm install -g @vue/cli-init
#使用淘宝镜像安装桥接工具
cnpm install -g @vue/cli-init
(二)安装vue-cli 3.x+
#使用npm安装
npm install -g @vue/cli
#使用cnpm安装
npm install -g @vue/cli
12.4创建项目
创建项目需要注意:项目名不能有中文,不支持驼峰(含有大写字母)
#vue create 项目名
vue create vue-cli3
- default是使用默认配置,默认安装及自动配置babel、eslint
- 如果选择默认选项default,将会构建一个最基本的vue项目(没有vue-router也没有vuex)
- Manually select features是自定义配置,需要我们手动配置,也可以自己选择需要配置的
- 注意: 上面两个default一个是vue2,一个是vue3
12.4.1选择手动配置
- 通过键盘上的 ↓ 方向键选中Manually select features并敲回车,会显示如下配置项
- 通过↑ ↓ 箭头选择你要配置的项,按 空格 是选中,按 a 是全选,按 i 是反选
12.4.2下面是我的选择
12.4.3每个配置的解释
( ) Choose Vue version //选择vue脚手架的版本
( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了
JavaScript 的语法,
需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
12.4.4选好配置项之后 按回车键
12.4.5选择css 预处理器
node-sass是自动编译实时的,dart-sass需要保存后才会生效。sass官方目前主力推dart-sass最新的特性都会在这个上面先实现。而且Sass/Scss性能会更好,会更快一些。
12.4.6选择如何存放位置
这里我选择package.json
12.4.7是否保存当前配置
这里我选择的是n不保存,如果键入Y需要保存。如果保存的话下一次就不需要一步一步地从头开始配置。
12.5项目启动
(一)cd 项目名 进入到工程目录
(二)npm run serve 启动项目
(三)打开浏览器
12.6vue-cli3与2版本区别
- vue-cli3基于webpack4打造,vue-cli2是基于webpack3
- vue-cli3的设计原则是"0配置",移除了配置文件,build和config等
- vue-cli3提供 vue ui 的命令,提供了可视化配置
- 移除了static文件夹,新增了public文件夹,并将index.html移入了public文件夹
- 创建项目的命令 vue create 项目名
- public类似static文件夹,里面的资源会原封不懂的打包
- src源码文件夹
src #主要用于写原码
.gitignore # 排除目录【比如需要上传到githulb】
.babel # 配置安装包
package.json # 配置安装包
package-lock #锁文件【项目使用的版本】后期别人访问的时候,直接加载锁里面的版本信息;
12.6.1src下的main.js
- 这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount(’#app’)方法。
-
$mount(’#app’) :
手动挂载到id为app的dom中的意思 - 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载
需要注意的是: 该方法是直接挂载到入口文件index.html 的 id=app 的dom 元素上的
import Vue from 'vue' //导入构造函数
import App from './App.vue'//导入根组件App.vue
//构建信息是否显示
Vue.config.productionTip = false
new Vue({
//这里的render: h=> h(App)是es6的写法, render: h => h(App)可理解为是渲染App组件
render: h => h(App),
// render: h => h(App) 转换过来就是:
// render:(function(h){
// return h(App);
// });
}).$mount('#app')
12.6.2自定义配置文件
虽然项目创建完了,但无法满足定制化的开发需求,因为有时我们希望项目一启动就自动打开浏览器页面。这个时候就需要手动创建一个配置文件。
在项目根目录下新建一个 vue.config.js 配置文件,必须为 vue.config.js ,vue-cli3会自动扫
描此文件,在此文件中修改配置文件。
//在module.exports中修改配置
module.exports = {
devServer: {
open: true, // 启动服务后是否打开浏览器
}
}
12.7回顾父子通讯
第十三节
13.1生命周期
没个Vue实例在被创建时都要经历一系列的初始化过程,例如,需要设置数据监听,编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
13.1.1生命周期图
13.2钩子函数
<template>
<!-- 所有内容被这个根节点包裹起来 -->
<div>
<h3>这是生命周期函数演示</h3>
<h4 ref="m">{{msg}}</h4>
<button @click="setMsg()">修改</button>
</div>
</template>
<script>
/* 向外暴露 */
export default {
data () {
return {
msg:'生命周期钩子函数'
}
},
methods: {
setMsg(){
this.msg = "修改后",
console.log("被调用了")
}
},
//组件挂载钱
beforeCreate () {
//表示实例完全被创建之前会执行的函数 data和methods的数据并没有初始化
// console.log("------beforeCreate------");
// console.log(this.msg);
// this.setMsg()
},
//创建后
created () {
//data和methods已经被初始化好了,如果要调用data中的属性或methods中的方法,可以在created中调用
//但是不能获取到dom元素
// console.log("------created------");
// console.log(this.msg);
// console.log(this.$refs.m);//undefined
// this.setMsg()
},
//挂载前
beforeMount () {
//模板已经在内存中编译好了,但是尚未编译到页面中去,此时页面还是旧的
// console.log("------beforeMount------");
// console.log(this.msg);
// console.log(this.$refs.m);//undefined
// this.setMsg()
},
//挂载后
mounted () {
//组件已经脱离了创建阶段,进入到了运行阶段
//如果需要操作dom节点,最早要在mounted进行
// console.log("------mounted------");
// console.log(this.msg);
// console.log(this.$refs.m);//undefined
// this.setMsg()
},
//修改前
beforeUpdate () {
//当beforeUpdate执行的时候,页面的数据还是旧的,data中的数据是最新的,页面没有和最新的数据保持一致
// console.log("------beforeUpdate------");
// console.log("data的数据"+this.msg);
// console.log("页面的数据"+this.$refs.m.innerText);//undefined
},
updated () {
//数据也页面已经保持了同步,都是最新的
// console.log("------beforeUpdate------");
// console.log("data的数据:"+this.msg);
// console.log("页面的数据:"+this.$refs.m.innerText);
},
//销毁前
beforeDestroy () {
//页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数 类似cookie
// console.log("------beforeDestroy------");
// console.log("data的数据:"+this.msg);
// console.log("页面的数据:"+this.$refs.m.innerText);
},
//销毁后
destroyed () {
//组件已经完全被销毁,此时所有的数据和方法、指令等等,都不可以用了
console.log("------destroyed------");
console.log("data的数据:"+this.msg);
console.log("页面的数据:"+this.$refs.m.innerText);
}
}
</script>
<style>
</style>
第十四节
14.1非父子组件通讯
*事件总线(通俗讲就是:eventBus事件车)的实质就是创建一个vue实例,通过一个空的实例作为桥梁实现vue组件间的通信。它就是实现非父子组件通信的一种解决方案。
(一)创建一个事件车
// 建立的公共js文件(事件车),主要用来传递信息
// 引入vue.js
import Vue from "vue"
// 创建空的Vue实例
var event =new Vue();
export default event;
(二)创建Home.vue
<template>
<div id="home">
<h2>这是主页</h2>
<h2>{{list}}</h2>
<button @click="biu()">发射</button>
<h2>{{msg}}</h2>
</div>
</template>
<script>
import Bus from '../evenBus.js'
export default {
data () {
return {
list:["少女音","大叔音","萝莉音","正太音"],
msg:''
}
},
methods: {
biu(){
//给事件车发射
Bus.$emit("Home",this.list)
}
},
mounted () {
Bus.$on("one",Val =>{
this.msg = Val;
})
}
}
</script>
<style>
#home{
margin-top: 10px;
border: 2px solid red;
}
</style>
(三)创建Product.vue
<template>
<div id="product">
<h2>这是商品页</h2>
<ul v-for="val in msg">
<li>{{val}}</li>
</ul>
<button @click="fn">产品发射</button>
</div>
</template>
<script>
import Bus from '../evenBus.js'
export default {
data () {
return {
msg:''
}
},
methods: {
fn(){
// 发射一个自定义事件,传递信息
Bus.$emit("one","这是商品页传递过来的数据");
}
},
//组件挂载时触发的钩子函数
mounted () {
// 接收信息
Bus.$on("Home",val =>{
this.msg = val;
})
}
}
</script>
<style>
#product{
margin-top: 10px;
border: 2px solid red;
}
</style>
(四)销毁
14.2框架Vant
14.2.1首先安装
# Vue 2 项目,安装 Vant 2:
npm i vant -S
# Vue 3 项目,安装 Vant 3:
npm i vant@next -S
14.2.2引入组件到main.js
/ 引入、注册
// 导入所有组件
import Vant from 'vant';
// 导入组件所有的样式
import 'vant/lib/index.css';
// 注册插件
Vue.use(Vant);
14.2.3练习vant组件
<template>
<div>
<van-button class="btn" type="primary">主要按钮</van-button>
<van-button class="btn" type="info">信息按钮</van-button>
<van-button class="btn" type="default">默认按钮</van-button>
<van-button class="btn" type="warning">警告按钮</van-button>
<van-button class="btn" type="danger">危险按钮</van-button>
</div>
</template>
<script>
</script>
<!-- scoped 只在当前组件有效,不会污染其他组件的样式 -->
<style scoped="scoped">
.btn{
margin: 5px;
}
</style>
<template>
<div>
<van-cell is-link @click="showPopup">展示弹出层</van-cell>
<!-- <van-popup v-model="show">内容</van-popup> -->
<van-popup v-model="show" round position = "bottom" :style = "{height:'30%'}" >
<h3>这是h3标签</h3>
这是圆角弹出
</van-popup>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
methods: {
showPopup() {
this.show = true;
},
},
}
</script>
<style>
</style>
14.2.4在App.vue中引入注册使用组件
14.3 Element
安装 cnpm i element-ui -S
14.3.1引入组件到main.js
// 引入ui框架
import ElementUI from 'element-ui';
// 引入ui框架的样式
import 'element-ui/lib/theme-chalk/index.css';
// 注册,使用ui框架
Vue.use(ElementUI)
14.3.2创建
<template>
<div>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
<style>
</style>
14.3.3到App.vue中引入注册使用即可
上一节: Vue2/3渐进式框架(三)