2020-6-15-Vue脚手架

安装及命令、目录结构、常见问题、Vue补充知识

安装及命令

1安装vuecli

npm install -g vue-cli

2创建项目

vue create 项目名

3编译

npm run build

4打开可视管理工具

vue ui

---

目录结构

1根目录结构

-project
	-dist	#编译结果输出文件夹
	-node_modules	#依赖导入位置
	-public	#公共文件
		-favcon.ico
		-index.html	#首页
	-src	#编译源
	.gitignore
	babel.config.js
	package.json
	package-lock.json
	README.md
	vue.config.js	#vue脚手架相关配置
	

2src目录结构

-src
	-assets	#放置静态文件的文件夹
	-components	#vue组件文件夹
	-router	
		-index.js	#路由的js文件
	-views	#vue的视图文件夹
	App.vue	#根文件，仅包含template和style
	main.js	#根js
	

---

常见问题

1）axios跨域问题

(1)后端需设置响应头，支持跨域

(2)一般情況下，跨域只能是get方式。如果用post方式，前端需要用到qs库，将对象序列化后传到后端，thinkphp的助手函数input('post.')获取不到传入的参数，故想用thinkphp写restfull的接口是蛮蛋疼的

2）变量声明

任何变量声明后，必须使用，否则编译报错

3）v-for的使用

使用该迭代器时，必须在对应的标签标注key，否则报错

<ul>
    <li v-for="item of arr" :key="item.id"></li>
</ul>

4）v-html内容样式问题

v-html填充的内容不受外部样式的影响，如

<template>
    <p v-html="html">
        <!--尽管外部将span标签设置为红色，但span标签填充进来后，颜色仍是默认的黑色-->
    </p>
</template>
<style scoped>
    span{
        color:red;
    }
</style>
<script>
import $ from 'jquery'
export default={
    name:"aaa",
    data:()=>{
        return {
            html:"<span>你好</span>"
        }
    }，
    updated(){//要想改变span的颜色，需要在这个函数里通过js进行设置
        $('span').css('color','red')
    }
}
</script>

5）修改后编译生成文件未进行修改的问题

修改文件后未进行保存，点击编译，是不会将修改的内容编译进去的，所以用vscode完成修改后要进行保存操作

---

Vue补充知识

1插槽

1）单插槽

(1)组件中定义插槽

<template>
    <div>
        <slot></slot>   
    </div>
</template>

(2)调用者传入插槽内容

<template>
    <div>
        <com1><el-button>are you ok</el-button></com1>
    </div>
</template>
<script>
import com1 from "./com1"
export default {
    name: 'HelloWorld',
    components:{
    	com1
    },
}
</script>

2）多插槽

(1)组件中定义插槽

<template>
    <div>
        <slot name="left"></slot>  
        <slot name="center"></slot> 
        <slot name="right"></slot>  
    </div>
</template>

为每个插槽命名

(2)调用者传入插槽内容

<template>
    <div>
        <com1><el-button slot="left">are you ok</el-button><el-button >are</el-button></com1><!--指定slot的标签才会被渲染-->
    </div>
</template>
<script>
import com1 from "./com1"
export default {
    name: 'HelloWorld',
    components:{
    	com1
    },
}
</script>

3）插槽传值

组件定义插槽以后，可通过插槽向调用者传值

(1)组件中定义插槽并设置data属性

<template>
    <div>
        <slot :data="languages">
            <ul>
                <li v-for="item of languages" :key="item" v-text="item"></li>
            </ul>    
        </slot> 
    </div>
</template>
<script>
export default {
    data:()=>{
        return{
            languages:[
                "java","php","python"
            ]
        }
    }
}
</script>

(2)调用者获取插槽值

<template>
    <com1>
      <ul slot-scope="slot"><!--通过slot-scope获取插槽对象-->
        <li v-for="item in slot.data" :key="item" v-text="item+'*****'"></li>
      </ul>
    </com1>
</template>

2vuex

安装在完成后，创建一个js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

在main.js中注册

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


Vue.config.productionTip = false

new Vue({
  router,
  store,//注册
  render: h => h(App)
}).$mount('#app')

通过脚手架的ui界面安装后，此过程自动完成

1全局变量

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:"zhanghaun's store"//在这里定义变量
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

在任意组件中使用变量

<template>
    {{$store.state.name}}
</template>

2修改值

(1)在mutations里定义方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:"zhanghaun's store"
  },
  mutations: {
    setname(state,name){//这里定义方法
      console.log(name)
      state.name=name
    }
  },
  actions: {
  },
  modules: {
  }
})

修改值时调用commit方法

<template>
    {{$store.state.name}}
    <el-button @click="changename">改变</el-button>
</template>
<script>
export default {
  name: 'HelloWorld',
  methods:{
    changename(){
      this.$store.commit('setname','zhanghuan.top')//调用commit方法，将调用函数和修改后的值传入
    }
  }
}
</script>

3有异步操作的修改变量

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:"zhanghaun's store"
  },
  mutations: {
    setname(state,name){
      console.log(name)
      state.name=name
    }
  },
  actions: {
      async_setname(contex){//这里定义包含异步的方法
          setTimeout(()=>{
            contex.commit('setname','zhanghuan.com')
          },3000)
      }
  },
  modules: {
  }
})

调用dispatch方法

<template>
    {{$store.state.name}}
    <el-button @click="changename">改变</el-button>
</template>
<script>
export default {
  name: 'HelloWorld',
  methods:{
    changename(){
      this.$store.dispatch('async_setname')//调用dispatch方法
    }
  }
}
</script>

4长id最后一位为0问题

vue从接口中取得数据，id为类似1281175119831711701的数字时，会导致溢出，从而使得id值变化成1281175119831711700，最后一位变成0。要解决这个问题，需要让vue将id识别为字符串。所以，后端的实体类，需要将id的类型设置为String，传到前端后，vue会将id当作字符串来处理，从而问题得到解决。

5编译后打开出现空白页

注意问题是公共目录未配置正确，应在编译之前在vue.config.js进行如下配置

module.exports = {
  assetsDir: './',
  publicPath: './'
}

5当前位置跳到当前位置路由报错问题

Uncaught (in promise) Error: Avoided redundant navigation to current location: “/userPage”

浏览器出现以上错误代码，在router/index.js加上如下代码

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}