用vite搭建vue3应用的实现方法

//全局安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
//全局卸载
npm uninstall -g vue-cli
# OR
yarn global remove vue-cli
//升级cli
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
//查看本机cli版本
vue --version

//新建项目
npm init vite-app asiterVue3
//进入目录
cd asiterVue3
//安装依赖
npm install
//运行
npm run dev

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";

createApp(App).mount("#app");

import Vue from "vue";
import App from "./App";
Vue.config.productionTip = false;

new Vue({
 el: "#app",
 components: { App },
 template: "<App/>",
});

//就是这个地方 虽然Vetur插件会报错 但是不影响使用
<template>
 <img alt="Vue logo" src="./assets/logo.png" />
 <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
 name: 'App',
 components: {
  HelloWorld
 }
}
</script>

npm install vue-router@next -S

<script>
   const { createRouter, createWebHistory, createWebHashHistory } = VueRouter
   const { createApp } = Vue

   const Home = {
    template: `<div>home</div>`,
   }

   const Foo = { template: '<div>foo</div>' }
   const Bar = { template: '<div>bar</div>' }

   const router = createRouter({
    history: createWebHistory(),
    routes: [
     { path: '/', component: Home },
     { path: '/foo', component: Foo },
     { path: '/bar', component: Bar },
    ],
   })

   const app = createApp({})
   app.use(router)

   window.vm = app.mount('#app')
</script>

import { createRouter, createWebHashHistory } from "vue-router";

export default createRouter({
 history: createWebHashHistory(),
 routes: [
  {
   path: "/weclome",
   component: () => import("../views/HelloWorld.vue"),
  },
 ],
});

<template>
 <div>helloWord!weclome to Vue3.0.Asiter</div>
</template>

<template>
 <router-view></router-view>
</template>

<script>
export default {
 name: "App",
 components: {},
};
</script>

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import router from "./route";
createApp(App)
 .use(router)
 .mount("#app");

npm i vuex@next -S

import { createStore } from "vuex";

export const store = createStore({
 state() {
  return {
   count: 1,
  };
 },
});

import { createStore } from "vuex";

export const store = createStore({
 state() {
  return {
   author: "Asiter",
   describe: "一个贴膜的少年",
  };
 },
});
 

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import router from "./route";
import { store } from "./store";
createApp(App)
 .use(router)
 .use(store)
 .mount("#app");
 

<template>
 <div>helloWord!weclome to Vue3.0.Asiter</div>
</template>

<script>
export default {
 mounted() {
  console.log("这个男人是谁:>> ", this.$store.state.author);
  console.log("他怎么样:>> ", this.$store.state.describe);
 },
};
</script>