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

一,安装

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

1.安装 cli

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

//全局安装npm install -g @vue/cli# ORyarn global add @vue/cli//全局卸载npm uninstall -g vue-cli# ORyarn global remove vue-cli//升级clinpm update -g @vue/cli# ORyarn 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内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vite+Electron快速构建VUE3桌面应用的实现
• 如何为老vue项目添加vite支持详解
• 基于Vite2.x的Vue 3.x项目的搭建实现
• vite2.0+vue3移动端项目实战详解
• Vue3和Vite不得不说的那些事

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！