Vue2渐进式框架（四）脚手架/项目创建/Vant/Element框架使用

java亮小白1997

已于 2022-04-08 18:22:42 修改

阅读量923

点赞数 5

分类专栏： Vue 文章标签： vue

于 2021-03-20 10:49:47 首次发布

本文链接：https://blog.csdn.net/javaScript1997/article/details/114854550

版权

Vue 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

第十二节

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.2按需引入

首先安装好vant后
在这里插入图片描述
（一）npm i vite-plugin-imp -D
（二）import vitePluginImp from ‘vite-plugin-imp’
（三）

plugins: [
    vue(), 
    vitePluginImp({
      libList: [
        {
          libName: 'vant',
          style(name) {
            if (/CompWithoutStyleFile/i.test(name)) {
              // This will not import any style file 
              return false
            }
            return `vant/es/${name}/style/index.js`
          }
        },]

在这里插入图片描述

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>