vite+vue建立前端工程_webstorm vue+vite创建工程-CSDN博客

本文链接：https://blog.csdn.net/wulong710/article/details/147934488

参考

开始 | Vite 官方中文文档

VUE教程地址

https://cn.vuejs.org/tutorial/#step-1

https://www.runoob.com/vue3/vue3-directives.html

第一个工程

https://blog.csdn.net/qq_35221977/article/details/137171497

脚本

chcp  65001
@echo off
@echo  建立vite工程

set PRO_NAME=my-vue-app

if not exist  %PRO_NAME% (

	call npm create vite@latest %PRO_NAME%

	cd  ./%PRO_NAME%
	
	call npm install vuex@next --save
	call npm install element-plus
	call npm install vue-router@4
	call npm install unplugin-auto-import
	call npm install unplugin-vue-components
	call npm insall @type/node
) else (
	echo %PRO_NAME% 工程已经存在
	cd  ./%PRO_NAME%
)


set NOW_PATH=%cd%
echo 'now_path= '%NOW_PATH%
echo 点击回车启动vite工程，请访问http://localhost:5173

call  npm install  
call   npm run  dev

pause

在这里插入图片描述

安装插件

Vue Theme
Vue Official
Vue 3 Snippets
Vue 3 Support -AIL In One
Prettier ESLint
TypeScript Importer

setting.json设置

{
  "editor.minimap.enabled": false,
  "explorer.confirmDelete": false,
  "plantuml.render": "Local",
  "workbench.colorTheme": "Visual Studio 2017 Dark - C++",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "emmet.triggerExpansionOnTab": true,
  "files.associations": {
    "*.html": "html",
    "*.vue": "vue",
    "*.ts": "typescript"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.definitionLinkOpensInPeek": true,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.rulers": []
}