网址 https://blog.csdn.net/li_ding_ding/article/details/122788976?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165605704516780366595524%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165605704516780366595524&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-122788976-null-null.142^v21^pc_rank_34,157^v15^new_3&utm_term=vue2+%E8%84%9A%E6%89%8B%E6%9E%B6&spm=1018.2226.3001.4187
Vue2脚手架
li_ding_ding
于 2022-02-05 11:42:40 发布
1177
收藏 2
文章标签： vue.js 前端
版权
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,
},
1
2
3
4
5
6
7
8
9
(3):第三种方式（限制类型，限制必要性，指定默认值）默认值和必要不在一块用
props: {
name: {
type: String,
required: true, //name是必要的
},
sex: {
type: String,
required: true,
},
age: {
type: Number,
default: 30, //默认值
},
1
2
3
4
5
6
7
8
9
10
11
12
13
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)
}
1
2
3
4
5
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 //安装全局事件总线
}
})
1
2
3
4
5
6
7
3：使用事件总线：
1：接受数据：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调函数留在A组件自身
method(){
demo(data){....}
}
.....
mounted(){
this.$bus.$on('xxx',demo)
}
1
2
3
4
5
6
7
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)//订阅消息
}
1
2
3
4
5
6
7
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>
1
2
3
4
配置代理（跨域）
需要域名需看小新老师
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>
1
2
3
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,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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被调用
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
getters的使用：
1：概念：当state中的数据需要经过加工后在使用时，可以使用getters加工
2：在store.js中追加getters配置
.....
const getter = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters,
})
1
2
3
4
5
6
7
8
9
10
11
12
四个map方法的使用
一：引入方法：
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
1
二：使用方法：
1:mapState使用
computed:{
//借助mapState生成计算属性，从state中读取数据(对象写法)
...mapState({ sum: "sum", school: "school", subject: "subject" }),
//借助mapState生成计算属性，从state中读取数据(数组写法)
...mapState(["sum", "school", "subject"]),
}
1
2
3
4
5
6
2:mapGetters使用
//借助mapGetetters生成计算属性，从Getters中读取属性(对象写法同上)
...mapGetters(["bigsum"]),
1
2
3：mapMutations使用：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
methods: {
//借助mapMutations生成对应的方法，方法中会调用commit联系mutations（对象写法）
...mapMutations({ increment: "JIA", decrement: "JIAN" }),
//借助mapMutations生成对应的方法，方法中会调用commit联系mutations（数组写法）
...mapMutations(["JIA", "JIAN"]),
}
1
2
3
4
5
6
7
4:mapActions使用：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)函数
methods:{
//借助mapActions生成对应的方法，方法中会调用dispatch联系Actions（对象写法）
...mapActions({ incrementOdd: "jiaOdd", decrementWait: "jiaWait" }),
//借助mapActions生成对应的方法，方法中会调用dispatch联系Actions（数组写法）
...mapActions(["jiaOdd", "jiaWait"]),
}
1
2
3
4
5
6
7
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,
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
开启命名空间后，组件中读取state数据
//方式1：自己直接读取
return this.$store.state.personAbout.personList;
//方式2：借助mapState读取
...mapState("countAbout", ["sum", "school", "subject"]),
1
2
3
4
开启命名空间后，组件中读取getters数据
//方式1：自己直接读取
return this.$store.getters["personAbout/firstPersonName"];
//方式2：借助mapState读取
...mapGetters("countAbout", ["bigsum"]),
1
2
3
4
开启命名空间后，组件中调用dispatch
//方式1：自己直接读取
this.$store.dispatch("personAbout/addPersonWang", personObj);
//方式2：借助mapState读取
...mapMutations("countAbout", ["JIA", "JIAN"]),
1
2
3
4
开启命名空间后，组件中调用commit
//方式1：自己直接读取
this.$store.commit("personAbout/ADD_PERSON", personObj);
//方式2：借助mapState读取
...mapActions("countAbout", ["jiaOdd", "jiaWait"]),
1
2
3
4
5
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
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
4：实现切换：(active-class可配置高亮样式，点击高亮)
<router-link to="/count" active-class="active">计算</router-link>
1
5：指定展示位置
<router-view></router-view>
1
注意：
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
}]
},
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2：跳转(要写完整路径)
<router-link to="/Count/Message">Message</router-link>
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
2：接收参数：
$route.query.id
$route.query.title
1
2
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,
},
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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,
},
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置项
3：接收参数：
$route.params.id
$route.params.title
1
2
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
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
},
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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>
1
2
3
4
5
6
7
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"
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
4：独享守卫某一个路由单独配置守卫，与全局后置路由守卫配合
`beforeEnter`: ((to, from, next) => {
if(to.meta.isAuth){ //判断当前路由是否需要权限控制 （meta：在路由中配置meta可以自定义属性）
if(localStorage.getItem("school") === "atguigu"){ //权限控制的具体规则
next() //放行
}else{
alert("无权限查看")
}
}else{
next() //放行
}
})
1
2
3
4
5
6
7
8
9
10
11
5：组件内守卫
//通过"路由规则"进入，该组件被调用
beforeRouteEnter(to, from, next) {
// ...
},
//通过"路由规则"离开，该组件时被调用
beforeRouteLeave(to, from, next) {
// ...
},
1
2
3
4
5
6
7
8
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
},
})
1
2
3
4
5
6
7
8
9
10
history模式（node.js）后端解决刷新页面404问题：
1:下载中间件：
npm i connect-history-api-fallback
2:在服务器引入
const history = require('connect-history-api-fallback')
1
3:在引入静态资源之前调用:
app.use(history())
1
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"
}
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
li_ding_ding
已关注
0
0
2
手把手教你使用Vue2脚手架——入门学习笔记（附代码）
Concise200的博客
736
Vue 脚手架1. 初始化脚手架2. 脚手架文件结构分析3. ref属性4. props配置项5. mixin混入6. 插件7. scoped样式 Vue CLI是一个基于 Vue.js 进行快速开发的完整系统，通过 @vue/cli 实现的交互式的项目脚手架。 1. 初始化脚手架 1.首先（仅第一次执行）在终端执行npm install -g @vue/cli 全局安装@vue/cli。 2.切换到你要创建项目的目录，然后使用命令创建项目 vue create xxxx 3.执行命令npm run se
Vue2.0搭建脚手架
Upward Force的博客
693
一、安装node.js 1、从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。 2、安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应的版本号，就说明安装成功了。 3、我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v，就会如下图所示，显示出npm的版本信息（另外需要注意的是，npm的版本最好是3.x.x以上，以免对后续产生影响）。 到这里node的环境已经安装完毕了，npm包管理工具也有了，但是由于npm的有些资源被墙，为了更
参与评论
Vue2.0搭建脚手架_zhangxiaocc的博客
5-9
2:安装命令 npmconfig set registry https://registry.npm.taobao.org 3:查看是否安装成功 npminfo express 三、安装vue-cli脚手架构建工具 vue-cli 提供了一个官方命令行工具,可用于快速搭建大型单页面应用。该工具提供开箱即用的构建...
...如何搭建脚手架项目_小R.的博客_vue2脚手架搭建...
6-6
今天尝试搭建vue脚手架项目,总结一下过程,方便以后使用。 1、安装vue-cli 可以用npm或者cnpm安装,这里我用的是cnpm: 利用淘宝镜像安装cnpm: npm install cnpm -g --registry=https://registry.npm.taobao.org ...
搭建Vue2脚手架
最新发布
qq_53152029的博客
17
1.配置npm淘宝镜像 查看是否配置成功 2.下载、安装webpack ②下载完毕输入 ③webpack-cli -v检查版本号，安装成功 1.若此前已经安装过脚手架，可以跳过第一步。 若此前没有安装过脚手架： 2.在合适的文件位置嵌入cmd 打开并输入命令创建脚手架 3.创建脚手架时选择vue的版本为vue2 在创建脚手架的文件目录下开启服务 开启成功 搭建成功...
前端学习笔记-vue2-脚手架
qq_43128157的博客
535
vue2-脚手架Vue脚手架初始化脚手架main.js引入不同版本的Vue默认配置脚手架文件结构ref属性props配置项混合插件scoped样式todoList案例webStorage相关API备注组件的自定义事件全局事件总线安装事件总线使用事件总线销毁事件总线消息订阅与发布（pubsub）使用步骤nextTickVue封装的过渡与动画写法 Vue脚手架 初始化脚手架 Vue脚手架是Vue官方提供的标准化开发工具（开发平台） 全局安装@vue/cli npm install -g @vue/cli
vue安装脚手架步骤(vue2脚手架+vue3脚手架)
IAmNotChangAn的博客
1497
vue安装脚手架步骤(vue2脚手架+vue3脚手架)
创建一个vue2的脚手架
May_OneDay的博客
576
首先看vue版本，使用 vue -V 来查看你的vue版本 1.打开npm命令行工具，cd到你想要的某个目录中，并输入： vue init webpack projectname (开始创建名为projectname的脚手架，官方提供了webpack-simple和webpack两种) 2.敲完命令后会引导你创建最基本的脚手架 之后基本项目结构就创建好了： 只需要关心src目录中的内容就好: assets: 存放图片、音频等一切静态资源 components: 存放所有的vu.
Vue2.0搭建Vue脚手架（vue-cli）
Amber的博客
83
随着vue.js越来越火爆，更多的项目都用到vue进行开发，在实际的开发项目中如何搭建开发脚手架呢？ 首先需要了解的知识： html、css、JavaScript、node.js（npm包管理器）、webpack自动化构建工具 安装node.js https://nodejs.org/zh-cn/官网下载安装即可 输入node -v查看版本： 安装cnpm 1.说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） 2.使用np
YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志
YDOOK
440
YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志 © YDOOK JYLin 1. 将新 icon 文件拖入文件目录： ./public: 2. 新建或者在已有的 vue.config.js 文件根位置中输入： module.exports = { pwa: { iconPaths: { favicon32: 'ydook.ico', favicon16: 'ydook.ico',
vue项目搭建的完整过程（vue2）
陌上花开然不归矣
474
1、node环境搭建 2、vue项目配置（vue2环境搭建、vue3环境搭建、vue2与vue3兼容） 3、npm和cnpm区别，以及在cnpm上配置淘宝镜像和npm上配置淘宝镜像有啥区别
Vue教程(三十九)vue-cli2脚手架安装
yuan_xw的专栏
302
Vue教程(三十九)vue-cli2脚手架安装 Vue CLI介绍 CI是 Command- Line interface，翻译为命令行界面，但是俗称脚手架。VueCL是一个官方发布 vue.js项目脚手架，使用vue-cli可以快速搭建vue开发环境以及对应的 webpacki配置。 安装NodeJS 可以直接在官方网站中下载安装：[http://nodejs.cn/donwload](http://nodejs.cn/donwload) 检查p安装的版本，版本要求8.9以上或者更高的版本 node
Vue2脚手架总结
weixin_41929941的博客
84
一、创建Vue脚手架 1.安装node.js环境 node官网 https://nodejs.org/en/ 下载并安装 直接下载并按照提示傻瓜式安装即可 检查node及npm环境 最新版的node已集成了npm，通过如下命令检查node及npm版本node -v npm -v 安装cnpm环境npm install -g cnpm --registry=http://registry.npm.taobao.org 安装完成之后，我们输入cnpm -v检测安装结果。 2.安装Vue环境 npm环
Vue2脚手架搭建
imber___zsk的博客
116
文章目录一、环境？二、使用步骤1.这里选择第三个2.3.Basic选的是第一个4.说明配置好了5.切换目录，才能跑起来6.成功 一、环境？ 二、使用步骤 1.这里选择第三个 2. 3.Basic选的是第一个 4.说明配置好了 5.切换目录，才能跑起来 6.成功 ...
Vue2.0 搭建Vue脚手架（vue-cli）
m0_63644111的博客
790
Vue2.0 搭建Vue脚手架（vue-cli）
vue-cli（vue脚手架）超详细教程
热门推荐
YinXiaobo
5万+
之前整理的一篇 vue-cli 新手教程，出乎意料意外的达到了 9W+ 的点击量，诚惶诚恐，为了让更多小伙伴有更好的体验，所以特意整理了这个新版本的。 vue2是对新手很友好的MVVM框架，有完善的官方中文文档，阅读起来也非常容易理解，由浅入深，示例完整。同时官方也提供了一个开箱即用的 vue-cli 帮我们生成一个完整的项目框架。 vue.js 著名的全家桶系列, 包含了， vue-route...
搭建vue2+vue-cli+vuex环境
qq_40659982的博客
371
vue2
vue-cli2脚手架搭建
潇蓝诺依的博客
488
vue脚手架搭建准备工作 安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)， node -v //显示node版本 npm -v //显示npm版本号 nmp镜像 Cmd命令行中输入 npm config set registry https://registr
Vue2项目配置（脚手架）
kxz_0204的博客
58
项目运行起来的时候，让浏览器自动打开 在package.json文件中找到第五行（一般都是第五行）的scripts的serve如图：添加---open
vue-vue2脚手架1-初识脚手架
飘然渡沧海的博客
106
vue-vue2核心10-脚手架 初识脚手架 安装vue 官网文档地址：vue cli cammand line interface 文档: 安装vue脚手架之前需要安装node.js Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 node.js官网连接 博主在这里安装的时候比较尴尬，因使用的是win7系统不支持node 12.以上的版本，会报错： window server 2012 R2,or higher 这里我提供一个12版本
————————————————
版权声明：本文为CSDN博主「li_ding_ding」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/li_ding_ding/article/details/122788976