Vue2脚手架

最新推荐文章于 2024-04-13 22:01:07 发布

li_ding_ding

最新推荐文章于 2024-04-13 22:01:07 发布

阅读量1.6k

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/li_ding_ding/article/details/122788976

版权

Vue中使用组建的三大步骤：

一：定义组件（创建组件）

二：注册组件

三：使用组件（写组件标签）

1：如何定义一个组件：

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别：

(1):el不写；----最终所有组件都要经过一个vm的管理，由vm中的el决定服务那个容器

(2):data必须写成函数；----避免组件被复用，数据存在引用关系

备注：使用template可以配置组件结构

2：如何注册组件：

(1):局部注册：靠new Vue的时候传入components选项

(2):全局注册：靠Vue,component(‘组件名’,组件)

3：编写组件标签：

几个注意点：

1：关于组件名：

一个单词组成：

第一种写法（首字母小写）：school

第二种写法（首字母大写）：School

多个单词组成：

第一种写法（kebab-case命名）：my-school

第二种写法（CamelCase命名）：MySchool

备注：

(1):组件名尽可能回避HTML中的已有标签的元素名称，例如：h1,span

(2):可以使用name配置项指定组件在开发者工具中呈现的名字

2：关于组件标签：

第一种写法：

第二种写法：

不使用脚手架时，会导致后续组件不能渲染

3：一个简写方式:

const school = Vue.extend(options) 可简写为：const school = options

关于VueCompontent

1:school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2：我们只需要写或,Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)

3:特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent ！！！

4：关于this指向：

(1):组件配置中：

data函数，methods中的函数，watch中的函数，computed中的函数它们的this均是【vueComponent】实例对象

(2):new Vue(options)配置中：

data函数，methods中的函数，watch中的函数，computed中的函数他们的this均时【Vue实例对象】

5：VueComponent的实例对象，以后简称VC （也可以称为：组件实例对象）

一个重要的内置关系：VueComponent.prototype.__ proto __ === Vue.prototype

为什么要有这个关系：让组件实例对象（vc) 可以访问到Vue原型上的属性，方法

安装脚手架：

第一步：第一次安装： npm install -g @vue/cli

第二部：切换到你要创建的项目目录，然后使用命令创建项目

vue create 项目名称

第三步：启动项目：npm run serve

备注：如果下载缓慢，请配置淘宝镜像：

npm config set registry https://registry.npm.taobao.org

脚手架隐藏了所有webpack相关配置，若想查看具体的webpakc配置，执行：

vue inspect > output.js

ref属性：

1:被用来给元素或子组件注册引用信息(ID的替代者)

2:应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象

3:使用方式:

打标识:

…

或

获取:this.$refs.xxx

配置项：props用于父子传参

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

(1)：传递数据：在组件标签中直接配置属性，传过去是字符串，加 : 改为数值

(2):接收数据：

				//第一种方式（只接收）
				props: ["name", "sex", "age"],//简单声明接收
    
				//第二种方式（限制类型）
				props: {
				name: String, //限制为字符串
				 age: Number,//限制为数值
				 sex: String,
				 },

(3):第三种方式（限制类型，限制必要性，指定默认值）默认值和必要不在一块用

				 props: {
				 name: {
					 type: String, 
                    required: true, //name是必要的
				 		},
				  sex: {
					  type: String,
			   	      required: true,
					  },
				   age: {
	   				  type: Number,
      			      default: 30, //默认值
					  },

props是只读的，Vue底层会监视对props的修改，如果进行修改，会发出警报，若必须修改，复制一份props的内容到data中，然后修改data数据

在这里插入图片描述

mixin混合(混入)

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

使用方式：

第一步定义混合：

在与main.js同级别创建文件来存储共用配置项mixin.js

在这里插入图片描述

第二部使用混合：

1.全局混入：在main.js中配置

在这里插入图片描述

2：局部混入：在单个组件中混入：
在这里插入图片描述

插件：

功能：用于增强Vue

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

定义插件：

对象.install = function(Vue , options){

//添加全局过滤器

Vue.filter(…)

//添加全局指令

。。。。

}

使用插件：1：main.js中先导入 2：Vue.use( )

scoped样式：

作用：让样式在局部生效，防止冲突

写法：

总结案例流程：

1：组件化编码流程：

(1):拆分静态组件：组件按照功能点拆分，命名不要和html冲突

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

1）：一个组件在用：放在组件自身即可

2）：一些组件在用：放在他们共同的父元素上（状态提升）

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

2：props适用于：

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

(2):子组件===>父组件通信（提前给子组件一个函数）

3:使用v-model时要切记:v-model绑定的值是不能修改的，因为props的值是不能修改的

4：props传过来的若是对象类型的值，修改对象中属性时Vue不会报错，但是不推介这样做

webStorage

1：存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2：浏览器通过Window.sesslonStorage和Window.localStorage属性来实现本地存储机制

3：相关API：

1.xxxxStorage.setItem('key','value');

该方法接受一个键和值为参数，会把建制对添加到存储中，如果键名存在，则更新其对应的值

2：xxxxStorage.getItem('person')

该方法接受一个键名为参数，返回键名对应的值

3：xxxxStorage.removeItem('key');

该方法接受一个键名为参数，并把改键名从参数中删除

4：xxxxStorage.clear()

该方法会清空存储中的所有数据

4：备注：

1：SesslonStorage存储的内容会随着浏览器窗口的关闭而消失

2：LocakStorage存储的内容，需要手动清除彩绘消失

3：xxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null

4：JSON.parse(null)的结果依然是null

组件的自定义事件：

1：一种组件间通信的方式，适用于：子组件 ===> 父组件

2：使用场景：A是父组件的，B是子组件的，B想给A传递数据，那么就要在A中给B绑定自定义事件(事件的回调函数在A中)

3：绑定自定义事件：

1：在父组件中：<Deom @atguigu="test"/> 或 <Deom v-on:atguigu="test"/>

2:在父组件中：

<Deom ref="deom"/>
    ....
	mounted(){
        this.$refs.xxx.$on("atguigu",this.test)
    }

3:若想让自定义事件再触发一次，可以使用once修饰符，或$once方法。

4:触发自定义事件：this.$emit("atguigu",数据)

5:解绑自定义事件：单个事件：this.$off("atguigu")多个事件：this.$off(["atguigu","danei",...])全部事件：this.$off()

6：组件上也可以绑定原生DOM事件，需要用native事件修饰符

7：注意：通过this.$refs.xxx.$on("atguigu",回调)绑定自定义事件时，回调要么配置在nethonds中，要么用箭头函数，否则this指向就会出问题

全局事件总线：

1：一种组件之间的通信方式，适用于任意组件之间的通信

2：安装全局事件总线：

new Vue({
  el: "#app",
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this //安装全局事件总线
  }
})

3：使用事件总线：

1：接受数据：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调函数留在A组件自身

method(){
    demo(data){....}
}
.....
mounted(){
    this.$bus.$on('xxx',demo)
}

2:提供数据：this.$bus.$emit('xxxx',数据)

4:最好在钩子函数beforeDestroy钩子中，用$off去解绑当前组件所用到的数据事件

消息订阅与发布（pubsub）

1：一种组件间通信方式，适用于任意组件间通信

2：使用步骤：

1：安装pubsub：npm i pubsub-js

2：引入import pubsub from "pubsub-js";

3:接受数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods(){
	demo(data){....}
}
....
mounted(){
	this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
}

4:提供数据：pubsub.publish(‘xxx’,数据)

5:最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅

nextTick函数

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

2：作用：在下一次DOM更新结束后执行其指定的回调

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

Vue封装的过度与动画

1：作用：在插入，更新或移除DOM元素时，再适合的时候给元素添加样式类名

2：写法：

1：准备好样式：

*元素进入的样式

1：v-enter: 进入的起点

2：v-enter:active 进入过程中

3：v-enter-to 进入的终点

*元素离开的样式

1：v-leave 离开的起点

2：v-leave-active 离开过程中

3：v-leate-to 离开的终点

备注：若有多个元素，元素加name值，v-改为name值-

3：使用<transition>包裹要过度的元素，并配置name属性

若有多个元素需要过度，则需使用<transition-group>每个元素都要有指定的key值

<transition-group name="hello">
      <h1 v-show="!isShow" class="come" key="1">你好啊!!!</h1>
      <h1 v-show="isShow" class="come" key="2">你好啊!!!</h1>
</transition-group>

配置代理（跨域）

需要域名需看小新老师

slot插槽

默认插槽

<Category><img src="...."></Category>
<slot>默认值<slot>

#具名插槽

<Category><img slot="center" src="...."></Category>
或者 <template v-slot:center>...</template>
<slot name="center">默认值<slot>

#作用域插槽

数据不在使用者的地方时：

<slot :games="games">默认值<slot> //数据传给插槽的使用者

<Category>
    <template scope="gamesContent">{{gamesContent.games}}</template>
</Category>

vuex

组件中读取vuex中的数据：$store.state.sum

组件中修改vuex的数据：$store.dispatch("action中的方法名",数据)或$store.commit('mutations中的方法名',数据)

备注：如果没有网络请求或者其他业务逻辑，组件中也可以越过actions，那不写dispatch,直接编写commit

1：概念：

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中管理（读/写）。也是一种组件间的通信方式，且适用于任何组件通信

2：何时使用？

多个组件需要共享数据时

3：搭建vuex环境：

1：创建文件：src/store/index.js （红色字为代码示例)

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//准备actions用于组件中的动作，逻辑只有一步的时候可以省略此步，直接在组件中调用commint
const actions = {
      `jiaOdd(context, value) {
       //console.log("jiaOdd被调用了", value)
       if (context.state.sum % 2) {
        context.commit('JIA', value)
    }`
}
//准备mutations-用于操作数据（state）
const mutations = {
   	 `JIA(state, value) {
      state.sum += value
  },`
}
//准备state-用于存储数据
const state = {
    `sum: 0,
 	 school: '尚硅谷',
      subject: '前端',`
}
//使用vuex插件
Vue.use(Vuex)
//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state,
})

2:在main.js中创建vm时传入的store配置项

//引入Vue
import Vue from 'vue'
//引入app
import App from './App.vue'
//引入vuex
import Vuex from "vuex"
//引入store
import store from './store/index'
//关闭vue生产提示
Vue.config.productionTip = false

//创建vue实例对象
new Vue({
  el: "#app",
  render: h => h(App),
  store,
})

3:在组件中获取数据：

methods: {
    increment() {
      this.$store.`commit`("JIA", this.n);//$store.	获取数据
    },
    decrement() {
      this.$store.commit("JIAN", this.n);//逻辑不多的情况下直接调用commit调用mutations操作数据
    },
    incrementOdd() {
      this.$store.`dispatch`("jiaOdd", this.n);//逻辑比较多的时候调用dispatch
    },
    decrementWait() {
      this.$store.dispatch("jiaWait", this.n);
    },
  },
};

4:dispatch的另一个用法：

  jiaWait(context, value) {
    //console.log("jiaWait被调用了", value)
    setTimeout(() => {
      context.commit('JIA', value)
      context.`dispatch`('dome', value) //逻辑太多处理不过来时，调用dome
    }, 500);
  },
  dome(context, value) {
    console.log("dome被调用了", value)	//dome被调用
    context.`dispatch`("dome1", value)	//调用dome2
  },
  dome1(context, value) {
    console.log("dome1被调用了", value)	//dome被调用
  },

getters的使用：

1：概念：当state中的数据需要经过加工后在使用时，可以使用getters加工

2：在store.js中追加getters配置

.....
const getter = {
    bigSum(state){
        return state.sum * 10
    }
}

//创建并暴露store
export default new Vuex.Store({
    ......
    getters,
})

四个map方法的使用

一：引入方法：

import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

二：使用方法：

1:mapState使用

computed:{
    //借助mapState生成计算属性，从state中读取数据(对象写法)
    ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    //借助mapState生成计算属性，从state中读取数据(数组写法)
    ...mapState(["sum", "school", "subject"]),
}

2:mapGetters使用

//借助mapGetetters生成计算属性，从Getters中读取属性(对象写法同上)
    ...mapGetters(["bigsum"]),

3：mapMutations使用：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods: {
    //借助mapMutations生成对应的方法，方法中会调用commit联系mutations（对象写法）
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }),

    //借助mapMutations生成对应的方法，方法中会调用commit联系mutations（数组写法）
    ...mapMutations(["JIA", "JIAN"]),
}

4:mapActions使用：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)函数

methods:{
    //借助mapActions生成对应的方法，方法中会调用dispatch联系Actions（对象写法）
    ...mapActions({ incrementOdd: "jiaOdd", decrementWait: "jiaWait" }),

    //借助mapActions生成对应的方法，方法中会调用dispatch联系Actions（数组写法）
    ...mapActions(["jiaOdd", "jiaWait"]),
}

vuex模块化+命名空间

//求和相关配置
const countOptions = {
  `namespaced: true,` //开启命名空间
  actions: {},
  mutations: {},
  state: {},
  getters: {}

//人员管理相关列表
const personOPtions = {
  `namespaced: true,` //开启命名空间
  actions: {},
  mutations: {},
  state: {},
  getters: {}

//创建并暴露store
export default new Vuex.Store({
  modules: {
    countAbout: countOptions,
    personAbout: personOPtions,
  }
})

开启命名空间后，组件中读取state数据

//方式1：自己直接读取
return this.$store.state.personAbout.personList;
//方式2：借助mapState读取
...mapState("countAbout", ["sum", "school", "subject"]),

开启命名空间后，组件中读取getters数据

//方式1：自己直接读取
 return this.$store.getters["personAbout/firstPersonName"];
//方式2：借助mapState读取
 ...mapGetters("countAbout", ["bigsum"]),

开启命名空间后，组件中调用dispatch

//方式1：自己直接读取
this.$store.dispatch("personAbout/addPersonWang", personObj);
//方式2：借助mapState读取
...mapMutations("countAbout", ["JIA", "JIAN"]),

开启命名空间后，组件中调用commit

//方式1：自己直接读取
 this.$store.commit("personAbout/ADD_PERSON", personObj);
//方式2：借助mapState读取
...mapActions("countAbout", ["jiaOdd", "jiaWait"]),

vue-router

1:路由的基本使用

1：安装vue-router，命令：npm i vue-router

2：应用插件：Vue.use(VueRouter)

3：编写router配置项

//该文件专门用于创建整个应用路由器
import VueRouter from "vue-router"
//引入组件:
import Count from "../components/Count";
import Person from "../components/Person";
//创建router实例对象，去管理一组一组的实例规则
export default new VueRouter({
  routes: [{
      path: '/count',
      component: Count
    },
    {
      path: "/person",
      component: Person
    }
  ]
})

4：实现切换：(active-class可配置高亮样式，点击高亮)

<router-link to="/count" active-class="active">计算</router-link>

5：指定展示位置

<router-view></router-view>

注意：

1：路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

2：通过切换，”隐藏了“的路由组件，默认是被销毁掉的，需要时再去挂载

3：每个组件都有自己的$rounte属性，里面存储着自己的路由信息

4：整个应用只有一个router，可以通过组件的$router属性获取到

2:多级路由

1：配置路由规则，使用children配置项

export default new VueRouter({
  routes: [{
      path: '/count',
      component: Count,
      `children`: [{	//通过children配置子级路由
        path: 'message',
        component: Message
      }]
    },
    {
      path: "/person",
      component: Person,
      `children`: [{
        path: 'news',
        component: News
      }]
    },
  ]
})

2：跳转(要写完整路径)

<router-link to="/Count/Message">Message</router-link>

3:路由的query参数

1：传递参数

<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link:to="`/count/message/detail?id=${m.id}&title=${m.title}`">
    {{ m.title }}</router-link>
<!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link
          :to="{
            path: '/count/message/detail',
            query: {
              id: m.id,
              title: m.title,
            },
          }">
		{{ m.title }}</router-link>

2：接收参数：

$route.query.id
$route.query.title

4:命名路由：

1：作用：可以简化路由的跳转

给路由命名：

export default new VueRouter({
  routes: [{
      `name: "guanyu",` 	//给路由命名
      path: '/count',
      component: Count,
      children: [{
          path: 'message',
          component: Message,
          children: [{
           ` name: "xiangqing",`	//给路由命名
            path: 'detail',
            component: Detail,
          }]
        },
        {
          path: 'news',
          component: News
        },
      ]
    },
    {
      path: "/person",
      component: Person,
    },
  ]
})

2：简化路径：

//简化前，需要写完整的路径
<router-link  :to="`/count/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link>
//简化后，直接通过名字跳转
<router-link  :to="{name:xiangqing}">{{ m.title }}</router-link>
//简化后配合传递参数
 <router-link
          :to="{
            `name: 'xiangqing',`
            query: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link>

5:路由的params参数

1：配置路由，声明接收params参数

export default new VueRouter({
  routes: [{
      name: "guanyu",
      path: '/count',
      component: Count,
      children: [{
          path: 'message',
          component: Message,
          children: [{
            name: "xiangqing",
            `path: 'detail/:id/:title',`	//使用占位符声明接收params参数
            component: Detail,
          }]
        },
        {
          path: 'news',
          component: News
        },
      ]
    },
    {
      path: "/person",
      component: Person,
    },
  ]
})

2：传递参数

<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/count/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
{{ m.title }}</router-link>
<!-- 跳转路由并携带params参数，to的对象写法 -->
       <router-link
          :to="{
            name: 'xiangqing',
            params: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置项

3：接收参数：

$route.params.id
$route.params.title

6:路由的props配置

作用：让路由组件更方便的收到参数

		  {
            name: "xiangqing",
            path: 'detail',
            component: Detail,
            // props的第一种写法，值为对象,该对象中的所有key-value都会以props的形式传给Detail组件
             props: {
              a: 1,
              b: "hello",
             }
            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以				  props的形式传给Detail组件
            props: true,
            //props的第三种写法，值为函数
            props($route) {
              return {
                id: $route.query.id,
                title: $route.query.title
              }
            }
          }

7:`<router-link>`的replace属性

1：作用：控制路由跳转时操作浏览器历史记录的模式

2：浏览器的历史记录有两种写入方式：分别是push和replace，replace时替换当前记录，路由跳转时默认为push

3：如何开启replace模式：<router-link replace ……>news

8:编程式路由导航

1：作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

2：具体编码：

<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>

methods: {
    pushShow(m) {
      this.$router.push({	//点击按钮，用push方法跳转路由
        name: "xiangqing",
        query: {
          id: m.id,
          title: m.title,
        },
      });
    },
    replaceShow(m) {
      this.$router.replace({
        name: "xiangqing",	//点击按钮，用replace方法跳转路由
        query: {
          id: m.id,
          title: m.title,
        },
      });
    },
  },
  //控制路由前进后退
  methods: {
    back() {
      this.$router.back();		//后退
    },
    forward() {
      this.$router.forward();	//前进
    },
    test() {
      this.$router.go(-2);		//可前进也可后退，传参正数是前进n，负数为倒退n
    },
  },

9:缓存路由组件：

1：作用：让不展示的路由组件保持挂载，不被销毁

2：具体编码：

 <keep-alive include="News">  //include的值为组件编码，需要缓存的组件名称
      <router-view></router-view>
 </keep-alive>
<!--缓存多个路由组件-->
 <keep-alive include="['News','Message'....]">  
      <router-view></router-view>
 </keep-alive>

10:路由守位：

1：作用：对路由进行权限控制

2：分类：全局守卫，独享首位，组件内守卫

3：全局守卫

//全局前置守卫，初始化时执行，每次路由切换执行
router.beforeEach((to,from,next)=>{
    if(to.meta.isAuth){	//判断当前路由是否需要权限控制 （meta：在路由中配置meta可以自定义属性）
        if(localStorage.getItem("school") === "atguigu"){ //权限控制的具体规则
            next()  //放行
        }else{
            alert("无权限查看")
        }
    }else{
        next()  //放行
    }
})

//全局后置路由守卫，初始化执行，每次路由切换后执行
router.afterEach((to, from) => {
  if(to.meta.title){	//meta：在路由中配置meta可以自定义属性 meta: {peiqi: false}
      document.title = to.meta,title //修改网页的title
  }else{
      document.title = "Vue_test"
  }
})

4：独享守卫某一个路由单独配置守卫，与全局后置路由守卫配合

  `beforeEnter`: ((to, from, next) => {
        if(to.meta.isAuth){	//判断当前路由是否需要权限控制 （meta：在路由中配置meta可以自定义属性）
          if(localStorage.getItem("school") === "atguigu"){ //权限控制的具体规则
            next()  //放行
          }else{
            alert("无权限查看")
           }
        }else{
        next()  //放行
    }   
  })

5：组件内守卫

  //通过"路由规则"进入，该组件被调用
  beforeRouteEnter(to, from, next) {
    // ...
  },
  //通过"路由规则"离开，该组件时被调用
  beforeRouteLeave(to, from, next) {
    // ...
  },

11：路由的两种工作模式：

1：对于一个url来说，什么是hash值？—-#及其后面的内容就是hash值

2：hash值不会包含在HTTP请求中，即：hash值不带给服务器

3：hash模式：

1.地址中永远带着#号，不美观

2：若以后讲地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法

3：兼容性好

4：history模式：

1：地址干净，美观

2：兼容性和hash模式相比较差

3：应用部署上线时需要后端人员支持，解决刷新页面服务器端404的问题

const router = new VueRouter({
  mode: 'history',		//配置模式
  routes: [{
      name: "guanyu",
      path: '/count',
      component: Count,
      meta: {
        peiqi: false
      },
  })

history模式（node.js）后端解决刷新页面404问题：

1:下载中间件：

npm i connect-history-api-fallback

2:在服务器引入

const history = require('connect-history-api-fallback')

3:在引入静态资源之前调用:

app.use(history())

Vue UI 组件库

移动端常用UI组件库

1：Vant http://youzan.github.io/vant

2：Cube UI https://didi.github.io/cube-ui

PC端常用的UI组件

Element UI https://element.eleme.cn

2:IView UI https://www.iviewui.com

Element UI 由于官方更新不及时，在按需引入时，babel.config.js文件改为：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", {
      "modules": false
    }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

li_ding_ding

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue2脚手架

Vue中使用组建的三大步骤：一：定义组件（创建组件）二：注册组件三：使用组件（写组件标签） 1：如何定义一个组件：使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别： (1):el不写；----最终所有组件都要经过一个vm的管理，由vm中的el决定服务那个容器 (2):data必须写成函数；----避免组件被复用，数据存在引用关系备注：使用template可
复制链接

扫一扫