服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue.js - 用vite搭建vue3应用的实现方法

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

2022-01-22 18:40Asiter vue.js

这篇文章主要介绍了用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

    • 延伸 · 阅读

    精彩推荐
    • vue.js梳理一下vue中的生命周期

      梳理一下vue中的生命周期

      看过很多人讲vue的生命周期，但总是被绕的云里雾里，尤其是自学的同学，可能js的基础也不是太牢固，听起来更是吃力，那我就已个人之浅见，以大白话...

      CRMEB技术团队7992021-12-22
    • vue.jsVue项目中实现带参跳转功能

      Vue项目中实现带参跳转功能

      最近做了一个手机端系统，其中遇到了父页面需要携带参数跳转至子页面的问题，现已解决，下面分享一下实现过程，感兴趣的朋友一起看看吧...

      YiluRen丶4302022-03-03
    • vue.jsVue2.x-使用防抖以及节流的示例

      Vue2.x-使用防抖以及节流的示例

      这篇文章主要介绍了Vue2.x-使用防抖以及节流的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...

      Kyara6372022-01-25
    • vue.jsVue中引入svg图标的两种方式

      Vue中引入svg图标的两种方式

      这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的...

      十里不故梦10222021-12-31
    • vue.js用vite搭建vue3应用的实现方法

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

      这篇文章主要介绍了用vite搭建vue3应用的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下...

      Asiter7912022-01-22
    • vue.jsVue2.x 项目性能优化之代码优化的实现

      Vue2.x 项目性能优化之代码优化的实现

      这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋...

      优小U9632022-02-21
    • vue.js详解vue 表单绑定与组件

      详解vue 表单绑定与组件

      这篇文章主要介绍了vue 表单绑定与组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...

      Latteitcjz6432022-02-12
    • vue.jsVue多选列表组件深入详解

      Vue多选列表组件深入详解

      这篇文章主要介绍了Vue多选列表组件深入详解，这个是vue的基本组件，有需要的同学可以研究下...

      yukiwu6752022-01-25
    最近更新
    编辑推荐
    阅读排行
    热门标签
    路由守卫 　 sessionStorage 　 V3Popup 　 自动构建 　 Vue+scss 　 白天 　 夜间 　 antdv 　 区间选择 　 css-loader 　 消息提示弹框 　 文字抖动 　 vue-quill-editor 　 路径太长 　 数据劫持 　 activated 　 图片懒加载 　 二级套嵌 　 滚动事件 　 双盒子定位 　 状态管理工具 　 边界线 　 vue-count-to 　 注册路由 　 drectives 　 Vue.extend 　 树状表格 　 element ui 　 树形表格 　 合并表格 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图