个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 30 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章用vite搭建vue3应用的实现方法由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

一,安装

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

1.安装 cli

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//全局安装
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 构建工具。 没准可以给你打开新世界的大门 。

?
1
2
3
4
5
6
7
8
// 新建项目
npm init vite-app asiterVue3
// 进入目录
cd asiterVue3
// 安装依赖
npm install
// 运行
npm run dev

3. 查看项目 。

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

VUE3.0 。

?
1
2
3
4
5
import { createApp } from "vue" ;
import App from "./App.vue" ;
import "./index.css" ;
 
createApp(App).mount( "#app" );

VUE2.0 。

?
1
2
3
4
5
6
7
8
9
import Vue from "vue" ;
import App from "./App" ;
Vue.config.productionTip = false ;
 
new Vue({
  el: "#app" ,
  components: { App },
  template: "<App/>" ,
});

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

  1. //就是这个地方 虽然Vetur插件会报错 但是不影响使用 
  2. <template> 
  3.  <img alt="Vue logo" src="./assets/logo.png" /> 
  4.  <HelloWorld msg="Hello Vue 3.0 + Vite" /> 
  5. </template> 
  6. <script> 
  7. import HelloWorld from './components/HelloWorld.vue' 
  8. export default { 
  9.  name: 'App', 
  10.  components: { 
  11.   HelloWorld 
  12.  } 
  13. } 
  14. </script> 

4.添加路由 Vue-Router

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

?
1
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 。

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 文件 在文件里面添加以下内容 。

?
1
2
3
4
5
6
7
8
9
10
11
import { createRouter, createWebHashHistory } from "vue-router" ;
 
export default createRouter({
  history: createWebHashHistory(),
  routes: [
   {
    path: "/weclome" ,
    component: () => import( "../views/HelloWorld.vue" ),
   },
  ],
});

同时在 src 下新建一个 views 的文件夹,添加一个 HelloWorld.vue 的文件 加入以下代码,因为是初见。我就不尝试其他的 API 了,先跑个效果 。

?
1
2
3
<template>
  <div>helloWord!weclome to Vue3.0.Asiter</div>
</template>

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

?
1
2
3
4
5
6
7
8
9
10
<template>
  <router-view></router-view>
</template>
 
<script>
export default {
  name: "App" ,
  components: {},
};
</script>

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

?
1
2
3
4
5
6
7
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 。

?
1
npm i vuex@next -S

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

?
1
2
3
4
5
6
7
8
9
import { createStore } from "vuex" ;
 
export const store = createStore({
  state() {
   return {
    count: 1,
   };
  },
});

和 router 一样,对比 VUE2 来说也是改了写法,先从 vuex 内用 createStore 创建一个实例 然后我们也照着写一个 。

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

?
1
2
3
4
5
6
7
8
9
10
11
import { createStore } from "vuex" ;
 
export const store = createStore({
  state() {
   return {
    author: "Asiter" ,
    describe: "一个贴膜的少年" ,
   };
  },
});

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

?
1
2
3
4
5
6
7
8
9
10
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 这个文件 改造一下 。

?
1
2
3
4
5
6
7
8
9
10
11
12
<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 的使用。(最近原神玩的肝有点痛) 。

到此这篇关于用vite搭建vue3应用的实现方法的文章就介绍到这了,更多相关vite搭建vue3内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://blog.csdn.net/qq_35093176/article/details/109078524 。

最后此篇关于用vite搭建vue3应用的实现方法的文章就讲到这里了,如果你想了解更多关于用vite搭建vue3应用的实现方法的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

30 4 0
文章推荐： k8s node节点重新加入master集群的实现
文章推荐： js实现简单图片拖拽效果
文章推荐： 详解Vite的新体验
文章推荐： Redis中缓存穿透/击穿/雪崩问题和解决方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com