vue2 怎么用vite_vue3vite简介
vue3&vite
放弃webpack,使用vite安装vue3.0
这个是尤大开发的新工具,目的是以后替代webpack,原理是利用浏览器现在已经支持es6的import了,遇到import会发送一个http请求去加载文件,vite拦截这些请求,做一些预编译,省去了webpack冗长打包的时间,提升开发体验npm install -g create-vite-app
create-vite-app
cd vue3-vite
npm install
npm run dev
# 或者使用yarn
yarn add -g create-vite-app
yarn create vite-app
yarn
yarn dev
引入typescript# 安装 typescript
yarn add typescript -D
初始化tsconfig.jsonnpx tsc --init
将main.js修改为main.ts,同时将index.html里面的引用也修改为main.ts,
然后在script 里添加 lang="ts"
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: { HelloWorld }
}
修改完之后,重启就可以访问项目了。虽然这样配置是可以了,但是打开main.ts会发现import App from App.vue会报错,这是因为现在ts还没有识别vue文件,需要进行下面的配置:
在项目根目录添加shim.d.ts文件,添加以下内容declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent;
export default component;
}
安装vue-routeryarn add vue-router@4.0
这样可以选择最新的vue-router 4.0.0的测试版本,这里更新到beta.13
配置vue-router
在项目src目录下面新建router目录,然后添加index.ts文件,在文件中添加以下内容import { createRouter, createWebHashHistory } from "vue-router";
// 在 Vue-router新版本中,需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
// 路由地址
routes: [],
});
安装vuex
同上yarn add vuex@4.0
目前只能选择最新测试版
在项目src目录下面新建store目录,并添加index.ts文件,文件中添加以下内容import { createStore } from "vuex";
interface State {
userName: string;
}
export default createStore({
state: { userName: "xiuluo" },
});
main.ts中引入vuex和vue-routerimport { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
import vuex from './store/index'
const app = createApp(App)
app.use(router)
app.use(vuex)
app.mount('#app')
vuex
使用vuex
效果
vue2 怎么用vite_vue3vite简介相关推荐
- Vue2自定义指令directives简介
我们在学习vue的时候会学习多个指令,如v-show,v-text,v-pre等等.但如果我们想要完成一些现有指令无法完成的操作的时候,就应该使用自定义指令来实现我们想要的操作.所以现在我们就来简单讲 ...
- 【Vue3】vue3全解
文章目录 一.vue3 简介 二.vite基本使用 三.创建vue应用 四.选项API和组合API (一)选项API (二)组合API 五.组合API (一)setup函数 (二)生命周期 1.vue ...
- Vue2源码解析 虚拟dom简介
目录 1 什么是虚拟dom 2 为什么要引入虚拟dom 3 vue中的虚拟dom 4 总结 1 什么是虚拟dom 通过描述状态和dom之间的映射关系是怎样的,就可以将状态渲染成视图. 状态可 ...
- Vue2官网使用及简介
官网地址 中文官网地址:https://cn.vuejs.org/ 英文官网地址:https://vuejs.org/ 文档使用 Vue定义 一套用户构建用户界面的渐进式JavaScript ...
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
- vue2.0读书笔记2-进阶
一.深入响应式原理 二.过渡效果 三.过渡状态 四.Render函数 五.自定义指令 六.混合 七.插件 八.单文件组件 九.生产环境 十.路由 vue-router: http://router.v ...
- Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述
简介 这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限 ...
- Node+Express+Vue2.x+Mongodb结合muse-ui、less、rem等实现简易博客
源码地址:https://github.com/XieTongXue/how-to/node-blog 请先阅读项目中的readme文件,按步骤启动,避免运行出错. 写此demo的缘由 最近在看学习e ...
- 记一次 Vue2 迁移 Vue3 的实践总结
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
最新文章
- 网络:url?uri?
- vbs病毒分析神技——使用VS2017调试vbs脚本
- css grid随页面大小_你现在可以玩下这 5 个 CSS 新功能
- SiteMesh详解
- Hexo博客中添加Live 2D模型
- 关于卸载驱动精灵后蓝屏的办法
- 打印日历程序php,C++实现的一个打印日历程序
- android /data/system/dropbox,Android dropbox日志浅谈
- 从一个表格render方法问题看React函数组件的更新
- 不知不觉openGL已经到4.5了
- 看看美国人怎么做SEO
- while,do while,for 循环语句总结大全,一步到位
- 手机如何将Word文档转换为PDF扫描文件
- 工程伦理 第九章习题 答案
- 简述计算机系统集成的特点,谈计算机系统集成的特点与发展
- 解决ubuntu14.04下,火狐浏览器无法访问csdn官网问题
- 汽车CAN总线硬件电路原理
- ip地址测试软件,服务器ip链接测试软件
- IMEI码常识及辨别
- 中国分光计市场现状研究分析与发展前景预测报告(2022)
热门文章
- 【.Net core】EFCore——Code First生成数据库与表
- 以个人身份加入.NET基金会
- 理解ASP.NET Core中的中间件
- 在C#中使用Irony实现SQL语句的解析
- C# .net 中 Timeout 的处理及遇到的问题
- EFCore Lazy Loading + Inheritance = 干净的数据表 (一)
- 华为云.NET Core支持情况调查
- Jimu : .Net Core 分布式微服务框架介绍
- 浅谈开发模式及架构发展
- .Net开源微型ORM框架测评