1、全局安装vite：npm install create-vite-app -g

2、创建项目：npx create-vite-app project-name

3、cd project-name -> npm install -> npm run dev

4、至此项目搭建完毕， 浏览器访问：http://localhost:3000/

6、npm install vue-router@next  -S 安装路由，并且配置路由文件  history: createWebHashHistory() hash 模式  history:createWebHistory() 正常模式

7、npm install vuex@next -S 安装store,并配置文件

8、npm install sass -D 安装sass

9、main.js

github例子：https://github.com/ytg123/Vue3.0--Element

欢迎大家一起学习！

vite 搭建Vue3.0项目的更多相关文章

  1. 从零搭建vue3.0项目架构（附带代码、步骤详解）

    前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完 ...

  2. vite创建vue3+ts项目流程

    vite+vue3+typescript搭建项目过程   vite和vue3.0都出来一段时间了,尝试一下搭vite+vue3+ts的项目 相关资料网址 vue3.0官网:https://v3.vue ...

  3. vue2.0与vue3.0项目创建

    脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...

  4. 从零开始搭建Vue2.0项目(一)之快速开始

    从零开始搭建Vue2.0项目(一)之项目快速开始 前言 该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader.确保还阅读vue-loader的文档,了解常见的工作流程配 ...

  5. Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别

    这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...

  6. vue-cli脚手架搭建vue3.0+typescripe项目

    新开个项目,小项目,小.顺手就用vue吧,vue3出来也几个月了,直接上了吧.一年多没用vue了,用的时候也得再熟悉,不如直接干3了! vue官方推荐使用的脚手架是 Vite 和 vue-cli ,延 ...

  7. Vue3.0项目快速搭建

    安装安装vue-cli npm install -g @vue/cli # 或者 yarn global add @vue/cli 创建项目 vue create hello-world 至此项目搭建 ...

  8. 新建vue3.0 项目—步骤详细介绍

    一.环境搭建 1.安装node环境(版本≥ 8.9) 2.安装vue-cli3.0 npm install @vue/cli -g 此处省略安装步骤截图了,相信各位都已装好了,下图为查看版本结果: 二 ...

  9. 搭建vue-cli4.0项目

      ① Vue CLI的包名称由 vue-cli 改成了 @vue/cli. 如果已经全局安装了旧版本的 vue-cli(1.x或2.x), 你需要先通过 npm uninstall vue-cli ...

随机推荐

  1. 架构师根本不会被语言限制住，php照样可以用领域驱动设计DDD四层架构！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你在通往架构师的路上吗? 程序员这个行业就像是在不断的打怪升级,突破每一阶段的瓶颈期 ...

  2. Oracle和MySql之间SQL区别（等效转换以及需要注意的问题）

    本篇博文是Oracle和MySQL之间的等效SQL转换和不同,目前市面上没有转换两种SQL的工具,小编觉得以后也不一定会有,于是在业余时间整理了一下,如果有什么错误之处请留言告知,小编也是刚入门的小白 ...

  3. Avoid mutating a prop directly since the value will be overwritten whenever the parent component re

    子组件修改父组件的值踩坑 Vue1.0升级至2.0之后,直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据. 我们都知道在vue中,父组件传入子组件的变量是存放在props属性 ...

  4. 多测师讲解selenium _enter弹框_高级讲师肖sir

    enter # from selenium import webdriver# from time import sleep# drvier=webdriver.Chrome()# url='file ...

  5. ip地址和网络端口总结

    ip地址 ip地址默认指ipv4地址,用4个字节表示,转换为点分10进制,可以表达范围0.0.0.0到255.255.255.255的地址,大约为42.95亿个地址.互联网编号分配机构(IANA,In ...

  6. ansible用get_url模块在受控机下载文件(ansible2.9.5)

    一,ansible的get_url模块用途: get_url模块可以在受控机下载文件 可以理解成从受控端执行wget 下载的url支持:http | https | ftp   三种协议 说明:刘宏缔 ...

  7. 《Kafka笔记》3、Kafka高级API

    目录 1 Kafka高级API特性 1.1 Offset的自动控制 1.1.1 消费者offset初始策略 1.1.2 消费者offset自动提交策略 1.2 Acks & Retries(应 ...

  8. python 操作conf配置文件方法

    参考文章链接:https://blog.csdn.net/qq_23587541/article/details/85019610

  9. vue知识点13

    知识点归纳整理如下: 组件 component     1.页面中的一部分,可以复用, 本质上是一个拥有预定义选项的一个 Vue 实例         2.使用         1)定义        ...

  10. JMeter实战(二) 运行原理

    运行原理 如果不用工具,要做 100 并发的压力测试,得想办法组织 100 个人,每个人操作1台电脑,一声令下,100 个人同时点击,对系统造成 100 并发.现实中,很难找 100 个人和 100 ...