使用vscode + vite + vue3+ element3 搭建vue3脚手架

|---------|
| 技术栈 |

开发工具:VSCode

代码管理:Git

前端框架:Vue3

构建工具:Vite

路由:vue-router

状态管理:vuex

AJAX:axios

UI库:element-ui 3

数据模拟:mockjs

css预处理:sass

|------------------------------------|
| 构建viite + vue3 + element-ui3项目 |

1、安装vite + vue3脚手架

以管理员身份打开cmd命令窗口,切换到要安装项目的文件夹

cd E:\code\web\vite.myvue3

安装 vite

复制代码
npm init vite@latest 

输入项目名称,

输入包名称,

选择Vue(如果上下键不能选择,就手动输入选项,再回车),

选择JavaScript,

创建完毕。

创建项目生成的文件:

2,运行vite + vue3项目

打开vscode,打开刚创建的E:\code\web\vite.myvue3文件夹,新建一个终端,在终端窗口中输入两条命令:

复制代码
cnpm insall           #仅第一次运行前需要安装
npm run dev

如果执行 npm run dev 命令的时候报错类似 "\node_glotal\vue_sp1,因为在此系统上禁止运行脚本" 这种错误,

解决办法:

以管理员身份打开 Windows PowerShell

输入 set-ExecutionPolicy RemoteSigned

选择Y 就可以了。

运行成功会输出如下信息:

将 Local:后面的Http地址输入到浏览器地址栏里查看效果。

在 浏览器里运行出现上面的信息,说明vue3 + vite 项目跑起来了。

|-----------------|
| 3,安装vue3依赖包 |

复制代码
cnpm install vue-router@4           #配置路由
cnpm install vuex@next -S           #配置状态管理
cnpm i axios -S                     #安装 axios
cnpm install --save-dev sass        #css预处理,可以不安装
cnpm i mockjs -D                    #安装mockjs,用于摸拟后端接口调试,可以不安装

|---------------------------|
| 4,安装element-plus及icon |

复制代码
#安装Element Plus
cnpm install element-plus -S

#安装element plus icon
cnpm install @element-plus/icons -S
cnpm install @element-plus/icons-vue -S

根据需要安装其它需要用到的依赖:

复制代码
#安装 echart
cnpm install --save echarts

#安装二维码
cnpm install --save qrcode.vue

#安装 tinymce文本编辑器
cnpm install tinymce -S
cnpm install @tinymce/tinymce-vue -S

#安装 html2canvas
cnpm install --save html2canvas

|-----------------------|
| 5,main.js文件配置vant |

复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
//import TEditor from './components/TEditor.vue'

const app = createApp(App);
//app.component('TEditor',TEditor);
app.use(store).use(router).use(ElementPlus, { size: 'small', locale: zhCn}).mount('#app');

|----------------|
| 6,打包vue3项目 |

复制代码
npm run build
相关推荐
FinAnalyzer7 小时前
如何在 InsCodeAI 上搭建并使用 Jupyter Notebook 环境?
ide·python·jupyter
SoveTingღ7 小时前
【开发环境配置】VScode里面配置cmake遇到的问题
c语言·vscode·cmake·嵌入式软件·开发环境配置
vsropy7 小时前
VScode输出中文乱码问题解决
ide·vscode·编辑器
患得患失9498 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
写点什么啦9 小时前
一键修复ipynb,Jupyter Notebook损坏文件
ide·python·jupyter
DIY全栈开发9 小时前
ESP32S3 Ubuntu vscode如何使用USB-JTAG调试
linux·vscode·ubuntu
Hi_kenyon12 小时前
Vscode的常用快捷键(摆脱鼠标计划)
ide·vscode·计算机外设
唯之为之15 小时前
如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等
vscode·ai编程
写写闲篇儿16 小时前
经典IDE之Turbo C
ide
Generalzy16 小时前
从 Print 到 Debug:用 PyCharm 掌控复杂程序的调试之道
ide·性能优化·pycharm