Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

第十二节

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
Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

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

Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

  • default是使用默认配置,默认安装及自动配置babel、eslint
  • 如果选择默认选项default,将会构建一个最基本的vue项目(没有vue-router也没有vuex)
  • Manually select features是自定义配置,需要我们手动配置,也可以自己选择需要配置的
  • 注意: 上面两个default一个是vue2,一个是vue3

12.4.1选择手动配置

  • 通过键盘上的 ↓ 方向键选中Manually select features并敲回车,会显示如下配置项
    Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用
  • 通过↑ ↓ 箭头选择你要配置的项,按 空格 是选中,按 a 是全选,按 i 是反选

12.4.2下面是我的选择Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

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选好配置项之后 按回车键

Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

12.4.5选择css 预处理器

Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用
node-sass是自动编译实时的,dart-sass需要保存后才会生效。sass官方目前主力推dart-sass最新的特性都会在这个上面先实现。而且Sass/Scss性能会更好,会更快一些。

12.4.6选择如何存放位置

Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用
这里我选择package.json

12.4.7是否保存当前配置

Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用
这里我选择的是n不保存,如果键入Y需要保存。如果保存的话下一次就不需要一步一步地从头开始配置。

12.5项目启动

(一)cd 项目名 进入到工程目录
(二)npm run serve 启动项目
Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用
(三)打开浏览器
Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

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 项目名
    Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用
  • 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回顾父子通讯

Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

第十三节

13.1生命周期

没个Vue实例在被创建时都要经历一系列的初始化过程,例如,需要设置数据监听,编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

13.1.1生命周期图

Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

13.2钩子函数

Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

<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组件间的通信。它就是实现非父子组件通信的一种解决方案。
Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

(一)创建一个事件车

// 建立的公共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>

(四)销毁

Vue2/3渐进式框架(四)脚手架/项目创建/Vant/Element框架使用

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渐进式框架(三)

上一篇:uni-app中引用vant的正确姿势,个人只用过H5


下一篇:Vue-Vant—全局路由拦截