用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 改动也是非常明显
VUE3.0
import { createApp } from "vue"; import App from "./App.vue"; import "./index.css"; createApp(App).mount("#app");
VUE2.0
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>
启动服务器
打开控制台
重新在地址栏输入http://192.168.1.233:3000/#/weclome
看到了打印信息
这个男人是谁:>> Asiter
他怎么样:>> 一个贴膜的少年
6.总结
初期项目就到这里了,vue3 还是有很多很好玩的地方的。下次我们就来看看 VUE3 的亮点 Composition API 的使用。(最近原神玩的肝有点痛)
到此这篇关于用vite搭建vue3应用的实现方法的文章就介绍到这了,更多相关vite搭建vue3内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-22- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 下面小编就为大家带来一篇Angularjs---项目搭建图文教程。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-25
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要介绍了Linux环境下nginx搭建简易图片服务器,需要的朋友可以参考下...2016-01-27
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要给大家介绍了关于node.js利用express自动搭建项目的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-09
- 这篇文章主要介绍了前端自动化开发之Node.js环境搭建的相关资料,文中介绍的非常详细,对大家学习或者使用node.js具有一定的参考价值,需要的朋友们下面来一起看看吧。...2017-04-03
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 这篇文章主要介绍了phpstudy2020搭建站点的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要给大家介绍了关于如何使用Vim搭建Lua开发环境的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-30
- 这篇文章主要介绍了快速使用Bootstrap搭建传送带的相关资料,非常具有参考借鉴价值,需要的朋友可以参考下...2016-05-09
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20