下载素材的网站,九台网络推广,织梦猫免费模板,化妆品公司的网站建设策划书概述
要使用vite创建Vue3项目#xff0c;有很多种方式#xff0c;如果使用命令#xff0c;则推荐如下命令#xff1a;
# 使用nvm将nodejs的版本切换到20
nvm use 20# 全局安装yarn
npm install -g yarn# 使用yarnvite创建项目
yarn create vite不过#xff0c;笔者更推荐…概述
要使用vite创建Vue3项目有很多种方式如果使用命令则推荐如下命令
# 使用nvm将nodejs的版本切换到20
nvm use 20# 全局安装yarn
npm install -g yarn# 使用yarnvite创建项目
yarn create vite不过笔者更推荐搭建使用基于目录结构的构建方式这种方式能够避免过度依赖网络环境而且还能够得到一个非常整洁的初始环境非常便于初学者。即使是后期变得越来越熟练这种基于模板代码去开发的方案依然非常适合。
目录结构 完整代码
package.json
{name: hello,private: true,version: 0.1.0,type: module,scripts: {dev: vite,build: vite build},dependencies: {vue: ^3.3.8},devDependencies: {vitejs/plugin-vue: ^4.5.0,vite: ^5.0.0}
}vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vueexport default defineConfig({plugins: [vue()],
})index.html
!doctype html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/htmlsrc/main.js
import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)src/App.vue
template你好Vite5Vue3
/template启动方式
yarn
yarn dev浏览器访问http://localhost:5173/