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. linux的bootmem内存管理

    内核刚开始启动的时候如果一步到位写一个很完善的内存管理系统是相当麻烦的.所以linux先建立了一个非常简单的临时内存管理系统bootmem,有了这个bootmem就可以做简单的内存分配/释放操作,在b ...

  2. 多测师讲解selenium_alert弹框定位_高级讲师肖sir

    from selenium import webdriverfrom time import sleepdrvier=webdriver.Chrome()url=r'F:\dcs\DCS课程安排\se ...

  3. day39 Pyhton 并发编程02 后

    一.开启子进程的另一种方式 import os from multiprocessing import Process class MyProcess(Process): def __init__(s ...

  4. 测试-python相关

    python基础 一行代码实现1~100累加,不使用for循环 方式一: sum(range(1,101)) 方式二: 1 from functools import reduce 2 reduce( ...

  5. nginx安全：用limit_req_zone/limit_req限制连接速率(流量控制/限流)

    一,limit_req的用途: 1,官方文档地址: http://nginx.org/en/docs/http/ngx_http_limit_req_module.html 2,用途: 限制用户在给定 ...

  6. requests-html添加header

    from requests_html import HTMLSession session = HTMLSession() headers = { "User-Agent":&qu ...

  7. gti 常用命令

    git add 文件 : 追踪指定文件git add . :追踪所有的文件git commit -m "注释" : 提交报本地仓库git push : 推送远程仓库git pull ...

  8. JavaSE学习笔记05面向对象编程01

    面向对象编程01 java的核心思想就是OOP 面向过程&面向对象 面向过程思想: 步骤清晰简单,第一步做什么,第二步做什么...... 面向过程适合处理一些较为简单的问题 面向对象思想: 物 ...

  9. Linux命令之命令别名

    对于经常执行的较长的命令,可以将其定义成较短的别名,以方便执行 显示当前shell进程所有可用的命令别名 [04:33:43 root@C8[ ~]#alias alias cp='cp -i' al ...

  10. Spring 事务失效

    隔离级别 在 TransactionDefinition.java 接口中,定义了"四种"的隔离级别枚举: /** * [Spring 独有]使用后端数据库默认的隔离级别 * * ...