用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自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue详细的入门笔记
May 10 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
长波有什么东西
2021/03/01 无线电
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python如何计算语句执行时间
2019/11/22 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
先进员工事迹材料
2014/12/20 职场文书
求职自我推荐信
2015/03/24 职场文书
采购部年度工作总结
2015/08/13 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python