一创建项目：

方式一：进入可选方式来创建项目
npm方式：

$ npm init @vitejs/app

yarn方式：

$ yarn create @vitejs/app

然后进入编辑项目文件夹名字【默认vite-project】
最后进入选择支持的框架模板【选择需要的一个】

方式二：构建vue 项目
npm方式：（npm 7+版本以上）

npm init @vitejs/app my-vue-app -- --template vue

yarn方式：

yarn create @vitejs/app my-vue-app --template vue

二运行项目：

进入到创建的新项目中

cd vite-porject

安装所需的包----------因为package.json文件里面描述了所需的包

npm install

进入开发模式测试服务器

npm run dev

命令的注释

package.json文件里面的脚本指定的启动命令
"scripts": {"dev": "vite","build": "vite build","serve": "vite preview"},
意思为：
dev开发测试服务
build打包服务
serve生产运行服务
指令为：npm run + [服务]

三导入包

想要导入一些npm包来使用，那么就项目文件夹里面打开cmd命令窗口，进行安装想要的包
1：如安装vue-router

npm install vue-router@4 -D

2：引入文件
main.js原文件内容：

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

main.js文件引入之后：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
# 其它导入二
createApp(App)
.use(router)
# 其它使用二
.mount('#app')

3.如果是router则需要自行创建一个文件来配置
src目录下创建router文件夹，并在router文件夹内创建一个index.js文件【index.js的内容和旧版本没有改变】

四：引入饿了么ui库或者是有赞ui库

建议使用全局使用，大型商业项目再进行优化，按需加载

vite方式创建vue项目相关推荐

使用vite脚手架创建vue项目
选择列表方式创建项目 npm init vite # 等价于 npm create vite # 使用yarn yarn create vite # 使用pnpm pnpm create vite 会 ...
vue的使用（引用/创建vue项目）（一）
在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广 ...
使用vite创建vue项目步骤
由之前使用@vue/cli创建vue项目,改为用vite创建使用步骤使用以下命令实现使用vite创建vue项目: npm init vite-app <project-name> 相比 ...
创建vue项目+总结使用(跨域问题+vue 创建)
创建vue项目: -安装node.js-vue脚手架-vue create 项目名字pycharm开发vue项目-需要安装vue.js插件-setting--->plugins--->左下 ...
创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件（.vue，js代码等）
下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件一.引入elementUi 顺便一提axios使用说明和axios在vu ...
使用UI创建vue项目并添加element ui和axios
目录简介 Vue简单安装说明项目创建步骤总结简介因为最近一个项目需要使用SPA的方式,而前端选择使用vue来实现.所以最近重新看了下vue的相关知识,发现最新的vue项目可以在web中使用界 ...
前端-可视化创建vue项目
注:以下操作是在已安装脚手架的基础上进行(如果出现可视化创建vue项目失败的情况,可能是脚手架版本的问题,建议安装更高版本的脚手架) 一.打开可视化界面第一步,视窗键+R,打开"运行&qu ...
创建Vue项目，找不到router文件（router.js）的解决方法
创建Vue项目,找不到router文件(router.js)的解决方法问题描述: 安装 Vue Router 原因分析: 解决方案: 命令窗口创建使用图形化界面问题描述: 如图所示: 安装 Vu ...
Vue-cli创建Vue项目工程步骤详解
Vue-cli 即:Vue脚手架.官方网址:vue-cli官网本篇文章以我经常创建Vue项目工程的步骤为例,带着大家一步一步创建一个全新的vue项目工程.文章会详细讲解Vue脚手架创建项目的每一个步 ...

vite方式创建vue项目

一创建项目：

二运行项目：

三导入包

四：引入饿了么ui库或者是有赞ui库

vite方式创建vue项目相关推荐

最新文章

热门文章

vite方式创建vue项目

一 创建项目：

二 运行项目：

三 导入包

四：引入饿了么ui库或者是有赞ui库

vite方式创建vue项目相关推荐

最新文章

热门文章

一创建项目：

二运行项目：

三导入包