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


Posted in Vue.js onFebruary 22, 2021

一,安装

提示: 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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue在图片上传的时候压缩图片
Nov 18 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 #Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 #Vue.js
Vue实现todo应用的示例
Feb 20 #Vue.js
基于vue的video播放器的实现示例
Feb 19 #Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
You might like
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
PHP函数常用用法小结
2010/02/08 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python的pygame安装教程详解
2020/02/10 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
《桥》教学反思
2014/04/09 职场文书
优秀教师个人总结
2015/02/11 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android