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. layui+tp5表单提交回调

    layui 前段页面form表单提交数据如果监听表单提交 ,tp5后台操作完成后使用 $this->success('success'); 后前端的页面不会出现layui的layer弹窗提示su ...

  2. 前端传递的json格式与SpringMVC接收实体类的对应关系

    这篇文章主要是帮助刚刚入行的猿猿尽快适应Restful风格的搬砖生活 @RequestBody注解 基本介绍:@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数 ...

  3. 多测师_肖sir _python 练习题（一）100以内奇数，偶数，质数胡计算

    (1)求1~100的和方法: 方法一:print(sum(range(1,101))) 方法二: sum1 = 0 i = 1 while True: sum1 = sum1 + i if i == ...

  4. MeteoInfoLab脚本示例：TRMM 2A12 HDF数据

    TRMM 2A12 HDF数据是卫星观测的SWATH数据(轨道数据),比格点数据处理起来要麻烦一些.数据的经纬度保存在geolocation变量中,需要先将经纬度数据读出来(均为2维数组),然后读取云 ...

  5. Git的介绍以及安装

    Git的简单介绍 Git是一个开源的分布式版本控制系统,可以有效,高速的处理从很小到非常大的项目管理,GIT是为了帮助linux内核开发而开发的一个开放源码的版本控制软件 Git的安装 Linux平台 ...

  6. Pythonic【15个代码示例】

    Python由于语言的简洁性,让我们以人类思考的方式来写代码,新手更容易上手,老鸟更爱不释手. 要写出 Pythonic(优雅的.地道的.整洁的)代码,还要平时多观察那些大牛代码,Github 上有很 ...

  7. go 接口实现

    package main import ( "fmt" ) // 定义接口 type Beahavior interface { Run() string Eat(thing st ...

  8. minianaconda3安装

    wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh chmod +x Miniconda3-lates ...

  9. FreeRTOS链表实现

    直接上源码分析 void vListInitialise( List_t * const pxList ){ pxList->pxIndex = ( ListItem_t * ) &( ...

  10. linux上安装mitmproxy

    一.去git上下载安装包 下载mitmproxy二进制安装包:https://github.com/mitmproxy/mitmproxy/releases/ 二.安装 #上传 rz 安装包的本地路径 ...