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

一,安装

提示: VUE3.0目前还没有官方的翻译文档。但是已经有人翻译了。得到了尤雨溪大佬的点赞，这里附上网址https://v3.cn.vuejs.org/

1.安装 cli

因为要使用 vue3 必须要求 cli 的版本比较高,必须要高于 4.5.X
所以没有安装的 cli 的就直接安装最新版就行了,已有的可以升级或者卸载后重新安装
最好是全局安装

				?

									//全局安装

									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

2.创建项目

既然我们都使用了 VUE3,不妨来试试最新的 vite 构建工具。
没准可以给你打开新世界的大门

				?

									//新建项目

									npm init vite-app asiterVue3

									//进入目录

									cd asiterVue3

									//安装依赖

									npm install

									//运行

									npm run dev

3. 查看项目

VUE3.0 相比 VUE2.0 来说可以说的是简洁了不少
而且 main.js 改动也是非常明显

				?

									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/>",

									});

其次我们目光放到 App.vue 上,最明显的事情就是 template 节点内不是只能存在一个根节点了。

//就是这个地方虽然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>

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?file=/index.html

篇幅问题我只粘贴主要部分

				?

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