vue配置和搭建

bootstrap
https://www.bootcss.com/

学习网站
http://cvcode.gitee.io/study/

其他学习网站
http://vip.mayikt.com

vue配置和搭建：

node-js（下载nod-js16或者17）
https://nodejs.org/en

vue3官网
https://cn.vuejs.org/
 安装：npm init vue@latest
vue2官网：https://v2.cn.vuejs.org/
  安装： npm install vue
仓库
https://mvnrepository.com/

element：快速搭建框架网站；
https://element.eleme.cn/#/zh-CN

往上爬一层
cd ..   

进入项目路径
cd ./property-vue2（项目名）

也可以直接退出去找到路径cmd
然后安装npm中的各命令

vue3：
npm install element-plus --save
// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

路由配置
createApp(App).use(ElementPlus).use(router).mount("#app")

vue3 路由配置router包下面
index.js
//路由需要用到哪些页面
import {createRouter, createWebHashHistory} from "vue-router"
const router = createRouter({
    history:  createWebHashHistory(), routes: [{
        path: "/", component: SystemIndex
    }, {
        path: "/login",
        component: UserLogin,
        children:[

        ]
    }]
})
export default router;

vue2路由配置和main.js配置
先安装：npm i element-ui -S
1.创建一个router包

在包下面写 ：index.js:

import VueRouter from 'vue-router'
import SystemIndex from "@/components/SystemIndex";
import UserLogin from "@/components/UserLogin";
import UserManger from "@/components/page/UserManger";
import DictManger from "@/components/page/DictManger";

const router = new VueRouter({
    routes: [{
        path: "/index", component: SystemIndex, children: [//子路由
            {path: "user", component: UserManger}, {path: "dict", component: DictManger}]
    }, {
        path: "/login", component: UserLogin
    }]
})
export default router;

//main.js:
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from "@/router";

import VueRouter from 'vue-router'
Vue.use(VueRouter);
Vue.config.productionTip = false
Vue.use(ElementUI);

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

axios官网
https://www.axios-http.cn/
安装
npm install axios

router安装
vue3:npm install vue-router
vue2:npm install vue-router@3

接口访问
http://localhost:8080/swagger-ui/index.html

后端分离
跨域 后端用注解@CrossOrigin
@RequestBody ：前端传值接受json格式

可以单独写一个工具包封装好方法:utils下面的request.js在下面写入统一返回的一个请求方法
promise用法
import axios from "axios";

//promise 表示承诺，将来我会执行什么什么，里面有一个方法，方法有两个参数
//resolve解决时一个方法用来返回数据，将来可以通过 then 来获取
//reject 拒绝将来可以通过 catch 获取数据
// axios.post(url, data)就是一个promise
function request(url, data) {
    return new Promise((resolve, reject) => {
        axios.post("http://localhost:9000/" + url, data)
            .then((response) => {
                if (response.data.success) {
                    resolve(response.data.data);
                } else {
                    alert(response.data.message);
                    reject()
                }
            })
            .catch((error) => {
                alert('网络故障' + error);
                reject()
            });
    })

}

export default request;

同步用法

    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // request("login", this.ruleForm)这个方法返回一个promise
          //对于一个promise 获取它的返回数据有两种，一种时异步
          //1,异步then里面方法什么时候执行取决于请求数据什么时候收到，而且程序会继续执行
          // request("login", this.ruleForm).then(data)=>{
          // console.info(data)
          // }2,同步 async await
          //async 加在方法里面，会强制带await 的promise 执行完成才能继续往后执行
          let data = await request("login", this.ruleForm)
          localStorage.token = data;
          this.$router.push("/index/user")//跳转到指定路由
        } else {
          this.$message('请认真填写表单');
          return false;
        }
      });
    },

vue: 安装别的项目过来 之前导入依赖
1.先配置镜像
输入 npm get registry：查看当前镜像源为https://registry.npmjs.org/（npm默认镜
输入npm config set registry xxx(镜像源地址)。
以国内淘宝镜像为例:npm config set registry https://registry.npm.taobao.org
 npm install
 npm run dev

路由传参
1.在vue页面上写好跳转路由地址的时候使用路由的路径传参
this.$router.push("/index/detail/"+ id)
2.在route包下面的index.js里面添加

const router = new VueRouter({
    routes: [{
        path: "/index", component: SystemIndex, children: [//子路由
             
            {path: "detail/:id", component:DetailOwner},
        ]
    }, {
        path: "/login", component: UserLogin
    },{
        path: "/", redirect: '/index'
    }
    ]
})
export default router;

2.
path: "detail/:id", component:DetailOwner :
在路径后面添加冒号之后把参数变量名放在后面
3.
 let data = await request(`owner/findById?id=${this.$route.params.id}`, {}, "get")
使用this.$route.params.参数名
来接收参数

组件静态传参：
1.
:user-id="userId"
2.两种方式接受参数
  props:["userId"],
  props: {userId: {type: Number, default: 0}},

组件动态传参：
 1.
everyBus.$emit("share",obj.id,obj.parentId);
2.
created() {//组件传值动态获取参数 五颗星重点
    everyBus.$on("share",(o1,o2)=>{
      this.id1 = o1;
      this.parentId1 = o2
      this.loadData();
    })

  },

页面局部刷新使用动态组件的点击事件实现：如aPP页面
  <button @click="componentsName='HelloWorld'">HelloWorld</button>
  <button @click="componentsName='UserInfo'">UserInfo</button>
  <Component :is="componentsName"></Component>

export default {
  name: 'App',
  components: {
    HelloWorld,
    UserInfo
  }

其中"componentsName='HelloWorld'"的Helloword和组件名字必须一致

v-for用法
如组件使用
<service-card-main v-for="l in serviceList" :list="l" :key="l.name"></service-card-main>
 另外一个组件接收值：
props:["list"]
使用：
<div v-for="l in list.list" class="foot-f" :key="l.name">
      <p>{{l.icon}}</p>
      <h5>{{l.name}}</h5>
  </div>