用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="/UploadFiles/2021-04-02/logo.png">

4.添加路由 Vue-Router


由于我们用的是 VUE3.0,所以我们VUE-ROUTER也要对应版本为 4.X.


npm install vue-router@next -S



附件:


npm install vue-router 会下到 3.0 的版本

所以我们需要 npm install vue-router@next -S 进行安装

这里附上 github 地址https://github.com/vuejs/vue-router-next/releases

截至到今天 2020 年 10 月 14 日,版本已经是 v4.0.0-beta.13
安装好后,不会用怎么办。让我们来看看官方的例子先

不会用,我直接 CV 一波还不行咩
附件:

官方例子地址

https://codesandbox.io/s/vue-router-4-reproduction-hb9lh"htmlcode">

<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>




这些就是官方例子,我们发现路由的创建有点不同了。

vue2.0 里面是用 mode 来控制路由模式的参数

但是在 vue3 里面通过 createRouter 来创建路由实例

history 属性来当控制路由模式的参数


顾名思义

createWebHistory 方法返回的是 History 模式

createWebHashHistory 方法返回的是 Hash 模式
所以我们尝试添加进去

先在 src 目录下新建一个 router 文件夹,然后在文件夹下面添加一个 index.js 文件

在文件里面添加以下内容


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

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




同时在 src 下新建一个 views 的文件夹,添加一个 HelloWorld.vue 的文件

加入以下代码,因为是初见。我就不尝试其他的 API 了,先跑个效果


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



然后改造一下我们的 App.vue


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

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




最后修改一下我们的最重要的 main.js 文件配置好 router


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



启动项目,在地址栏输入http://192.168.1.233:3000/#/weclome

发现得到我们想要的东西了
5.添加状态管理 Vuex


又是由于我们用的是 VUE3.0,所以我们Vuex也要对应支持的版本

截至到今天.已经更新到了 4.0.0-beta.4
附件:

附上 github 地址https://github.com/vuejs/vuex/releases


npm i vuex@next -S


然后接着看官方的案例https://github.com/vuejs/vuex/tree/v4.0.0-beta.4


import { createStore } from "vuex";

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




和 router 一样,对比 VUE2 来说也是改了写法,先从 vuex 内用 createStore 创建一个实例

然后我们也照着写一个
在 src 目录下新建一个 store 目录然后添加一个 index.js 文件.写入以下内容


import { createStore } from "vuex";

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




回到我们的 main.js,修改一下。添加 vuex


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");
 



回到一开始我们 views 下的 HelloWorld.vue 这个文件

改造一下


<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>



启动服务器

打开控制台

重新在地址栏输入http://192.168.1.233:3000/#/weclome

看到了打印信息



这个男人是谁: Asiter

他怎么样: 一个贴膜的少年

6.总结


初期项目就到这里了,vue3 还是有很多很好玩的地方的。下次我们就来看看 VUE3 的亮点 Composition API 的使用。(最近原神玩的肝有点痛)