32.Vue3造轮子-项目回顾.md

项目回顾

1、使用脚手架搭建

1. 新建文件夹，命名为Vue3，安装vite

   yarn global add create-vite-app@1.18.0

2. 创建项目目录

   cva gulu-ui
   

3. 进入目录，并运行

   cd gulu-ui
   yarn
   yarn dev

4. 用 VScode 或者 webStrome 打开目录，准备写代码

小总结：

Vue2 和 Vue3 的区别

1. 90% 的写法完全一致，除了以下几点
2. Vue3 的 templete 支持多个根标签，vue2 不支持
3. Vue3 有 createApp()，而 Vue2 的是 new Vue()
4. createApp(组件)，new Vue({templent,render})

2、安装Vue-router路由

1. 引入Vue Router 4

   yarn add vue-router@4.0.14

2. 初始化Vue Router

   1. 将main.js改为main.ts
   2. 注意index.html中也需要修改为main.ts

   <script type="module" src="/src/main.ts"></script>

   main.ts代码如下

   import {createApp} from 'vue';
   import App from './App.vue';
   import './index.css';
   import {createWebHashHistory, createRouter} from 'vue-router';
   import Frank from './components/Frank.vue';
   import Frank2 from './components/Frank2.vue';
   
   const history = createWebHashHistory();
   const router = createRouter(
     {
       history: history,
       routes: [
         {path: '/', component: Frank},
         {path: '/xxx', component: Frank2}
       ]
     }
   );
   
   const app = createApp(App);
   app.use(router);
   app.mount('#app');

   App.vue代码如下

   <template>
     <div>导航栏</div>
     <router-link to="/">frank</router-link>|
     <router-link to="/xxx">frank2</router-link>
     <hr/>
     <router-view/>
   </template>
   
   <script>
   export default {
     name: 'App',
   }
   </script>

   在components下新建Frank2.vue，代码如下

   <template>
     <div>
       Frank2
     </div>
   </template>

   效果如下：