目录 一:npm构建 二:更改http://localhost:3000/到8080与Network路由访问 三:配置vite别名(npm install @types/node --save-dev) 四 :路由(npm install vue-router@4) 五:vuex(npm insta
首先插件添加:Live Server、Vue - Official、Vue VSCode Snippets、别名路径跳转 官网:Vite | 下一代的前端工具链 (vitejs.dev) 1.创建一个文件夹VueApp,运行cmd转到该目录下,执行命令:npm create vite@latest
import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),],resolve:{alias:{'@':fileURLToPath(newURL('./src',import.meta.url))}},css:{preprocessorOptions:{less:{additional...
npm create vite@latest my-vue-app -- --template vue ## latest可以换成指定的vite版本 my-vue-app换成自己的项目名 ##本机环境是node16.18.1 npm是8+ 因此使用vite4 ##示例: npm create vite@4.1.0 mumudemo -- --template vue mumudemo项目(基于Vite + Vue项目)│ ├── node_modules 目录 (...
项目名字,回车 选中vue 回车 选中vue-ts 回车 完成 根据步骤执行上图的提示操作 cd project-name yarn yarn dev 成功运行 配置host vite.config.ts 配置host和别名 代码语言:javascript 复制 import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import styleImport from "vite-plugi...
1、搭建项目: npm init vite-app 项目名称 2、 进入项目: cd 项目名称 3、安装依赖: npm install 4、启动项目: npm run dev 这是安装完依赖后的项目结构 image.png 二、安装vue全家桶 1、安装router npm install vue-router@4 (1)在src目录下新建router文件夹,然后在里面新建index.js文件 ...
第一个Vite+Vue3.0项目就搭建好了!Vite默认应用模板为Vue3.x,如果项目启动时,在浏览器F12时看不到Vue选项,Vue.js not detected,需要更新一下devtools,更新地址 快速构建方法: # npm 6.x npm init @vitejs/app my-project --template vue # npm 7+ 需要额外的双横线: ...
1. 全局安装create-vite-app yarn global add create-vite-app@1.18.0 2.创建项目目录 cva vue3-ui 或者 create-vite-app vue3-ui Vue 2 和 Vue 3 的区别 90% 的写法完全一致,除了以下几点 Vue 3 的 Template 支持多个根标签,Vue 2 不支持 ...
除了手动配置外,使用vite工具可以快速搭建Vue3项目。首先需要全局安装vite:npm install -g vite,然后在终端中进入项目目录,使用命令:vitecreate my-vue-project --template vue-ts。其中“my-vue-project”为项目名称,“vue-ts”为模板名称,也可以根据需要选择其他模板。使用此命令会自动创建一个Vue3项目。完成后可...
(1)创建项目 yarn create @vitejs/app (项目名字) (2)依次选择如下选项 vue => vue-ts (这个步骤依据个人开发习惯,习惯ts可以使用ts,喜好js,那选择vue) 你看到如下提示后就代表创建成功 Scaffolding project in E:\公司相关\学习项目\前端项目\VUE\vue-vite-web... ...