vue基础配置

创建项目

1.vite构建

npm create vite

1.vue路由配置

安装路由器vue-router报错

常见问题：注意vue版本---与vue-router对应关系

安装指令:

@符为安装指定版本，没有@默认安装最新版

npm install --save vue-router@3

vue2项目中要使用vue-router3版本，要用vuex3 的版本

vue3项目中要使用vue-router4版本

1.配置路由规则，使用路由插件，然后暴露路由

引入vue和vue路由
import Vue from "vue";
import VueRouter from "vue-router";

使用路由插件
Vue.use(VueRouter)

配置路由页面
const routes=[
  {
    path:"/shop",
    name:'shop',
    component:shop
  }
]

暴露路由
const router=new VueRouter{
  routes
}

exporttdefault router

2.使用路由 在App.vue中使用路由视图标签即可根据路由规则跳转页面

<div id="root">
<router-view></router-view>
<div>

2.vue组件使用

1.首先把需要的组件先导出去(shop.vue)，注意：name：后面跟的是字符串（要用引号）

<script>
export default{
  name:"shop"
}
</script>

2.在App.vue中引入，注册使用

<template>

<divid="app">
3.使用组件
<shop></shop>
</div>
</template>

<script>

1.引入组件
import shop from "./components/shop.vue";

export default{
name: "App"
components:{
  2.注册组件
  shop
}

</script>

3.vue文件的基本结构

<template>
  <div class="bookshow" v-for="book in books" :key="book.anthur">
    <h1>作者：{{ book.anthur }}</h1>
    <span>书名：{{ book.name }}</span>
    <br />
    <span>数量:{{ book.num }}</span>
  </div>
  <span>总量：{{ booktotal }}</span>
</template>

<script>
export default {

  data() {
    return {
      books: [
        {
          anthur: "陶十一",
          name: "aa",
          num: 50,
        },
        {
          anthur: "陶陶陶",
          name: "bb",
          num: 10,
        },
      ],
    };
  },

  computed: {
   
    // total() {
    //   let sum = 0;
    //   this.books.forEach(function (item) {
    //     sum += item.num;
    //   });
    //   return sum;
    // },
    booktotal: function () {
      let sum = 0;
      this.books.forEach(function (item) {
        sum += item.num;
      });
      return sum;
    },
  },
};
</script>

<style>
</style>

4.在html文件中使用vue

在html页面中使用组件名字需要用短横线分隔

<div class="home">
<My-Header/>
</div>

1.引入vue.js

<script src="./vue.js"></script>

2.设置根节点

  <div id="root">
        <span>总量：{{ booktotal }}</span>
    </div>

3.初始化Vue实例

    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    
                };
            },

            computed: {
                
            }

        })
    </script>