Vue3初始化

Vue3-UI初始化

一、Vue3与Vue2的区别

Vue3与Vue2写法90%一致

• Vue3
  template可以存在多个标签
  实例：createApp()，createApp(组件)
• Vue2
  template只能由一个标签嵌套多个标签
  实例：new Vue()，new Vue({template,render})

注意：引入组件必须得加后缀，否则不生效

二、全局安装Vite

安装： yarn global add create-vite-app
创建目录：cva xxx 或 create-vite-app xxx //xxx是文件名
//后续按照运行命令
启动服务：yarn dev

三、安装router

router所有版本号：npm info vue-router versions
安装：yarn add vue-router

四、使用router

const app = createApp(App);
app.use(router);

<router-view /> //路由展示地方
<router-link to="/xxx">yyy</router-link> //点击切换成/xxx路由

五、使用VueRouter

//main.ts
import Min from './components/min.vue';
import {createWebHashHistory, createRouter} from 'vue-router';

const history = createWebHashHistory();
const router = createRouter({
  history: history,
  routes: [
    {path: '/', component: Min}
  ]
});
const app = createApp(App);
app.use(router);
app.mount('#app');

useRouter和Appmount尽量不要写反可能会有问题